[GiobarthParticipant]

Hi,
I’m using the X Theme and Revolution slider and I want to make the menu bar transparent with the slider behind it, so that the top of the slider is the background of the menu bar. My goal is to have a menu bar exactly like this one: http://www.elreyjesus.org.
Here is my url: http://www.igrejalifepointflorida.com
I really appreciate your help,
Thanks,
Gio

[ThaiModerator]

Hi Gio,

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

.home .x-navbar {
    background-color: rgba(0,0,0,0.25) !important;
    position: absolute;
    width: 100%;
}
.home .x-navbar .x-nav-wrap .x-nav > li > a {
    color: #fff;
}

Hope it helps 🙂

[GiobarthParticipant]

Hi Thai, you are an awesome professional! Works beautifully! Thank you very much!

[RahulModerator]

Glad we were able to help you out and thank you so much for your kind words!

Let us know if we can help with anything else.

Thank you.

[GiobarthParticipant]

Hi Thai,
I need to keep the menu bar configuration exactly as it is in the HOME page to the other pages. I’m trying to force the menu bar to have white font color in the other pages but I’m failing. Can you please help me with this issue? Many thanks, Gio

[RupokMember]

Hi there,

In that case update the code a bit :

.x-navbar {
    background-color: rgba(0,0,0,0.25) !important;
    position: absolute;
    width: 100%;
}
.x-navbar .x-nav-wrap .x-nav > li > a {
    color: #fff;
}

Cheers!

[GiobarthParticipant]

Many thanks, you are an awesome team! Works perfectly!

[Prasant RaiModerator]

Thanks for the good words. It means a lot to us. Feel free to ask us again. Have a great day! 🙂

[GiobarthParticipant]

Hi, team!
I need to finish this matter about the transparent menu. I need to have all the words on nav bar with the color white included the underline we see when we pass the mouse over. Also there’s a transparent white color box that highlights the buttons when we pass the mouse over, exactly we can see here: http://www.elreyjesus.org. I’m trying hard but the results are not the same we see in this website. I need the same navigation bar fixed in all pages on top exactly we can see here: http://www.elreyjesus.org. Thanks for your amazing support, Gio.

[ThaiModerator]

Hi There,

Please add the following CSS:

.x-navbar .desktop .x-nav>li:hover {
    background-color: rgba(255,255,255,0.1);
}
.x-navbar .desktop .x-nav>li:hover>a,
.x-navbar .desktop .x-nav>li:hover>a>span {
    box-shadow: none;
    color: #fff;
}

Hope it helps 🙂

[GiobarthParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

To add a line under the navbar, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

Hope this helps. Kindly let us know.

[GiobarthParticipant]

It solved the problem! Many thanks and have a blessed weekend! 🙂

[ThaiModerator]

You’re most welcome 🙂

[GiobarthParticipant]

Hi,
I have 7 pages on my menu. (http://igrejalifepointflorida.com/). I added slider revolution in the back of the nav menu with your help and the results are exactly what I was expecting!:) But now I have the pages “MENSAGENS”, “EVENTOS”and “BLOG”. They are archive pages and I can’t find a way to do the same…:( (My question is, is that possible to have a slider revolution on these archive pages? My goal is to have the headers and menus exactly the same on all pages… If not, can I have an image added on archive pages exactly with the same size of the sliders I have? The header with the menu and the pictures on the background has to be the same on all pages, like this http://www.elreyjesus.org.
Many thanks, Gio.

[Author]

Posts