and here is the alternative without floating some menu links under the others:
Less place for the logo for more place for navigation

Try this first – seems to be the better alternative

.av-main-nav li:nth-child(3) {
    margin-right: 150px;
}

.responsive .main_menu ul:first-child > li > a {
    padding: 0 8px;
}

#header_main_alternate {
     border: medium none !important;
}

#header .container {
     max-width: 100%;
     padding: 0px;
}

.html_header_top.html_logo_center .logo {
     filter: drop-shadow(2px 2px 3px #888888);
     left: 50%;
     transform: translate(-50%, 20px);
}

.html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main {
    padding-top: 120px !important;
}

.cart_dropdown {
    opacity: 0;
    right: 0;
    top: 0;
    transition: none !important;

}

@media only screen and (min-width: 980px) {
.responsive .main_menu ul:first-child > li > a {
    padding: 0 20px;
}
}

@media only screen and (max-width: 810px) {
  .container #advanced_menu_toggle, #advanced_menu_hide {
      display: block;
  }
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
    display: none;
}
.responsive #top #wrap_all .container {
    float: none;
    margin: 0 auto;
    max-width: 85%;
    padding-left: 0;
    padding-right: 0;
    width: 85%;
}
.responsive.html_header_top.html_logo_center .logo {
    left: 0;
    margin: 0;
    transform: translate(0%, 0px);
}
.responsive #top .cart_dropdown {
    margin: -23px 50px 0 0;
    position: absolute;
    right: 7.5%;
    top: 50%;
    opacity: 1
}

• This reply was modified 8 years, 11 months ago by Guenni007.

Hi,
I tried to used the Google Tag Trigger to monitor the Click operation in my website. However, I need the “Click Text” variable is defined and attached the suitable value.
In Enfold theme, it looks the “Click Text” variable does not defined. Could you please support me how I can create and set value for Click Text variable, so I can use to track client operation in my web.
The image below shows what is the Click Text variable that I mentioned in this topic.

I am looking forward to hearing from you. Thanks!
Regards,
Nhan Ngo

Edit: try first the other solution – seems to be clearer !

so one possibility is to have a fluent nav height.
if you don’t want to shrink font-size you have to allow floating (as you does) – but your container with navigation is set to 50px height.
try this here instead:

#header .container {
     max-width: 100%;
     padding: 0px;
}

#header_main_alternate {
     border: medium none ! important;
}

.html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main {
    padding-top: 138px !important;
}

.html_header_top.html_logo_center .logo {
     filter: drop-shadow(2px 2px 3px #888888);
     left: 50%;
     transform: translate(-50%, 10px);
}

.html_header_top.html_logo_center .main_menu ul:first-child {
     display: inline-table ! important;
     width: auto ! important;
}

.html_header_top.html_bottom_nav_header .main_menu > div, .html_header_top.html_bottom_nav_header .main_menu ul:first-child {
     height: auto ! important;
     width: 100%;
}

@media only screen and (max-width: 1120px) {
.html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main {
    padding-top: 186px !important;
}
}

on transformation the logo for me it looks nice to have the logo a bit shifted down. But it is a matter of opinion.
the padding-top is for having the slider not covered by the navigation.

• This reply was modified 8 years, 11 months ago by Guenni007.