Docs

[Olianna P]

Hi, I’m referring to my site http://www.fincaniza.com. Is there a way to place the navbar menu on top of my video slider similar to the site below?

Home

Thanks!

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.site .x-slider-container.below {margin-top: -230px;}
.x-logobar, .x-navbar {background-color: transparent !important;border-width: 0;}

Hope it helps, Cheers!

[Olianna P]

Thank you, that worked!

Now, is there a way to have the navbar background switch to dark brown for all other pages instead of transparent?

And, is there a way to add a dark brown shading on the home page to make the headings more visible?

Thanks so much!

[Nabeel A]

Hi again,

You can use the following code to change the color of your Navbar:

#header-container:not(.home), #header-container-scroll:not(.home) {
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #79480b 100%);
}

Let us know how this goes!

[Olianna P]

The code didn’t work

[Jade]

Hi Olianna,

Please try this code:

.x-navbar-inner:not(.home) {
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #79480b 100%);
}

Hope this helps.

[Olianna P]

The code worked but I want it completely transparent on homepage and then on other pages one solid color, instead of gradient, color #4d2d20

Thanks so much!

[Christopher]

Hi there,

Please update your code to :

.x-navbar-inner:not(.home) {
    background-color: #4d2d20;
}

.home .x-navbar{
box-shadow:none;
border:none;
}

Hope it helps.

[Olianna P]

This reply has been marked as private.

[Jade]

Hi there,

Please add this code:

.home .x-logobar, .home .x-navbar {
    box-shadow: none;
}

.page .x-navbar-inner {
    background-color: #7F4F34;
}

Hope this helps.

[Olianna P]

The same thing keeps happening- the brown nav is appearing on hamepage. you can try yourself- you have the credentials.

perhaps it’s because I have a code somewhere for this in previous CSS?

[Christopher]

Hi there,

Please fond this code :

.x-logobar, .x-navbar {
   background-color: transparent !important; 
    border-width: 0;
}

And update it to :

.x-logobar {
   background-color: transparent !important; 
    border-width: 0;
}

Then add following code :

.x-navbar-inner:not(.home) {
    background-color: #4d2d20;
}

.home .x-navbar{
box-shadow:none;
border:none;
 background-color: transparent;
}

Hope it helps.

[Author]

Posts