Make Menu Overlap Main Content

Hello!
I would like to make the main menu overlap the content on some pages. Those pages are made in page-builder and have a smartslider in the first row.

  1. I did this by setting the #primary and.content-wrapper to margin-top: -128px;
    Is this the best way to do this or do you recommend a different approach?
  2. Since the normal header takes up more room, what would be the smartes way to give the normal header the same height/ property as “site-header fixed float-header”?

Kind regards, Petra

Hello Petra,

From your site admin area, visit Appearance > Customize > Header area > Menu style, then choose sticky on “Sticky menu” option. Doesn’t it work for you?

Regards,
Kharis

Hi Karis,

I had already chosen that and it works. But the menu has a bigger heigth and then shrinks to the height it has when it is sticky. I would like it to be the same smaller height to begin with. :slight_smile:

Kind regards, Petra

Hello Petra,

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

    .site-header {
      padding: 5px;
    } 

Regards,
Kharis

Thank you Kharis, that works! But now it became visible that setting a negative top margin for #primary and .content-wrapper does not have the same effect in Firefox and Chrome. For example, when I set it to -48px, it aligns with top in Firefox, but there is still a gap in Chrome. Is there a more reliable solution to move the content all the way to the top underneath the header?
Kind regards, Petra

Hello there,

Please share a link to your site, so I can have a closer look.

Regards,
Kharis