Transparent Header Options

[dmedianik]

I’m working on a project and trying to set them up with a transparent header that also has their logo on a sticker that matches the label they use in real life.

My issue is when setting up a header as absolute, it removes the space between the header and the start of the page and shifts all the content towards the top. Now some of the content can be fixed by creating a larger margin for the top of the first section; however, some of the pages like checkout, cart and other automatically generated woocommerce pages cant be adjusted to offer the space required to substitute for the content shift.

Another issue is if I create a 25px or 20% (these are example numbers) margin at the top to substitute for the absolute header, it looks good on a desktop but not so good on mobile. What can I do to create the correct space needed for all devices?

Here’s an example of when the header overlaps with a page.

Also in this example, the view cart is not being detected as a hyperlink. I’m not sure if this is being caused by the overlap or another issue?

[rad]

Hi @dmedianik,

Thanks for reaching out.

I recommend having multiple headers and assign them to your designated pages. Then assign the header with the absolute position to a page that requires overlaps. Then assign the header with relative position to pages where overlapping is an issue. Absolute position is always meant for overlapping functionality and it’s not a bug, if you’re going to push the content below header without overlaps then it’s no use toggling on the absolute position, relative is more appropriate for that setup.

And yes, the linking is affected by the overlapping header. It’s just transparent but it still a solid header, you’re simply clicking the header in front of the link

Thanks!

[dmedianik]

Hey Rad, I want the header to be transparent when it goes sticky but solid colour when its at the top, how can I accomplish this on a relative header?

[jade]

Hey @dmaillard,

Please set the background color to the bar first in the bar settings:

Then add this code to the Bar’s Element CSS:

$el.x-bar.x-bar-fixed {
  background-color: transparent;
}

Element CSS | Themeco Docs

Hope this helps.

[dmedianik]

Thank you, that was exactly what I needed. Really useful code, there should be a repository with these useful snippits.

[rad]

You’re most welcome!