[Resolved] Pageheader is to close to menu on mobile

[Jos]

Hello,

1 on this website i used a startersite as a start. But when i view it on mobile the menu is to close to the header title. How can i get more space between the title and the menu.

2 I made the header title 40 px instead of the original 60 px. Can i use % to get a better look on mobile?

Thanks in advance!
Jos

[Leo]

Hi there,

1. Try this:

@media (max-width: 768px) {
    .menu-toggle {
        margin-top: 15px;
    }
}

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

2. Not sure what you mean by header title? I’m seeing a logo instead of title text.
If you are talking about “Welkom op de site van Casa la Suerte” then that’s set with Elementor.

Let me know if this helps.

[Jos]

Hi Leo,

Sorry it took so long before i reacted, but somehow i did not get a mail regarding this. (Maybe i forgot to mark the notify checkbox)

If i use the CSS with 15 px padding the hamburgermenu is hidden behind the title programma. If i use 45 px on a small phone you don’t see the menu. This is from the pageheader, wich comes from Generate Press. Not like the homepage wich comes from Elementor. So it only shows on pages with a pageheader defined in GP.

I would like this most: the menu above Programma, Route and Contact.

Any ideas? Percentage in the pageheader from GP maybe?

Thanks in advance,
Jos

[Leo]

Hmm try this CSS instead:

@media (max-width: 768px) {
    .menu-toggle {
        line-height: 20px;
    }
}

[Jos]

Leo,

that did the trick! Would be a good idea to incorporate this CSS (with comments) to the starter site.

Thanks,

Jos

[Leo]

Glad I could help 🙂

I’ll have a look for sure. Thanks!

[Author]

Posts