Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 29, 2018 at 2:27 pm #963708
    lindenhof

    Hello,

    I am trying to get my header to fill the whole width, and transform to a hamburger menu before the menu items touch the logo.

    I am using the following short code, although with only limited success – the header only uses up about 2/3 of the width, and the desktop menu disappears before the hamburger menu appears.

    div#header_main .container {
    width: 100%;
    margin: 0;
    }

    .html_header_top #top .av_header_stretch .container {
    width: 100% !important;
    }

    @media only screen and (max-width: 767px) {
    #footer .av_one_third{
    width: 100% !important;
    margin-left: 0 !important;
    }}

    @media only screen and (max-width: 1200px) {
    #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
    nav.main_menu { display: none; }}

    @media only screen and (max-width: 1200px) and (min-width: 768px) {
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
    }

    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
    display: block;
    }
    }

    June 1, 2018 at 4:49 am #965044
    Rikard

    Hey lindenhof,

    Please try this CSS for the container:

    .av-logo-container {
    max-width: 100% !important;
    padding:0 !important;
}

    And this for the mobile menu breakpoint:

    @media only screen and (max-width: 1200px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

    Best regards,
    Rikard

    June 1, 2018 at 12:19 pm #965252
    lindenhof

    Hey, thanks for your answer! I could avoid the “overlap” by setting the max-width to 1350 pixel.

    However, my header still doesn’t use the full width of the screen – I still have over 100 pixel padding on each side…

    June 1, 2018 at 3:04 pm #965397
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
/* CSS - full width header */

/* Custom width header */
#top #header .container {
    width:100%;
    max-width: 100%;
}

/* End CSS */

    For more info please check https://kriesi.at/documentation/enfold/header/#custom-header-width

    Result:

    You may not see the changes until the cached files are cleared in your browser.

    Please perform the below steps to clear the browser cache:

    1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
    2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
    3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

    Best regards,
    Vinay

    June 1, 2018 at 3:44 pm #965423
    lindenhof
    This reply has been marked as private.
    June 1, 2018 at 5:26 pm #965467
    Nikko

    Hi lindenhof,

    Glad that Vinay helped you. :)
    Let us know if you need further assistance or if we can close this thread.

    Best regards,
    Nikko

    July 5, 2018 at 8:31 pm #981725
    twhaoske

    Hi,

    This is a good thread for a common problem. A responsive header option would be a great added feature for the main menu options for Enfold! Anything to help prevent menu text from overlapping the header icon would be helpful.

    Another feature request would be to add a 3rd breakpoint for the hamburger menu to prevent issues of menu text overlapping the header on landscape tablets. Currently, I encounter issues with menu text overlapping the header icon on tablet devices. I keep making the menu text smaller, but that is not a very good solution as people need to be able to read the menu text.

    Currently there are only 2 breakpoints for browsers below 990px and lower. Could you add a 3rd breakpoint for browsers below 1025px?

    July 6, 2018 at 2:30 am #981797
    Vinay

    Hi,

    Thank you for the kind words :)

    To avoid cutting the menu text and create a 3rd breakpoint for the hamburger menu please adjust the viewport max-width value in the below CSS code and it to your site:

    /* Activate burger menu */
 @media only screen and (max-width: 1224px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
}}

    more info about menu overlaps logo in tablets.

    Best regards,
    Vinay

    July 6, 2018 at 3:09 am #981802
    twhaoske

    Thank you this was very helpful. I love this theme, thanks for the support.

    July 7, 2018 at 8:24 am #982325
    Rikard

    Hi twhaoske,

    Thanks for your feedback and kind words, please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

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