[Resolved] Transparent mobile header

[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,

[Leo]

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

[Michael]

Perfect, thanks!

[Leo]

No problem!

[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?

[Leo]

Try this inside media query:

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

[Author]

Posts