Docs

[MikeMobley2002]

Hey Guys,

I’ve build another site with the same white background and the Nav Bar “stood out” compared to the one I’m working no now. How do I get the main Nav bar to “stand out” and look similar to attached pictures?

1. Collaborative Communications pic is the nav bar I want

2. Insurance for texans is the one that needs to be adjusted.

Thank you.

[Prasant Rai]

Hello There,

Thanks for writing in!

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

.x-navbar {
-webkit-box-shadow: 0px 7px 25px 0px rgba(50, 50, 50, 0.34);
-moz-box-shadow:    0px 7px 25px 0px rgba(50, 50, 50, 0.34);
box-shadow:         0px 7px 25px 0px rgba(50, 50, 50, 0.34);
}

Let us know how it goes.

Thanks.

[MikeMobley2002]

Got it, thank you!

Quick followup…if the top area is white, how do I change the color of the mobile Navbar button?

[MikeMobley2002]

Can that same shadow box principle be applied to the mobile Nav button? I attached a picture where you can’t see the button….probably need to change the colors of the nav bar mobile button lines too.

[Thai]

Hi Mike,

Upon checking your website, I could see that the color of the mobile navbar button was changed.

Did you sort it out?

Regards!

[MikeMobley2002]

I got the color but how can I add the shadow or styling where it looks obviously like a button and not just 3 lines?

[Rue Nel]

Hello There,

Thanks for the updates! To add some shadow and other styling to make it look like a button, you can make use of this code:

body .x-btn-navbar.collapsed {
    padding: 7px;
    border: solid 1px #e5e5e5;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

Hope this helps. Please let us know how it goes.

[MikeMobley2002]

Thank you!

[Thai]

If you need anything else please let us know.

[Author]

Posts