[Resolved] Sticky TOP Bar with sticky header

[Rostyslav]

Hello,

I am trying to make a sticky top bar and I also have a sticky header. When I scroll down happens this: https://ibb.co/6NFv5Th
https://ibb.co/GWxcgwm

I am using an element>block>hook>generate_before_header (css class:barra-superior)

In additional CSS this code:

.barra-superior  {
   	position: -webkit-sticky;
    position: sticky;
    top: 0px;
	  z-index: 9999;
}

[David]

Hi there,

try adding this CSS to move the sticky nav down the height of your barra-superior element:

#sticky-navigation,
#mobile-header.is_stuck {
  top: 33px !important;
}
/* adjust position when admin bar is shown */
.admin-bar #sticky-navigation,
.admin-bar #mobile-header.is_stuck {
  top: 66px !important;
}

If you alter the height of the bar – then you will need to adjust the top: 33px to suit. Likewise the second part of the code considers the admin bar height for when your logged in.

[Rostyslav]

Works! Thanks so much!

[David]

Glad to hear that!

[Author]

Posts