help with mobile off canvas menu

It is Ying, but if you hover over to the active sub menu item you will see the background highlighted in white.

Hi there,

try adding this CSS:

@media(max-width: 768px) {
    .main-navigation .main-nav ul ul li[class*="current-menu-"] > a:hover {
        background-color: #1f1f1f !important;
    }
}

hi David, that worked, thank you...isn't there a way of just adding that into the css Ying wrote, instead of adding another @media...

also, is it possible to have an off canvas menu like the generatepress website on mobile? if so, perhaps someone already asked and you can link me to the css directly.

The GP site uses the built in Off Canvas Panel:

https://docs.generatepress.com/article/off-canvas-panel-overview/

Problem you have is you can't have the default mobile menu ( with the Customizations Ying provided ) and the Off Canvas panel for a smaller mobile device. Its one or the other.

The only way around that is to scrap everything Ying provided. Enable the Off Canvas panel, and ask really nicely :) and we can look at some CSS for the Off Canvas Panel to do something similar to what Ying did.

Lol… i always ask nicely David.

I understand you can’t have both, but would like the same as GeneratePress has. Looks simple and clean.

:) So at what size does it go from the Ying styled Menu you currently have to the Off Canvas panel ?

Would be same size as GP has, with my colours and hover effects.

Hi Tony,

So all my code went to the trash bin? :P

If you want to use the off-canvas menu instead, there're color options specifically for it.

You can play around with the customizer option first, then we can see if there's any CSS need.

Hi Ying,

No way, I have the code framed and up on my wall in case I need it later haha.

I’ve made some changed already to the off canvas menu. Have a look.

No way, I have the code framed and up on my wall in case I need it later haha.

That's good! lol~

Had a look, the colors are good with customizer.

You can also change the typography of off-canvas panel using customizer options.

Let me know if there's anything you can't achieve with customizer :)

not to worry Ying, i've chosen to stick with your code...i prefer it for now...thanks to you and your team for your help. always appreciated.

Haha okay!

Time to take the code from your wall to your site ;)

Initialising sequence now…

Thanks Again.

When i open the menu on mobile, the home menu item doesn't show fully, it's strange...have a look on mobile view via the web browser.

In my CSS, find this one:

nav#site-navigation {
    position: absolute;
    top: -30px;
    background-color: #1f1f1f !important;
    width: 100%;
    left: 0;
}

And change top: -30px; to top:0;.

It was used to compensate your previous layout setting, but it seems not needed anymore :)