Archived topic

Styling Main Nav and Sticky Nav seperately

14 replies · Started by Mitchell on December 1, 2015

Viewing posts 1–15 of 15

December 1, 2015 at 8:27 pm #157173

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. :-P

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

December 1, 2015 at 8:31 pm #157174

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

December 1, 2015 at 9:12 pm #157182

Good point, Stacey, thanks!

The url is stateyouthgames.com/vic

Cheers

December 1, 2015 at 10:32 pm #157194

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

December 2, 2015 at 2:18 pm #157482

It's a thing of beauty, Tom. :D 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!

December 2, 2015 at 2:37 pm #157485

You're very welcome! :)

February 27, 2016 at 1:19 am #175654

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

February 27, 2016 at 9:56 am #175709

Coming very soon :)

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

February 27, 2016 at 11:31 am #175739

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

February 27, 2016 at 11:14 pm #175829

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

February 28, 2016 at 1:23 am #175850

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

February 28, 2016 at 10:56 am #175921

Simply deleting the color value will make it transparent :)

March 1, 2016 at 1:05 am #176239

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

March 1, 2016 at 11:29 am #176369

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

March 1, 2016 at 11:48 am #176390

Ok thanks Tom !
Dani

This archived topic is closed to new replies.

Start building better websites today.