Header 2 bars with one should be aboslute

hi there,

i try to make a 2 bar header where one should be absolute, so the image is shown also on bar 1 when set some transparent.
you show that in that video around 11:30 min

when i try this something weird happened:

bar 2 wich is absolut get very small and is still under bar1. a screenchot is attached.

thanks for your help.

Hi Harald,

Thanks for reaching out.

It’s kind of weird, it’s the same on my one installation, but not on my local installation (both updated). Tried clearing the caches and no effect, I’ll continue checking but for the meantime, please add this CSS

$el {
  width: 100% !important;
}

To your header bar’s CSS.

Thanks!

hi rad,

yes the bar is then 100 % width but there are still 2 Problems:
1.Bar2 is still UNDER Bar1 => Bar2 should be BEHIND Bar1 (bar1 is transparent so the red bar2 should shine trough)
(Screenshot)
2.Now the Content is cut off (Screenshot)

thanks for your help
harald

Hello Harald,

Thanks for updating in!

1.) Please edit your header and make sure that the z-index of bar 2 should be greater than the z-index of bar 1.

2.) You may not have set the height of the bar. You might need to set the bar position to “relative” and then enable the “Sticky Bar” option instead.

Hope this helps. Please let us know how it goes.

hi,

thanks i did a mistake with bar 1 and bar 2. now it worked! but still there is a bug with the bar width!.
thanks again for your help! :slight_smile:

Hi Harald,

Which width? The CSS isn’t working anymore? That’s weird, please provide your site’s URL and admin login credentials in the secure note. Then I’ll check the width issue.

Thanks!

hi rad,

the workaround in the css code does work. sorry for the misunderstanding!

cheers

Glad to hear it’s working now.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.