Make Transparent Navbar Static instead of Fixed?

Support
#1

Hello!
I have put together www.markhoeppner.com

Currently I have altered the CSS to make the nav bar transparent, and to have it overlap the slider.
I want to maintain this look, however my client wants the nav bar to stay static. When I try to change things from fixed to static, I get a bit white bar at the top above the slider. I want the menu and nav bar to stay transparent, overlapping the slider, but I DONT want it to move with me when I scroll.

Is this possible?

#2

Hi there,

Please update this code:

.x-navbar {
    border: none;
    box-shadow: none;
    transition: background 0.7s ease-out;
    background: transparent!important;
    position: fixed;
    z-index: 1030;
    top: 0;
    left: 0;
    right: 0;
}

to

.x-navbar {
    border: none;
    box-shadow: none;
    transition: background 0.7s ease-out;
    background: transparent!important;
    position: absolute;
    z-index: 1030;
    top: 0;
    left: 0;
    right: 0;
}

You may read more about the CSS position here:

https://www.w3schools.com/css/css_positioning.asp

Hope this helps.

#3

That worked! Thank you!

Is there also a way to change the colour of the menu text in the navbar to be different for each page?

#4

Hello @GrooveNTonic,

Thanks for updating the thread.

Yes, you can use page id feature to change menu color for specific pages. Here’s a sample CSS that you can use under X > Theme Options > CSS:

.page-id-3034 .x-navbar .desktop .x-nav > li > a > span {
    color: #fff;
}

You need to replace page id. To find out page Id, please take a look at following article:

You can also use Chrome dev tools to find the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#5

You rock! That worked! Last question…how can I also change the hover color for each page?

Thanks!

#6

Hi,

To change the hover color, you can add this css code

.page-id-3034 .x-navbar .desktop .x-nav > li > a:hover > span {
    color: red;
}

Change red with the color that you like.

Hope that hepls.

#7

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