Relates to https://kriesi.at/support/topic/duplicated-burger-icon-and-more-paddi

Hey jamesbarrell,

Thank you for the inquiry.

What is the actual model of the tablet where you are testing this? We may need to adjust the top padding of the main container on smaller tablet screens. Please add this css code.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 150px;
  }
}

Best regards,
Ismael

Hi,
Thank you for your patience, I just found this thread, nonetheless try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 772px) in (max-width: 1023px)  { 
	.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 150px;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
I see that I made an error above, this is the corrected css:

@media only screen and (min-width: 768px) and (max-width: 1023px)  { 
	.responsive.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 150px;
}
}

This only starts at 768px, please clear your browser cache and check.

I see another separate error with the margin-top at 767px and below, for the page, please disable any caching plugins and the Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and enable the Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files if you also see it, if it you then still see it, check your custom css for missing Semicolon

Best regards,
Mike

Hi,
Yes, I mean where the sticky header below 767px is covering the top part of the main body, this seems to be due to some custom css removing the top padding:

Try changing the padding-top: 0 !important; to padding-top: 80px !important; or more to suit.
Instead of using the !important;, try this css instead:

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

It was hard to examine because the Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression is still enabled.
Try disabling this while you are building your site.

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