Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #623509

    I am trying to add three widgets to header.
    I have added the following to my child theme functions.php:
    add_action( ‘ava_main_header’, ‘enfold_customization_header_widget_area’ );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( ‘header’ );
    }
    (I am using logo with menu below)
    I also added this to Quick CSS:
    #header .widget {
    left: 50%;
    padding-top: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    z-index: 999;
    }

    Is there a way for me to add a second or third widget to header to display in line with the first widget?
    Also, how do I prevent the widget(s) from shifting position relevant to the logo as the screen size is shrunk?
    Thanks in advance for your help.

    #625057

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    #626998

    Sorry for delay. I have just started dev on this so please forgive the mess.
    See the header on the link below.
    I have added a second header widget and you will see how it is overlapping the first.

    #627026

    Hey!

    Try adding this code to the Quick CSS:

    #text-5 {
        transform: translate(100%);
    }

    Cheers! 
    Josue

    #627448

    Josue,
    Thanks. Learned a CSS selector I did not know existed. I had to add !important but it did work.
    However, when I re size display, the widgets shift and overlap each other. On a mobile screen for example they both completely overlap the logo.
    Is there a way to contain them in their relative position so they just re scale?

    #627508

    Hi!

    the space there is a bit limited.
    Would it be ok, if we hide one of them on mobile? It can look a lot better

    Best regards,
    Basilis

    #627517

    Sure. What would be the if statement to add?

    #627761

    Something like this:

    @media only screen and (max-width: 767px) {
        #text-5 {
           display: none;
        } 
    }
    #627959

    Josue,
    That had an interesting result. I understand the code but the result was very weird. It pushed both widgets to the left of the screen and pushed the logo down even at higher widths above 767.
    I am going to leave the CSS in place so you can see.
    Let me know your thoughts.
    Thanks again for your effort.

    #628346

    You’re missing a }

    @media only screen and (max-width: 767px) {
        #text-5 {
           display: none;
    	} 
    }
    #628675

    Geez. Thanks.
    Ok So that idea of hiding one as the screen width gets smaller, but still it leaves the visible one on top of the logo and menu when it gets to a mobile device size.
    SO I can play with the where to hide and hide both of them, but is it possible instead to have them shift to be below the logo area as stacked elements when the width is 767?

    #629766

    Hi,

    Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
    Though it sounds quite complicated what you want to do, but we will try it anyway.

    Best regards,
    Andy

    #630219

    Here is a shot of what a sub-page looks like now:
    null
    Here is what looks like on a tablet or full screen:

    Here is what it looks like on a mobile without hiding the widgets
    http://dev.orangevilla.org/wp-content/uploads/2016/05/mobile-current.jpg:
    The widgets get pushed over the logo area and the mobile menu

    Here is what I would like it to look like on any screen < 1000px wide.
    http://dev.orangevilla.org/wp-content/uploads/2016/05/mobile-desired.jpg

    You can see the same kind of idea here:
    https://www.gracechurch.org/ when you look at the site on a mobile device.

    Hope that helps.
    Thanks for even bothering to look at this. I do appreciate it.

    #630562

    Hi,

    thanks for the precise mockups and clarifications!

    Use this code inside of Quick CSS field:

    @media only screen and (max-width: 767px) {
    header#header {
    height: 400px;
    }
    div#text-5 {
    top: 83px !important;
    left: 125px !important;
    }
    div#text-6 {
    top: 207px !important;
    left: -126px !important;
    }}
    

    And adjust the values as needed.

    Best regards,
    Andy

    #631052

    Andy,
    That seems to do the trick of getting the widgets to move below the header and be stacked, but it is dropping them over the content below. In this case the full width slider.
    Is there a way to have it remain in the logo area of the header so it forces the image to expand vertically and the widgets appear below the logo and above the full width slider?
    Thanks again for your expertise in this.

    #631303

    Hi,

    add this code:

    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    top: 275px;
    position: relative;
    }}
    

    Best regards,
    Andy

    #631561

    Hi Andy.
    So it’s getting there. Here is a screenshot:
    null
    The text 5 widget appears below but a bit off center and the text 6 widget is below that but pushed off the screen to the left.
    Thoughts?

    #632490

    Any thoughts?

    #632668

    Hi,

    Site looks fine on mobile except that the logo is being overlapped by the “cart” and “mobile menu” icon. Add this code:

    @media only screen and (max-width: 767px) {
    .responsive .logo img {
        max-height: 60px;
    }
    }

    Screenshot:

    View post on imgur.com

    Best regards,
    Ismael

    #633235

    Hi Ishmael,
    I am not sure why, but on my mobile, an Android (LG-G2 specific), I am still seeing the offset as shown here:
    (Purchase code hidden if logged out) -03.png” alt=”” />
    To be clear, I am still implementing both sets of code correct?

    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    top: 275px;
    position: relative;
    }}

    and

    @media only screen and (max-width: 767px) { .responsive .logo img {
    max-height: 60px;
    }}

    #633302

    Hi,

    it should work fine. Please clear browser cache on your device and refresh a few times. Check on another device as well.

    Best regards,
    Andy

    #633378

    Andy,
    I am afraid I may have over-complicated the matter. When I stack all the CSS related to this I have the following:
    @media only screen and (max-width: 767px) {
    header#header {
    height: 400px;
    }

    div#text-5 {
    top: 83px !important;
    left: 125px !important;
    }

    div#text-6 {
    top: 207px !important;
    left: -126px !important;
    }
    }

    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    top: 275px;
    position: relative;
    }
    }

    @media only screen and (max-width: 767px) {
    .responsive .logo img {
    max-height: 60px;
    }
    }

    #header .widget {
    left: 50%;
    padding-top: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    z-index: 999;
    }

    #header .widget {
    margin-top:20px!important;
    color:#ffffff!important;
    }

    Together it does not display correctly. Is there something in all this that I should have removed or modified?

    #633615

    Hi,

    please always add screenshots to show us what the code does with your website.
    Do you want to change mobile behavior? or are you referring to desktop now?

    Change this code inside media queries:

    div#text-6 {
    left: -126px !important;
    }
    

    to this:

    div#text-6 {
    left: 105px !important;
    }
    

    And in general: play around with different values inside the codes you are using, until you find what fits to you.

    Best regards,
    Andy

    #633933

    Andy,
    Thanks. SO the div#text-6 and -5 appear to ffect position of widget on mobile or media screens.
    I got that position worked out.
    The desktop and tablet (screens wider than 767px, the widgets are both overlapping each other again.
    I have played with the following code:
    #header .widget {
    left: 50%;
    padding-top: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    z-index: 999;
    }

    #text-6 {
    transform: translate(100%);
    }

    which I though was for positioning of widgets on desktop-type display, but there are not moving.
    Here is a screenshot:
    Header Widgets Stacked on Desktop

    #634433

    Hi,

    as already said you need to play around with the different values to search the right positioning.
    Try this:

    #text-6 {
    left: 85% !important;
    }
    #text-5 {
    left: 65% !important;
    }
    

    Best regards,
    Andy

    #634793

    Andy,
    Thanks.
    Somehow those two callouts got lost in all the back and forth. That worked a charm.
    Thank you for hanging in there.

    #635184

    Hi,

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

Viewing 27 posts - 1 through 27 (of 27 total)

The topic ‘Add Multiple Widgets to Header’ is closed to new replies.