Breakpoint header overlaps incorrectly at 979 px

[Lobsterass]

Hola rockstarts!

I’m switching to hamburger menu at 979 px by using your preset responsive breakpoints. There is an incorrect overlap exactly at 979px only. How do I fix that? Is that an error within the theme or did I mess up my CSS (more likely )?

<3

Bergus AB - Bergus AB

Hamburger should be activated at 979px:

This is my CSS that seems to be wrong for the hiding points of the lower and upper background images:
/*
// Bacgr image responsive
*/
@media screen and (max-width: 978px) and (min-width: 0px) {
.headback.x-bg-layer-upper-image {
display: none !important;
}
}

[prakash_s]

Hello @Lobsterass,

Thanks for writing to us.

It seems that you have added a custom class(headback) in the section. Please note that the background class after the Section/ Row container DIV so you need to add a single space in your CSS selector so your CSS selector should be like this .headback .x-bg-layer-upper-image

Your complete code to disable the background image

@media screen and (max-width: 978px) and (min-width: 0px) {
.headback .x-bg-layer-upper-image {
display: none !important;
}
}

If it doesn’t work for you, I would suggest you check your custom CSS code error through CSSLINT.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[Lobsterass]

Got it! Works. Thanx! It was driving me nuts.

[tristup]

Hi @Lobsterass,

Glad that we are able to help you.

Thanks