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

[Resolved] Transparent mobile header

Home Forums Support Transparent mobile header

  • This topic has 5 replies, 2 voices, and was last updated 3 years ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #422155
    Michael

    Hi,

    I have enabled mobile header and have made it transparent, and changed mobile menu background with the following code.

    @media (max-width: 768px) {
        .mobile-header-navigation {
            background-color: transparent;
        }
        .main-navigation .main-nav ul li a {
            background-color: #ffffff;
        }
        button.menu-toggle {
            color: #ffffff;
        }
    }

    My questions are:
    The hamburger icon is white before it’s clicked which is what I want, how do I make the “x” white to close menu, and visited hamburger icon white as well?
    And, how would i make the hamburger icon just a little bigger?
    And, if I wanted to reverse the pop down menu colours to be white text, black background how would the code change?

    thanks,

    GeneratePress 1.4
    GP Premium 1.5.2
    #422639
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS for toggle:

    button.menu-toggle:focus, button.menu-toggle:hover {
        color: #ffffff;
    }

    This for size:

    button.menu-toggle {
        font-size: 20px;
    }

    To reverse the color, you would have to modify the existing CSS you have here:

    .main-navigation .main-nav ul li a {
            background-color: #ffffff;
    }

    to

    .main-navigation .main-nav ul li a {
        color: #ffffff;
        background-color: #000000;
    }
    #422658
    Michael

    Perfect, thanks!

    #422739
    Leo
    Staff
    Customer Support
    #422773
    Michael

    Sorry, one more thing.

    Clicking the hamburger then “Test” the two drop down menu items from there are in white text instead of the same colour as the main menu items.

    How do I make those the #222222 colour like the main nav menu text?

    #423229
    Leo
    Staff
    Customer Support

    Try this inside media query:

    .main-navigation .main-nav ul ul li a {
        color: #222222;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.