Mobile header issues

Hey Rupert,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

@media only screen and (max-width: 479px) {
  li#menu-item-search a {
      top: 0px;
  }
  .responsive #top #wrap_all .main_menu {
      top: 60px;
  }
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi creativeyes,

Can you try to add this code:

display: none !important;

just below this line of code that Victoria gave:

li#menu-item-search a {

Let us know if this helps.

Best regards,
Nikko

Hi creativeyes,

Try adding this css code in Quick CSS:

@media only screen and (max-width:479px) {
  .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0 !important;
  }
}

Hope it helps.

Best regards,
Nikko

Hi,

Have you added the codes to very top of quick css so that it runs first before everything else?

Best regards,
Jordan Shannon

Hi creativeyes,

I have replaced the code I gave on your site and changed it to:

@media only screen and (max-width:479px) {
  .html_header_top.html_header_sticky body#top #wrap_all #main {
    padding-top: 0 !important;
  }
}

It works now, let us know if you need further assistance.

Best regards,
Nikko

Hi creativeyes,

You have this code in your custom.css https://cl.ly/3v2h0f2Z163D on this website http://dentists.theimplantexperts.com/. This is the reason for the issue there. It probably has to be wrapped in a media query.

Best regards,
Victoria

Hi creativeyes,

I have applied this code to http://dentists.theimplantexperts.com/

@media only screen and (max-width:479px) {
  .html_header_top.html_header_sticky body#top #wrap_all #main {
    padding-top: 0 !important;
  }
}

It also worked. Let us know if you need further assistance.

Best regards,
Nikko

Hi creativeyes,

The code I gave you, in the beginning, works fine, there is this little slash in the custom.css that is not supposed to be there, give the effect. Please remove it!

Best regards,
Victoria

Hi creativeyes,

Looks fine on my end. Could you please clear the cache, check again and get back to us.
Does not look too good on the screen 480-767px, so here is the code for that

@media only screen and (min-width:480px) and (max-width:767px) {
  .html_header_top.html_header_sticky body#top #wrap_all #main {
    padding-top: 30px !important;
  }
  li#menu-item-search a {
      top: 0px;
  }
  .responsive #top #wrap_all .main_menu {
      top: 60px;
  }
}

If you need further assistance please let us know.
Best regards,
Victoria

Hi,

Sorry for the delay, I checked your issue and removed the below CSS code from Enfold > General Styling > Quick CSS

@media only screen and (min-width:480px) and (max-width:767px) {
  .html_header_top.html_header_sticky body#top #wrap_all #main {
    padding-top: 30px !important;
  }
  li#menu-item-search a {
      top: 0px;
  }
  .responsive #top #wrap_all .main_menu {
      top: 60px;
  }
}

@media only screen and (max-width: 1024px) {
  nav.main_menu {
    display: block !important;
  }
  .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special, #menu-item-search {
    display: block;
  }
   .av-burger-menu-main.menu-item-avia-special a {
     line-height: 310px !important;
   }
}


@media only screen and (max-width:479px) {
  .html_header_top.html_header_sticky body#top #wrap_all #main {
    padding-top: 0 !important;
  }
}

@media only screen and (max-width: 479px) {
 li#menu-item-search a {
display: none !important;
     top: 0px;
 }
 .responsive #top #wrap_all .main_menu {
     top: 60px;
 }
}
.av-main-nav > li > a span.avia-menu-text, li#menu-item-search a { position: relative; top: 60px; }

And added this code to the Quick CSS section under Enfold > General Styling

CSS Snippet:

/* CSS - for mobile header */
@media only screen and (max-width: 767px) {
#top #menu-item-search {
    display: none;
}
.responsive .av-burger-menu-main {
    position: absolute;
    top: 46px;
    right:10px;
}

}
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px !important;
}
/* End CSS */

This is how your header looks now

The large gap you see is coming from custom.css

Did you add 245px top padding to the #main div?

It has an !important in the code due to which other codes do not affect please remove the !important rule and try adding the below code if you still notice the page please get back to us.

CSS Snippet:

/* CSS - Remove top padding in mobile */

@media only screen and (max-width: 767px) {
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px !important;
}
}

/* End CSS */

Best regards,
Vinay

Hi,

Sorry that this issue has been an ongoing issue. Some modifications take a lot of time and usually this type of modifications are not supported by theme authors and customers are advised to hire a freelancer. But you are an Enfold customer hence we are going outside the scope of our support and helping you achieve your design goals.

The reason I made the logo small is that you have a lot of menu items and it need’s more space, so on smaller screens, the logo and the menu will run into each other.

I have added extra code and fixed this for you. The logo size will adapt just before the menu runs into it now :)

#header_main {
    min-height: 189px;
}

@media only screen and (max-width: 767px) { 
#header_main {
    min-height: 120px;
}
}


@media only screen and (min-width: 1200px) {
/* Custom logo size */
#top .logo ,
#top .logo a {  
  width: 188px;
  height:auto;
 }
	}

Please feel free to review the site now the header too should work fine :)

PS: We post the code here so it can help others with the same issue.

Best regards,
Vinay