Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 26, 2020 at 12:42 am #1178417
    farrdesign79

    I tried following this tutorial to match the header and there is a huge space in the header:

    Add button elements to your header

    Griswold Home Care of Cincinnati

    Also, the header is not sticky and covers the Main Container area.
    Please help.

    I am basically trying to match the header here, but a centered menu below is probably fine:

    Home

    January 26, 2020 at 3:41 pm #1178502
    Mike

    Hey Shane,
    Thanks for the login, when I looked at your header it was “sticky” that is that it stays visible after scroll, so after looking at your mockup and our documentation demo I assumed that you didn’t want this so I removed it so the header scrolls up now.
    I also made some other tweaks, please clear your browser cache and check.

    Best regards,
    Mike

    January 28, 2020 at 7:17 am #1178887
    farrdesign79

    Thanks, Mike.
    The header is fine sticky. How can I get the header like the Enfold documentation link where the logo and buttons are on top of the full width menu below? I would also like the menu to be on right, not centered.

    January 28, 2020 at 1:39 pm #1178998
    Mike

    Hi,
    Thank you for the feedback, I tweaked a little more.
    please clear your browser cache and check.

    Best regards,
    Mike

    January 29, 2020 at 4:32 am #1179267
    farrdesign79

    Thanks, Mike
    I am really trying to do what I did with fmc2020.com, but no longer have access to that website. The height is just too big and the mobile version looks off. Not sure why I am struggling now.

    January 29, 2020 at 12:47 pm #1179394
    Mike

    Hi,
    On the old site the widget area is after the menu, and on the new site it’s before the logo, I think for the old site you used this function:

    add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area_after_main_menu' );
function enfold_customization_header_widget_area_after_main_menu() {
dynamic_sidebar( 'after_main_menu' );
}

    call this sidebar after_main_menu
    I also believed you had header set to “logo left, menu below”
    Here’s the css:

    #header .widget {
position: absolute;
right: 10px;
top: -90px;
z-index: 999;
}
@media only screen and (min-width: 990px) {

#avia-menu {
  text-align: center!important;
  display:flex!important; 

}

.av-main-nav > li {       
    flex-grow: 1;
    justify-content: center;
    width: auto!important;
}

.av-main-nav > li > a {
    display: block; 
}

.avia_image  { border: 7px solid transparent;

}
#custom_html-4 .avia-button-wrap.avia-button-left {
    float: left;
margin-left: 4px;
}
#custom_html-4 {
    width: 400px !important;
}
#header .widget {
      height: 80px;
}
#top #header .av-main-nav > li > a{
font-size:18px !important;
}

}

    in my test I used a “custom html” widget to add the buton shortcode, thus the ID “custom_html-4” above.
    2020-01-29-053819
    Give this a try.

    Best regards,
    Mike

    March 6, 2020 at 8:16 pm #1190974
    farrdesign79

    Thank you. I think the header is where it needs to be, except for in mobile view. How do I have the menu not show for mobile?

    March 7, 2020 at 8:39 am #1191079
    Jordan Shannon

    Hi,

    You want to remove the burger menu from mobile?

    Best regards,
    Jordan Shannon

    March 7, 2020 at 11:27 pm #1191180
    farrdesign79

    Opps, I mean remove the header widget area in mobile screen size, so we can see the burger menu. Usually there is css code for that.

    March 8, 2020 at 6:24 am #1191225
    Rikard

    Hi,

    Thanks for the clarification. Please try this CSS as well:

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

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.