Header issue – Not allow overlap of content leaves gap on mobile

Hi Support

We recently updated to the latest version of the theme, and noted the reset of the headers, and being forced to use the header builder.

We also noted that the sticky header colour cannot be changed on scroll down as per https://xtemos.com/forums/topic/header-builder-in-header-watches/#post-63136

We have revised our headers in header builder, and are left with a problem in that on mobile, when “do not overlap content” is selected, there is a gap the size of the header which is written inline on the element.

I have attached images to demonstrate, as well as relevant settings in header builder.

Please advise how to fix this.

Many thanks
Charles

Attachments:

You must be logged in to view attached files.

Hello,

We have checked your site on mobile http://prntscr.com/l7x2dh As you can see, no problem. When you resize the window update the page and you will see.

If you want to change the background on the scroll, try this code:

body.basel-header-overlap .header-simple.main-header.act-scroll {
        background-color: white;
        color: black;
}
body.basel-header-overlap .color-scheme-light.header-simple.main-header.act-scroll .main-nav .menu>li.current-menu-item>a,
body.basel-header-overlap .color-scheme-light.header-simple.main-header.act-scroll .main-nav .menu>li>a,
body.basel-header-overlap .color-scheme-light.header-simple.main-header.act-scroll .right-column a,
body.basel-header-overlap .color-scheme-light.header-simple.main-header.act-scroll .amount,
body.basel-header-overlap .color-scheme-light.header-simple.main-header.act-scroll .main-nav .menu>li.menu-item-has-children>a:after{
        color: black;
}
body.basel-header-overlap .color-scheme-light.header-simple.main-header.act-scroll .right-column .search-button a:after, 
body.basel-header-overlap .color-scheme-light.header-simple.main-header.act-scroll .right-column .search-button a:before,
body.basel-header-overlap .color-scheme-light.header-simple.main-header.act-scroll .right-column .basel-burger, 
body.basel-header-overlap .color-scheme-light.header-simple.main-header.act-scroll .right-column .basel-burger:after, 
body.basel-header-overlap .color-scheme-light.header-simple.main-header.act-scroll .right-column .basel-burger:before{
        background-color: black;
}

Set the color as per your needs and add the code to the Theme Settings > Custom CSS.

Best Regards

[Author]

Posts