Header menu overlaps with slider text on scrolling

hello there, I’m facing an issue with Sydney theme. My site is http://development.royalmantra.com …header menu is overlapping with slider text. I want the site header and logo to be hidden on scroll while passing the slider area…

referrence site: https://f-billing.com/

Hello,

header menu is overlapping with slider text

You can try to use the following CSS code to reduce your header height a little bit and align scrolled menu vertically. You can add CSS code in Customize → Additional CSS section.

#masthead {
    padding: 0;
}

#masthead .col-md-4.col-sm-8.col-xs-12,
#masthead .site-logo {
    margin-bottom: 0;
}

#masthead.float-header .container > .row {
    display: flex;
}

#mainnav {
    margin-top: 0;
}

I want the site header and logo to be hidden on scroll while passing the slider area

I don’t think that there is an easy way to do it, unfortunately.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

hi roman, thanks for your response…code works fine but there is a issue on responsive view… Its hiding the hamburger icon of menu on mobile and tablet devices.

http://development.royalmantra.com

please have a look on its responsive view

Hello,

Try to add this CSS code as well:

.btn-menu {
    line-height: 1;
}

#mainnav-mobi {
    margin-top: 0;
}

Kind Regards, Roman.