[Resolved] Mobile Menu

[Andrew]

Hello, Im trying to make it so my below header is pink only on mobile, I’ve gotten it pretty closed howeever it changes the submenu to pink as well I would like it white is there a setting for this or any suggestions. Also I have a pink underline I’m trying to get rid of on the mobile portion as well. David helped me earlier get rid of it on desktop which was greatly appreciate. Below is the code I’ve used so far

@media (max-width: 768px) {
.main-navigation {
background-color: #EF0EDB!important;
}
.gp-icon svg {
fill:#ffffff;
}
.menu-toggle .gp-icon+.mobile-menu {
padding-left: 9
px
;
color: #ffffff;
}

}

[Ying]

Try add this CSS in to the same media query:

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

Not sure about the pink underline, can you specify where I should be looking at?

[Andrew]

Hi Ying, it look better! However I’m trying to only make the navigation bar pink that contains the hamburger and word menu, and have the rest white. Thanks for the help!

[Andrew]

Im thinking I may have to remove the padding of 20px on each side, you cant see the pink right now since it blends in

[Andrew]

I’ve figured it out now besides the pink underline, you can see it now. Sorry for all the messages. Do you guys have a donation link or buy a coffee link. You, David, and I can’t remember the other persons name have been extremely helpful to me this week and I truly appreciate and and would like to return the favor!

[Ying]

Do you mean this underline?
https://www.screencast.com/t/WL0cV3k06dRI

This is added by this CSS, so give it a media query should work:
https://www.screencast.com/t/EOGiXUsyNtF

And change this CSS:

@media (max-width: 768px){
    .main-navigation {
        background-color: #EF0EDB!important;
    }
}

to this:

@media (max-width: 768px) {
    .main-navigation .menu-toggle {
        background-color: #EF0EDB!important;
        width: 100%;
        margin-left: -20px;
        margin-right: -20px;
    }
}

Thank you very much for your kindness 🙂

Here’s the donate link, it goes towards the ongoing development of our products.
https://generatepress.com/ongoing-development/

[Andrew]

perfect thank you :]

[Ying]

You are welcome 🙂

[Author]

Posts