Setting nav bar transparency – Themeco Community

Setting nav bar transparency

lwtpkins — Wed, 03 Sep 2014 00:30:45 +0000

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

Reply To: Setting nav bar transparency

Cousett — Wed, 03 Sep 2014 00:44:22 +0000

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);

Reply To: Setting nav bar transparency

lwtpkins — Thu, 04 Sep 2014 21:17:33 +0000

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

Reply To: Setting nav bar transparency

Rad — Thu, 04 Sep 2014 21:28:04 +0000

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!

Reply To: Setting nav bar transparency

lwtpkins — Thu, 04 Sep 2014 21:51:43 +0000

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

Reply To: Setting nav bar transparency

Darshana — Thu, 04 Sep 2014 22:01:41 +0000

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.

Reply To: Setting nav bar transparency

lwtpkins — Thu, 04 Sep 2014 22:31:27 +0000

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 😀

Reply To: Setting nav bar transparency

Nabeel A — Thu, 04 Sep 2014 22:36:50 +0000

You’re most welcome 🙂

Reply To: Setting nav bar transparency

lwtpkins — Sat, 06 Sep 2014 20:22:22 +0000

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

Reply To: Setting nav bar transparency

Rad — Sat, 06 Sep 2014 23:48:20 +0000

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!