help with mobile off canvas menu

Hi Tony,

Looks like you just want the default mobile menu without the off-canvas option?

Let me know :)

hi Leo,

Yes exactly that. No off canvas Just the default and designed same as that website. That’s it.

Thanks for your help.

Can you link me to your site in question?

hi Leo,

please see temp login in private field. thank you:)

So are you wanting to change the background color and align the text to the left?

We won't be able to replicate everything you've shown in the example unfortunately.

Leave text as it is in the centre just the background to change to #1f1f1f

Can that be done?

Hi Tony,

Give this CSS a try:

@media (max-width: 768px) {
nav#site-navigation {
    position: absolute;
    top: -30px;
    background-color: #1f1f1f !important;
    width: 100%;
    left: 0;
}
nav#mobile-menu-control-wrapper {
    z-index: 200;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    background-color: #1f1f1f;
}
.main-navigation .main-nav ul li a, .main-navigation .menu-bar-items, .main-navigation .main-nav ul ul li a , .mobile-menu-open .mobile-menu-control-wrapper .menu-toggle, .mobile-menu-open .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-open .mobile-menu-control-wrapper .menu-toggle:focus {
    background-color: #1f1f1f;
    color: #b7b7b7;
}
}

hi Ying,

that works fine, however, i would like the menu items to be aligned to the left like Leo mentioned further above and also...

- when hovering the menu items for the to glow white, as i have on the footer and when active to remain in white rather than have the background in white when active and hovering, if that makes sense...apologies for any confusion.

Hope I understand it right :P
Try this one instead:

@media (max-width: 768px) {
nav#site-navigation {
    position: absolute;
    top: -30px;
    background-color: #1f1f1f !important;
    width: 100%;
    left: 0;
}
nav#mobile-menu-control-wrapper {
    z-index: 200;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a, .main-navigation .main-nav ul ul li[class*="current-menu-"] > a, .main-navigation .main-nav ul li[class*="current-menu-"]:hover > a, .main-navigation .main-nav > ul > li >ul >li:hover > a, .main-navigation .main-nav > ul >li:hover > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a:hover, .main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a {
    background-color: #1f1f1f;
	  color: #ffffff;
}
.main-navigation .main-nav ul li a, .main-navigation .menu-bar-items, .main-navigation .main-nav ul ul li a , .mobile-menu-open .mobile-menu-control-wrapper .menu-toggle, .mobile-menu-open .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-open .mobile-menu-control-wrapper .menu-toggle:focus {
    background-color: #1f1f1f;
    color: #b7b7b7;
    text-align: left;
}
}

Hi Ying,

that's perfect, except, they're not aligned to the left, not sure why...

Hi Ying,

just noticed, the sub menu of menu Blog - the active background is still white, please use temp link to have a look. thanks again.

Ah sorry I forgot to align them to left, edited CSS here:
https://generatepress.com/forums/topic/help-with-mobile-off-canvas-menu/#post-1889875

Thanks Ying, and what about the white background on the blog sub menu active and active?

I would like it to be like the rest of the menu. Sorry i am being a pain. 😊

The CSS should work for the sub-menu background, looks it's working :)
https://www.screencast.com/t/CWgw6Lt3P

Let me know if I miss anything!