Docs

[tipul01]

Hello,

I have the following custom css added, to get rid of the navbar border a bit plus make it transparent.

body .x-navbar {
background-color: rgba(0, 0, 0, 0.3);
}

.ubermenu.ubermenu-horizontal{
background:rgba(0,0,0,0);
}

.ubermenu-target-title:hover {
text-decoration: underline !important;
}

.ubermenu-current-menu-item .ubermenu-target-title {
text-decoration: underline;
}

.x-navbar {
border-top: 0px solid #fff;
border-bottom: 1px rgba(#fffff,#fffff,#fffff,0.1);
box-shadow: 0px 0px 0px #846c2b, 0px -0px 0px #846c2b !important;
}

I am trying to get the navbar to change from transparent to solid color black. I tried the solutions posted on the forum for others, but ithink its because maybe of the rgba command instead of background-color?

http://test.digitalcube.ro/Word

Thank you.

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.x-navbar.x-navbar-fixed-top {
    background-color: #000 !important;
}

Thanks.

[tipul01]

Thank you for the response!

I missed to say that i would like it to be transparent at first and when i scroll down, the navbar to become solid.

I cheked and tried the javascript commands posted on the forum but i think it wont take my classes.

Any thoughts?

Sebastian

[Thai]

Hi Sebastian,

Please add the following CSS:

.home .masthead {
    position: absolute;
    width: 100%;
}

.home .x-navbar.x-navbar-fixed-top {
    background-color: transparent !important;
    border: none;
}

.home .x-navbar.x-navbar-fixed-top.x-navbar-solid {
    background-color: rgba(0,0,0,0.3) !important;
}

Hope it helps 🙂

[tipul01]

Hello,

Superb, thank you!

I know im being a drag, but is there any way to make the transition smooth, or animataed? Even if the navbar dissapears upwards and it comes back down again solid color?

Thank you so much!

[Christopher]

Hi there,

We can’t add animation to this, as you see the background is being changed from top to bottom.

Thanks.

[Author]

Posts