Navigation Scrolling

Hello X,

I was wondering for the Nav Bar, how does it appear transparent at the top of the page then as it scrolls a background appears.

Thank you in advance.


Can you provide your site url so we can take a closer look.

For the mean time, you can try adding the code below in Theme Options > CSS

Hope that helps

A link to the site


Since you are using PRO Header, please disregard my previous reply.

To make your Header overlap, you need to select Absolute for initial position then set background as transparent

Then add this in HEADER > CSS

.x-bar-fixed {
    background:#fff !important;

Hope that helps

Thank you so much sir!

You’re welcome! :slight_smile:

I know this isnt relevant to this post but I was also wondering how I am able to get the phone number on the same line as Schedule a demo


You need to select ROW as flex layout for your container, then add your navigation inline on a separate BAR

Hope that helps

I tried that earlier but it wasnt what I was looking for.

I basically need it to look like this mockup

Hey Trung,

Your mockup is achievable using the header builder.

The setup described by Paul is the correct setup. Right now, you have 1 bar with 3 containers. The first containing your logo. The second, your phone number and third, your menu.

You will need to add a new Bar and within the bar, add 2 containers. Then, move your logo to the left container and move the menu to the 2nd container. You need to apply a negative top margin to your logo next to make it overlap the 1st bar. It would be best that you watch the quick setup screencast below so you’ll have an idea.

Here’s another overlap logo tutorial:

To take full advantage of the header builder it’s best to learn Flexbox. You can watch our tutorial at

Hope that helps.

Thank you. tried that it def is going in the right direction but is now doing some funky stuff

Top of the page

After scrolling

I checked the link you’ve posted previously and I didn’t see that setup. It’s still using the old setup (see secure note).

Based only on the screenshot, it looks like you’ve set the first bar to sticky but have set the Shrink Amount to 0 so it’s height collapsed and the 2nd bar has nothing to offset.

Please ensure the Shrink Amount is set to 1 and not 0.

Then, reduce the height of your 2nd bar and apply a negative top margin to your logo as I’ve shown previously.


my apologies, I made a duplicate of the header and didnt make it global. I have now. There are a few things that still looks weird.

The second bar gets pushed down when scrolling down. is there a way to fix that?

Hi Trung,

There is an inline CSS top: 48px in your second bar which is the height the first bar when you scroll down.

To remove this CSS, please add this element CSS to your second bar:

$el.x-bar-fixed {
  top: 0 !important;
  z-index: 999 !important;

Hope it helps :slight_smile:

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