Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 14, 2016 at 10:25 am #613661
    Claudia

    Hi Kriesi team,

    I’m using Enfold and have the Header set to Logo Right, Menu Below. Header size 110px. Boxed layout.

    My issue is that I would like the menu to be full width (within the boxed content area). I have centered the menu already, but now I’d also like all of the menu items to be same size, starting with a little margin from left (see pic). To center the menu I used following code
    /* center menu */
    #avia-menu {
    width: 1010px;
    margin: auto;
    }

    How do I have to adjust the @media queries to display the main menu correctly? At the moment the last menu items are shown in a second row, when I make the browser window smaller? (see picture) I would like it to get smaller until it finally changes to mobile view. Is that possible?

    Can you please help me out? It’d be greatly appreciated.

    Thanks! Claudia

    April 14, 2016 at 1:05 pm #613810
    Yigit

    Hi Claudia!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .html_header_top.html_bottom_nav_header #top .main_menu .menu-item-search-dropdown {
    float: left;
}
#avia-menu { float: left; }
#header_main_alternate .container {
    width: 100%!important;
    max-width: 100%!important;
    padding: 0;
}
.av-main-nav > li { width: 100%; }

    Cheers!
    Yigit

    April 14, 2016 at 1:25 pm #613833
    Claudia

    Hi Yigit,

    thanks for your quick reply, but it did not work as intended. The menu items are all the same size now, but they are not on one line anymore. They are displaying all under eachother… (see pic) I would like to have the normal horizontal menu, centered, all items same size.

    Please help me. Thanks! :)
    Claudia

    April 15, 2016 at 9:19 am #614651
    Claudia

    Hi Yigit,
    I played around with the code a little bit, and changed the size of the items. But I still have the problem that there are some items showing in the second row? I can´t find a solution by changing the item width… :( And the menu is not in the centre anymore.) Thats what I added to Quick CSS:

    /* center menu */
    #avia-menu {
    width: 1010px;
    margin: auto;
    }

    .html_header_top.html_bottom_nav_header #top .main_menu .menu-item-search-dropdown {
    float: left;
    }
    #avia-menu { float: left; }
    #header_main_alternate .container {
    width: 100%!important;
    max-width: 100%!important;
    padding: 5;
    }
    .av-main-nav > li { width: 12%; }

    Thanks for checking once more.
    Claudia

    April 18, 2016 at 10:58 am #616253
    Andy

    Hey!

    I’ve added this into your Quick CSS field:

    /* KRIESI CUSTOM CODE*/
.html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
line-height: 21px !important;
} 
#top .av_seperator_big_border#header .av-main-nav > li > a {
padding-top: 8px;
}
/* KRIESI CUSTOM CODE END*/

    and now it’s working fine for me. Can you confirm?

    Cheers!
    Andy

    April 18, 2016 at 12:46 pm #616379
    Claudia

    Hi Andy,
    thanks for your help!!! It worked fine, but didn´t look too nice. :( I think I will leave the menu as it is and just center it with: .avia-menu.av-main-nav-wrap { margin-left:15%;}.
    Thanks anyway!
    Best, Claudia

    April 18, 2016 at 1:07 pm #616401
    Vinay

    Hey!

    To make a equal spaced menu like the attached screenshot

    Remove the below code 

    .avia-menu.av-main-nav-wrap {
    margin-left: 15%;
}

    Add the below CSS in Quick CSS

    /* Equal Spaced Menu */
.av-main-nav {
    display:flex;
    justify-content: space-between;
}

    Regards,
    Vinay

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Full width main menu’ is closed to new replies.