Duplicated Burger Icon and more padding to each nav item

Hi,
To correct the mega menu items please change this part:

.avia-menu>ul.av-main-nav>li.menu-item .avia-menu-text,
.avia-menu>ul.av-main-nav>li.menu-item-search-dropdown {
	display: flex;
    justify-content: center;
}

to this:

.avia-menu>ul.av-main-nav>li.menu-item>a> .avia-menu-text,
.avia-menu>ul.av-main-nav>li.menu-item-search-dropdown {
	display: flex;
    justify-content: center;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
to correct the two words “Get Involved” please try to adjust the font size for the screen width, you will need to go a little smaller when that occurs, it looks like 17px instead of 18px works.

Best regards,
Mike

Hi,
To correct this try changing the menu width from 14.25% to 13.25% and the padding from zero to 10px left and right. originally I set the padding to zero so you could have a larger font, so by adding the padding below 992px you will need to also reduce the font size so “Get Involved” will fit on one line. It looks like a font size of 14px will fit.
Please try making this adjustment, or adjusting slightly more. Otherwise feel free to include an admin login in the Private Content area below.

Best regards,
Mike

Hi,
I believe that I have achieved what you wished for, but I had to change the break point to 1024px instead of 992px, this is the current css:

@media only screen and (min-width: 767px) and (max-width: 1023px) {
  #top #header .av-main-nav > li.menu-item  {
      display: none!important;
  }
  #top #header .av-burger-menu-main.menu-item-avia-special  {
      cursor: pointer;
      display: block!important;
  }
  .html_header_top .av_bottom_nav_header .av-logo-container .main_menu {
    display: block !important;
}
  #top #header_main_alternate {
	 display: none;
}
#top #header .av-main-nav > li > a {
  	background-color: transparent !important;
  }
  .html_header_top #top .av_menu_left .main_menu {
    right: 20% !important;
    left: auto !important;
  }
}
@media only screen and (min-width: 1024px) { 
.html_header_top.html_bottom_nav_header #top #header_main_alternate .main_menu .menu-item-search-dropdown {
	float: left;
    width: 45px;
}
.html_bottom_nav_header #top #header_main #menu-item-search>a {
    padding-right: 13px;
}
.main_menu {
    display: flex;
    align-items: center;
}
.avia-menu>ul.av-main-nav {
    margin: 0;
    display: flex;
    justify-content: space-around;
    position: relative;
}
.avia-menu>ul.av-main-nav li {
    display: flex;
    flex-grow: 1;
    justify-content: center;
}
#top #header .av-main-nav > li:hover {
    background-color: #776fb1;
    transition: background-color 0.4s ease-in-out,color 0.4s ease-in-out,border-color 0.4s ease-in-out;
}
.avia-menu>ul.av-main-nav .av-burger-menu-main.menu-item-avia-special {
	display: none;
}
}

please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad to hear, once you are done testing please let us know so we close this thread.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #header_main_alternate .avia_mega_div .current-menu-item {
    background-color: #fff;
}
#top #header .av-main-nav > li > a {
    width: 100%;
    text-align: center;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad that this helped, shall we close this thread then?

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike