Docs

[philip_pape]

I’m using the Ethos stack and have setup a Slider Revolution slider ABOVE the masthead, so the navbar is BELOW the slider. Then, when you scroll, the navbar moves up and sticks.

However, I would like to achieve two additional things:
1. Make the navbar semi-transparent
2. Show the navbar superimposed (overlayed) over the bottom of the slider, NOT below it. In other words, if the navbar is 90px high, it should cover the bottom 90px of the slider so you see the bottom of the slider image through the semi-transparent navbar

Any help here would be appreciated, thanks!

[Prasant Rai]

Hello Philip,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[philip_pape]

This reply has been marked as private.

[philip_pape]

And one more question related to the navbar. I’m showing an image instead of text for one menu item, but the image is top-aligned with the text navbar items. Instead, I would like them middle-aligned (vertically centered). How can I do that? Thanks!

[Christopher]

Hi there,

I would like to check your site but it’s under construction mode, please provide us with login credentials.

Thanks.

[philip_pape]

This reply has been marked as private.

[philip_pape]

Also, note that I have temporarily added “<br />” before each menu item text to make it appear vertically centered.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-navbar:not(.x-navbar-fixed-top) {
    margin-top: -90px;
}
.x-navbar.x-navbar-fixed-top {
    background-color: rgba(0, 0, 0, 0.5);
}

Hope it helps 🙂

[philip_pape]

Thank you!

I made a small tweak so the transparency always shows. This worked perfectly 🙂

.x-navbar:not(.x-navbar-fixed-top) {
margin-top: -90px;
}
.x-navbar {
background-color: rgba(0, 0, 0, 0.5);
}

[philip_pape]

Any thoughts on the middle align for navbar items?

[philip_pape]

Also, there’s a brief flicker when scrolling and the navbar sticks. Is there any way to remove that?

[Rue Nel]

Hello There,

To vertically align the menu items, you do not have to add a br tag. Simply go to your customizer and find this setting, Appearance > Customize > Header > Links – Alignment and set the “Navbar Top Link Alignment (px)” option.

Hope this helps.

[philip_pape]

The problem with that is, when I’m using an image for a label, this pushes the image down also. In other words, the image is top-aligned with the other menu items which are text. So if the image is twice as high, it hangs down.

Instead, I want the image and text to be middle aligned with each other.

[Christopher]

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[philip_pape]

Here’s a screenshot of what the navbar looks like. Notice that the image “Kennedy Golf Management” appears top-aligned with the other 3 text navbar items.

I’d like them to all appear middle-aligned with each other.

Notice that this image is NOT the “logo” but rather an tag in the menu item’s label.

[Author]

Posts