Styling Main Nav and Sticky Nav seperately

[Mitchell]

Hi Tom

Connected with my last challenge (having the page header image fill the window when the page loads), I am now trying to tailor my navigation menu so that when the page loads, the menu is on a transparent background, sitting over the image.

Then, when the page scrolls, I want to have the menu background become a solid colour (because much of my site is on white backgrounds, and the menu text gets lost without a background as the page scrolls).

I find I am VERY close, but am now admitting defeat and asking for help. ;-P

I’ve added CSS to my site in an attempt to separately style the main nav and the stick nav menus.

.main-navigation {
    background: rgba(0, 0, 0, 0); /*Makes the background transparent*/
    position: absolute;
    float: center;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%); /*The combination of the above code takes the menu out of its own section and places it over the top of the header image, but I am not 100% sure how — I am a complete novice copy-pasting code snippets from random Google searches! This code also results in a weird, undesirable menu layout, but one issue at a time*/
    padding: 10px;
}

.navigation-clone {
    background: rgba(0, 0, 0, 1); /*This DOES fill the background in with black (which is what I want), but the menu displays completely wrong*/
}

So on page load, the menu looks like this:

Note that the menu has decided to display over two lines, which is not what I want. But, as I said, one issue at a time. 😛

Then, when I scroll down, the sticky menu (with a fade transition) looks like this:

I have tried using position and float code to move it across the page, but it doesn’t seem to respond. I am aware, though, that I am basically just copy-pasting code and throwing it at the screen, hoping it will do something, all without really understanding. :-/

What’s the best way to get the outcome I’m looking for?

Cheers

[Stacey Usborne]

Hi,

I think Tom might be able to help more if you can share your URL 🙂

If you don’t want to post it here, you can email it to him at support@generatepress.com

[Mitchell]

Good point, Stacey, thanks!

The url is stateyouthgames.com/vic

Cheers

[Tom]

Hi there,

That’s close, but I’m going to try a different approach to it.

Delete what you’ve added and add this:

.home .main-navigation:not(.navigation-clone) {
    background-color: transparent;
    position: absolute;
    width: 100%;
    top: 0;
}

That should also fix your navigation displaying over two lines.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mitchell]

It’s a thing of beauty, Tom. 😀 Thanks so much for your help.

I said it last time I posted, but GeneratePress is a great theme, and the support on this forum is just at another level!

Thanks again!

[Tom]

You’re very welcome! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dani]

Hi Tom,

I try to put in this CSS but it breaks my main menu & header.

.home .main-navigation:not(.navigation-clone) {
    background-color: transparent;
    position: absolute;
    width: 100%;
    top: 0;
}

I need for my client a transparent menu but when do scroll down the background become a solid colour (like in this example http://seventhqueen.com/themes/kleo/black-friday/)

I know you’re working in this add-on but… When you can introduce this ? I need soon! One month, perharps ? This is a important trend in this 2016

Thanks Tom

Dani
https://about.me/aticbcn

[Tom]

Coming very soon 🙂

Can I see your website so I can make it work for now?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dani]

Hi Tom

Ok, great !

This add-on will be for a client website, perharps too in my website, but if you can see my site ( the CSS code right now is not inserted) this is:

http://bit.ly/Aticwebbcn
Do you need I put in the code in a Custom CSS ?
Thanks !
Dani

Dani
https://about.me/aticbcn

[Tom]

Since we’re on the home page, you can do this:

.home .site-header {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 999;
    background-color: transparent;
}

Then you might want to remove the background color from the menu items as well.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dani]

Hi Tom,

Yes… I want the menu background transparent too.
I tried through customizer but only can put a color, if you have a custom code…

Thanks!
Dani

Dani
https://about.me/aticbcn

[Tom]

Simply deleting the color value will make it transparent 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dani]

Hi Tom,

Ok this option but if you use a sticky menú, it will be transparent too… and this a problema when you do scroll becouse texts are mixed with the (transparent) menú !

If don’t use sticky menú the solution is good.

Thanks!
Dani

Dani
https://about.me/aticbcn

[Tom]

Ah, good point – okay, re-add your colors using the Customizer.

Then you can try something like this:

.home .main-navigation:not(.navigation-clone),
.home .main-navigation:not(.navigation-clone) .main-nav ul li a {
    background-color: transparent;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dani]

Ok thanks Tom !
Dani

Dani
https://about.me/aticbcn

[Author]

Posts