Main menu bar

Hi, I use this custom css to shrink the main menu bar and logo on the home page whilst scrolling but would like to achieve the same thing on all pages …any ideas?
www.euhcm.com

.float-header .site-logo {
    max-height: 50px;
    transition: 0.5s;
}

Hello @zigzag1963,

Sticky menu works on all pages when Full screen slider or Image is set for Site header type in WordPress Dashboard → Appearance → Customize → Header area → Header type.

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

Kind Regards, Roman.

Many thanks Roman, I will give that a try a wee bit later when I am back home. Thank you for your help and advice…to me, you seem to be the most consistent with ‘to the point’ solutions.

Kind Regards,

Lawrence

You are welcome Lawrence!

I am very happy to hear that, thank you :slight_smile:

Kind Regards, Roman.

Hi Roman, that does work but I would like if possible to stay with the configuration I have and just modify the css code above to work on all pages i.e. just like the home page when you scroll. Is this possible.

www.euhcm.com
Kind Regards,

Lawrence

Okay Lawrence,

Please try this:

#masthead {
    position: fixed;
}

#content {
    padding-top: 160px;
}

.home #content {
    padding-top: 0 !important;
}

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

Kind Regards, Roman.

Hello Roman, nearly there! The css you suggest anchors the menu bar and logo on all pages…the only small issue is that the menu bar and logo don’t shrink as the home page does with the code I use below for the home page.

I am sorry to bother you with this.

Kind Regards,

Lawrence

.float-header .site-logo {
    max-height: 50px;
    transition: 0.5s;
}

Well, it works for me when I try it on your site with browser developer tools.

Can you please try to clear your cache after applying the code?

If it still will not work, can you please leave it applied to let me inspect it?

Also, I noticed that your pages has horizontal scroll. I’m not sure what causes this, but you can try the code below to fix it.

body {
    overflow-x: hidden;
}

Kind Regards, Roman.

Hello Roman, thank you again. Everything sorted now and many thanks for the tip on the horizontal scroll…no idea how that crept in, probably a ghost in the machine.

Kind Regards,

Lawrence

You are welcome Lawrence,

And have a nice day :slight_smile:

Kind Regards, Roman.