Pro - Header - Hide container until scroll

[xbsmarketing]

Hello,

Recently upgraded from X Theme to Pro for the robust header/footer builder and have a quick question:

I have a header that has two bars

First (top bar) - Branding logo
Second bar - Navigation menu via Ubermenu

I’d like to have the second bar be sticky, but also add the branding logos around the Ubermenu navigation.

I currently have a third bar set up that is sticky and works the way I would like, but I’d like to avoid having to load two instances of Ubermenu if at all possible.

Any help would be greatly appreciated.

Thanks!

[christian]

Hey @comdoc-marketing,

That is the official way to achieve what you’ve described.

When the bar is sticky though, a CSS class of x-bar-fixed is added to it so you can utilize that to style the elements in the sticky bar by using CSS.

With that said, you can assign a class like sticky-logo to the Image beside the UberMenu and then write something like the code below in your Header CSS. Just note that I assume that you have some CSS knowledge. If you don’t, I’d recommend you stick with the official method.

.sticky-logo {
  display: none;
}
.x-bar-fixed .sticky-logo {
  display: block;
}

Hope that helps.

[xbsmarketing]

@christian_y, I think that’s exactly what I was looking for.

Thank you very much!

[jade]

You’re most welcome, @comdoc-marketing.