Docs

[lwtpkins]

Hi,

Thanks for such a great theme! I’m trying to make the navbar transparent using background-color: rgba(255, 255, 255, 40); (40 representing 40% opacity).

Any tips on how to do this in the custom CSS?

Website example: http://www.lwtompkins.com/kands/contact/ [WP version 3.9.2 using stack: Renew]

I’d like to make navbar transparent over the map which is in a Revslider (map image).

Your help is very much appreciated!

Liz

[Cousett]

You are very close. Opacity must be done in terms of a decimal so instead of 40 use the decimal .4.

background-color: rgba(255, 255, 255, .40);

[lwtpkins]

Hi,

Thanks for the quick response and decimal info for transparency. It doesn’t seem to be making the top navbar or inner navbar wrap transparent. I’ve tried applying the above to both classes:

.x-navbar
.x-navbar-inner

any advice on getting that entire white section transparent so the Revslides underneath peek through?

Kindly,

Liz

[Rad]

Hi there,

I checked your site and those styling were overridden. Try adding !important and it should work 🙂

Example :

.x-navbar {
background-color: rgba(255, 255, 255, .40) !important;
}

Then scroll it down to see the difference.

Cheers!

[lwtpkins]

Thank you, this was exactly what I needed!

One additional question: How can I push the entire navbar positioning down?
i.e., on http://www.lwtompkins.com/kands/communications-policy/ the design calls for the entire navbar area (or perhaps this is the x-navbar-wrapper?) to lay slightly on top of each page header image. In this case, I’d like the navbar to go down about 25px and stay fixed over that page’s image: http://www.lwtompkins.com/kands/wp-content/uploads/2014/09/communications.jpg

Screenshot from specs: http://www.lwtompkins.com/files/ks_screenshot.png

Would this be adjusted in the navbar CSS or in RevSlider which holds that image?

I really appreciate the quick & expert advice!

Cheers,

Liz

[Darshana]

Hi Liz,

Can you try the following CSS code by adding it to Custom > CSS section where you can access it through Appearance -> Customize menu.

#menu-top-navigation {
    margin-top: 2%;
}

Hope that helps.

[lwtpkins]

This definitely helps put me in the right area. Thanks again for all of your very much appreciated help!
Your support is fantastic and a rarity 😀

[Nabeel A]

You’re most welcome 🙂

[lwtpkins]

Hello again,

I’m sorry to have to keep bothering you on the transparent nav bar. Everything is 98% there but I’ve noticed a cross-browser bug as a result of the changes we covered above. In both Firefox and Chrome latest versions/PC (logged into admin and not logged in), I’ve noticed the transparent .x-navbar does not display on initial page load. Screenshot at: http://lwtompkins.com/files/kands_nav1.png

Then, it does pop into position/correct display when I scroll down the page a bit, as evidenced by screencap: http://lwtompkins.com/files/kands_nav2.png

Any possible solutions I can try to fix this?

Thanks so much for your expert help!

Liz

[Rad]

Hi there,

Add this css at your customizer’s custom css.

@media ( min-width: 980px ) {
.x-navbar {
position: fixed;
z-index: 1030;
margin-top: 2.25%;
width: 100%;
}
}

Cheers!

[hitsheets]

To add on to this post…my site is http://hitsheets.com

I’ve made the Top Header bar have an custom opacity, which works in Google chrome and firefox.

However, in IExporer (10 and 11), the header has the original opacity (which is not transparent)….so it’s a cross-browser issue. Is there a code to fix that issue?

Thanks.

[Lely]

Hello There,

I’ve checked your site using IE and the opacity is working showing the content behind it. Please image below:

Can you check again?

[Author]

Posts