[Resolved] Extend horizontal submenu background

[Shakespeare]

Hi this is my first post and first purchase of generatepress.

Moving forward I tried Tom’s horizontal menu but I would to ask how to extend the background color.

See screenshot: https://prnt.sc/guroaz

Thanks!

[Leo]

Hi there,

Which part? The grey or black? Can you link me to the site?

[Shakespeare]

The black part. I want to extend it full width. https://fusion.shakescal.com

[Tom]

You could try this CSS:

.inside-navigation {
    position: static;
}

[Shakespeare]

Hi Tom,

Now it fixed the issue. But one more thing, please check the link, how can I align the submenu list with the primary menu and make it contained.

See the link =) thanks!

[Tom]

Hmm, it’s not possible to contain it like that unfortunately.

You can however center it:

.main-navigation ul ul.sub-menu {
    text-align: center;
}

ul.sub-menu li {
    float: none;
    display: inline-block;
}

[Shakespeare]

Thanks Tom!

Now it’s ok. One more thing, how do I change the hover background and just stick it to orange. See screenshot: https://goo.gl/3woqoC

Lastly, how do I revert it to normal mobile menu.

Thanks!

[Leo]

Have you tried Customizer > Colors > Primary Navigation > Background Hover?

Not sure what you mean by reverting it to normal mobile menu?

[Shakespeare]

Hi Leo,

The colors worked. I missed it my apologies.

I’m referring to the mobile view, the primary sub-navigation doesn’t work well. See: https://image.prntscr.com/image/uxoFjVUhQB_nL2a18TJplg.png

Please advise.

Thanks

[Tom]

Try adding all of your custom CSS you added for the sub-menu in a media query like this:

@media (min-width:769px) {
    /* custom menu CSS in here */
}

[Shakespeare]

Nailed it Tom, cheers!

[Tom]

Glad I could help! 🙂

[Author]

Posts