[Resolved] Wrong Navigation Button Color

Home Forums Support [Resolved] Wrong Navigation Button Color

Home Forums Support Wrong Navigation Button Color

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #881628
    Wolf

    I have “two” navigations, one before I scroll down that blends in with the Header. And the one after some scrolling. I used your custom css code to get the button in the navbar and changed the color of the text. This works for the “scrolling navigation” but not the header nav. I also tried adding padding but that just makes the button bigger and does not seperate it from the right side. Could you take a look and supply me with some extra css code?

    GeneratePress 2.2.2
    GP Premium 1.8.1
    #881706
    Leo
    Staff
    Customer Support

    Hi there,

    I’m not sure if I understand.

    What color should the buttons be when it’s in static mode?

    You also have some problems with the CSS code added:
    https://www.screencast.com/t/FlHs3p9p

    Let me know πŸ™‚

    #881713
    Wolf

    I want the text on the button to always be white, the background is correct. There is an error with padding because I intentionally set it to 0 (because increasing it doesn’t give the desired result)

    #881765
    Tom
    Lead Developer
    Lead Developer

    In your CSS, try replacing this:

    .main-navigation .main-nav ul li.nav-button a

    With this:

    #site-navigation .main-nav ul li.nav-button a

    Let me know πŸ™‚

    #881901
    Wolf

    That, unfortunately, doesn’t work either, the button disappears when scrolling down.

    #882309
    Leo
    Staff
    Customer Support

    I’m still seeing the old CSS added.

    can you double check?

    Looks like you have caching plugin enabled.

    #882311
    Wolf

    I removed the new code provided because it was not working

    #882314
    Wolf

    I readded the new ccs code for you to see that it’s not working properly

    #882332
    Leo
    Staff
    Customer Support

    Try adding this as well:

    .header-wrap #site-navigation:not(.toggled) .main-nav>ul>li.nav-button>a {
        color: #ffffff;
    }
    #882337
    Wolf

    That basically inverts my problem, now the button has white text in the nav menu before scrolling down and is still completely missing after scrolling down

    #882344
    Leo
    Staff
    Customer Support

    Change the original selector back to:
    .main-navigation .main-nav ul li.nav-button a

    #882355
    Wolf

    πŸ™ finally working; I also just tested out and remembered that margin was “adding space from the outside” so I changed the code from

        .main-navigation .main-nav ul li.nav-button a {
            background-color: #c06040;
            border: 0px solid #000000;
            padding-right: 10px;
            color: #ffffff;
            line-height: 35px; /*this number will likely need to be adjusted*/
        }
    }

    to

        .main-navigation .main-nav ul li.nav-button a {
            background-color: #c06040;
            border: 0px solid #000000;
            margin-right: 10px;
            color: #ffffff;
            line-height: 35px; /*this number will likely need to be adjusted*/
        }
    }
    #882359
    Leo
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.