Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 2, 2015 at 1:26 am #545682
    ckwellington

    I followed your thread’s instructions to add a widget to the header area:

    add_action( ‘ava_main_header’, ‘enfold_customization_header_widget_area’ );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( ‘header2’ );
    }

    And, added css:
    #header .widget {
    z-index: 1000 !important;
    float:right;
    width:208px;
    margin-right:20px;
    margin-bottom:0;
    }

    But, this pushes my logo down and messes up the responsive behavior by adding the widget over logo. I’ve tried styling the logo container: container av-logo-container and it didn’t work.

    December 2, 2015 at 6:52 am #545765
    Rikard

    Hey ckwellington,

    Please try the following CSS instead:

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

    Cheers!
    Rikard

    December 2, 2015 at 7:34 pm #546066
    ckwellington

    Ok, thank you for the quick response. I adjusted it to left: 85%; to move it over to rh side. It doesn’t render correctly on mobile. Is there a way to move it under logo for smaller screen size?

    December 3, 2015 at 7:33 am #546262
    Rikard

    Hi,

    Try adding the following to target only mobile screens:

    @media only screen and (max-width: 767px) {
#header .widget {
  left: 50%;
  padding-top: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%);
  z-index: 999;
}
}

    Regards,
    Rikard

    December 4, 2015 at 9:17 pm #547272
    ckwellington

    I am still seeing it overlap the logo on small screen. What I want is to have the widget info shown on rh side, instead of the center, and have it either under the logo on mobil or removed on mobile. Thank you.

    December 5, 2015 at 9:00 am #547389
    Rikard

    Hi,

    It too big to fit nicely on mobile, it’s going to overlap something almost whatever you do. Not sure if I understood your last post correctly but if you don’t want to show it on mobile you can use the following CSS:

    @media only screen and (max-width: 767px) {
#header .widget {
display:none;
}
}

    Regards,
    Rikard

    December 8, 2015 at 8:04 pm #548980
    ckwellington

    Works perfect. Thanks for the fast and great support!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Widget in header’ is closed to new replies.