[Resolved] Problem with mobile view for 2 menus

[Yolanda]

Hello great support,

I’m struggling with the layout for mobile view.
On these devides I only want to show the blue header/logo with the (blue) menu.
But now the blue menu is overlapping the brown, and it looks very ugly, and other menu’s are showing which is not necessary.

How can I only show the blue one?

See the original view for a laptop/pc in a browser on https://www.yory.nl/

Thank you!
Yolanda, NL

[Leo]

Hi there,

Try this CSS:

@media (max-width: 768px) {
    .secondary-navigation {
        display: none;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Yolanda]

Hi Leo,

Thank you, that worked! But the box with translate icons still shows behind the text.
I’ve tried to catch the CSS, but without success.
What do I need to add to the code to hide the Translate box as well?

Thank you!
Yolanda

[David]

The problem is that the Core Columns Block has no responsive settings, so on Mobile all Columns stack with 100% width. Which for this design is no good.

Do you use GenerateBlocks ? As its Grid Block has full responsive controls ?

[Yolanda]

Hi David,

I kind of solved it to move the translate block to another place.

Thanks again!
Yolanda

[David]

Glad to hear that

[Author]

Posts