Make menu same size across site

Hi there

I have noticed that when scrolling down the home page the menu is a slim bar, if you then navigate to another page the menu is quite a thick bar, that then becomes the slim bar once you are scrolling down. I would like the static menu sizes to match the scrolling menu size . Otherwise when navigating from a scrolled down homepage to another page the difference in menu sizes jars a bit Does that make sense?

I haven’t been able to find anywhere to set this and can’t find any suggested custom code, can you help?

Many thanks!

Hello there,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header.float-header {
      padding: 20px 0 !important;
    } 

Regards,
Kharis

Hi Kharis!

That worked but not in the way I was hoping lol The CSS supplied kept the menu fixed at 20px when it scrolled, so the menus match in size when navigating to another page. Matching = great, size of menus = not what I wanted ideally :slight_smile:

What I wanted was to reduce the menu size on the non-home pages to the size of the menu on the homepage when scrolling, so the top menu bars across the site are a bit narrower, rather than making the menu bar on the home page thicker when scrolling.

Does that make sense?

TIA! Janine

Hello there,

Please try this code:

    body:not(.home) .site-header,
    body:not(.home) .site-header.float-header {
      padding: 5px 0 !important;
    } 

Regards,
Kharis

Many thanks Kharis - this is perfect!!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis