Top menu bar

[David L]

Hi,

When im desktop and land on the website, the top menu bar has a transperent backround. When i start scrolling down it becomes white.

How can i set it to a white backround all the time. I.e when i land on the page the white backround is there already and not transparent.

[David Morgan]

Hi David,

Sure thing! Navigate to Appearance > Editor > Templates, select a template, and double click the header to edit the header template part. Select the Group Block for the header (this is easiest using the list view option). Under the “Advanced” tab for the Group Block you should see an “Additional Classes” field. Remove the “position-fixed” class (leaving “header-wrapper”). Then save the changes. That should create a solid white header bar at the top of the site.

Thanks!

[David L]

thank you David, that worked.

But the white menu bar sticks to the top of the page so when you scroll down its at the top of the page and not visible any more.

Is there a way so it stays white and to the top of ur browser as you scroll down the page? i.e it follows you as you go down the page not stuck to the top of the page while your futher down.

Sorry for the bad description.!

[David Morgan]

Hi David,

Can you provide a link to your site, so we can provide a more accurate solution?

You could try the following style, but this is untested in your environment:

.header-wrapper {
  position: sticky !important;
  top: 0;
}

Thanks!

[Katie Nave]

Hello,
I like the fixed position of the header. I use the transparent background when it is over a hero or cover image. That said, for pages that do not begin with a hero image, the header overlies the headline and start of the content. Is there a setting I can use so that my solid colored header does not bury my content? https://wildcoastexcursions.com/private-bear-viewing/

[Dharmesh Patel]

Regarding sticky menu bar. How Can I change the logo when it becomes white?

[David Morgan]

Hi Katie,

How are you making the header fixed? Is it custom CSS?

What page template are you using for those pages without a header?

You will likely need to modify an existing page template, or create a new page template in the Site Editor if you are using custom CSS to apply the fixed header. The new template will need a spacer block at the top to offset the overlap.

For reference, position “fixed” works differently than the position “sticky” solution provided above. Fixed always overlaps, whereas sticky only overlaps after it’s reaching the top position at the top of the page.

Hi Dharmesh,

The alternate logo is located in the Header Pattern as an Image Block. Replacing the image with an alternate color version of your logo will result in the logo color change when scrolling. See attached screenshot.

I hope this helps.

Thanks!

Attachments:

You must be logged in to view attached files.

[Dharmesh Patel]

Thanks. I mnanaged to fix it. I managed to fix it. Looked at the demo site and copied the style.

[Dharmesh Patel]

Hi,

Is there a way I could add drop-shadow to an image within the block editor?

Thanks,
Dharmesh

[Author]

Posts