Make menu span the menu area

Hey whdsolutions,

Please try the following in Quick CSS under Enfold->General Styling:

.html_header_top.html_main_nav_header #top .av_menu_left .main_menu, .html_header_top.html_main_nav_header #top .av_menu_left .main_menu .av-main-nav-wrap {
  width: 100%;
}

#top #header .av-main-nav > li {
  width: 25%;
}

Best regards,
Rikard

Hi,

Thank you for the update.

Please try to include this css code to create a border below the menu items:

#top #avia-menu:after {
    content: "";
    width: 90%;
    height: 2px;
    display: block;
    position: absolute;
    background: white;
    top: 140px;
}

#top #avia-menu {
    margin-top: -19px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Doing these changes has messed-up the mobile menu and the line is still showing on mobile

Try to move the css code inside a css media query. Please replace the previous code with this:

@media only screen and (min-width: 768px) {

  /* Add your Desktop Styles here */
  #top #avia-menu:after {
    content: "";
    width: 90%;
    height: 2px;
    display: block;
    position: absolute;
    background: white;
    top: 140px;
  }

  #top #avia-menu {
    margin-top: -19px;
  }
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,

Please try this CSS as well:

li.av-burger-menu-main {
  float: right;
}

Best regards,
Rikard

Hi,

Please start a new thread for any additional questions. Long threads can go off-topic and are harder to support and search. Keeping each thread focused helps everyone find answers more easily.

Best regards,
Ismael

Hi,

The issue with the mobile menu occurs because of this css code:

#top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
    line-height: 244px !important;
}

Please try wrapping the rule in a css media query so that it only affects the desktop view:

@media only screen and (min-width: 989px) {

  /* Add your Desktop Styles here */
  #top #header_main>.container,
  #top #header_main>.container .main_menu .av-main-nav>li>a,
  #top #header_main #menu-item-shop .cart_dropdown_link {
    line-height: 244px !important;
  }
}

Best regards,
Ismael