Main nav bar transparent and color change

[fmora617]

Hi – I am looking to change the color of the main nav bar when I scroll down. Also, looking to make it transparent so I can see the background when I scroll. See here http://i.imgur.com/xQhex6t.png

As always, your help is appreciated!

Fabian

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-\

.is-sticky nav#main-navigation .menu li.menu-item > a{
color:#ff0000 !important;
}
@media only screen and (max-width: 767px) {
.brave h1 span{
font-size:20px !important;
}
}

Thanks
Mohammad

[fmora617]

The second CSS (media) worked great…thank you!

The first one however is not correct I think. This is what you mentioned to add:

.is-sticky nav#main-navigation .menu li.menu-item > a{
color:#ff0000 !important;
}

I am looking to have the background of the maain nav bar change color and have transparency – not the text of the main nav. Any ideas?

Thanks!

[Kyle – SUPPORT]

Try adding this to your custom css:

#header-section::before, #header .is-sticky .sticky-header, #header-section .is-sticky #main-nav.sticky-header, #header-section.header-6 .is-sticky #header.sticky-header, .ajax-search-wrap {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0!important;
}

– Kyle

[fmora617]

Great, thank you! Going to keep this ticket open as I play around with it a little more (in case I have additional questions).

[Rui Guerreiro – SUPPORT]

No problem. Thanks Kyle

-Rui

[Kyle – SUPPORT]

Ok no problem

If you have additional questions please open a new topic

– Kyle