Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Styling Main Nav and Sticky Nav seperately

Home Forums Support Styling Main Nav and Sticky Nav seperately

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #157173
    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

    #157174
    Stacey Usborne
    Staff

    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

    #157182
    Mitchell

    Good point, Stacey, thanks!

    The url is stateyouthgames.com/vic

    Cheers

    #157194
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #157482
    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!

    #157485
    Tom
    Lead Developer
    Lead Developer

    You’re very welcome! πŸ™‚

    #175654
    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

    #175709
    Tom
    Lead Developer
    Lead Developer

    Coming very soon πŸ™‚

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

    #175739
    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

    #175829
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #175850
    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

    #175921
    Tom
    Lead Developer
    Lead Developer

    Simply deleting the color value will make it transparent πŸ™‚

    #176239
    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

    #176369
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #176390
    Dani

    Ok thanks Tom !
    Dani

    Dani
    https://about.me/aticbcn

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.