Archived topic

Problem with mobile view for 2 menus

5 replies · Started by Yolanda on December 18, 2022

Viewing posts 1–6 of 6

December 18, 2022 at 7:35 am #2465963

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

December 18, 2022 at 12:31 pm #2466249

Hi there,

Try this CSS:

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

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

December 19, 2022 at 3:05 am #2466695

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

December 19, 2022 at 4:56 am #2466808

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 ?

December 19, 2022 at 11:42 am #2467363

Hi David,

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

Thanks again!
Yolanda

December 20, 2022 at 1:47 am #2467886

Glad to hear that

This archived topic is closed to new replies.

Start building better websites today.