Pro Two-Line Header Navigation

[weatherstone]

Hello,

I am changing the style of the header on https://denverhighrises.com/ to have a second line, as you can see on https://denverhighrises.com/playground/.

The header starts off looking great, but as soon as you start to scroll the second bar disappears, and then later reappears. How can I have it stay?

Thank you,
J

[paul.r]

Hi,

The issue was it is getting hidden at the back of your third bar.

I went ahead and fix it by changing the z-index of your bars.

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order

Kindly check in your end.

Thanks

[weatherstone]

Good afternoon,

Thank you for your previous assistance. After much more editing, I moved the two-line navigation over to https://denverhighrises.com/. I am now noticing two major issues with the new setup:

1. On larger screens such as a laptop or iPad, there is a noticeable glitch in the menu as the first bar scrolls (scroll slowly) over the second bar (i…e on iPad: https://prnt.sc/ixpb3h), before the second bar reappears below. It also causes the logo (which is far from complete, but that is irrelevant) to overhang transparently over the bar below.
2. An entirely separate bar for mobile navigation has been added after the first two bars, which are set to be invisible on the smallest two screen size options. The result is negative space (see on iPhone here: https://prnt.sc/ixpbcq) when the mobile menu should be glued to the top.

Can you assist with these two issues?

Thank you,
J

[ruenel]

Hello There,

Thanks for updating in!

1.) This is the default behaviour because the bar needs to touch the top of the page before it triggers the fixed top position behaviour. There is also an on going issue related to this. Our developers is already looking into this to be able to have a smooth transition of the bars as you scroll the page.

2.) To resolve your issue, please insert this custom css in the custom css section of the header builder:

@media(max-width: 980px){
  .x-bar.x-bar-fixed {
    top: 0 !important;
  }    
}

Hope this helps.