[Support request] Menu on mobile

[Yvan]

Hello,

I have a problem with my mobile menu. This one is displayed over my title in transparency… no problem on the homepage.

An idea to solve the problem ?

https://postimg.cc/XG37v3Tz

And on the homepage, how to have a bigger image centered with a text defined on a mobile ?

https://postimg.cc/0zcCn2Cp

Thanks !

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

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

[Yvan]

Hi Leo,

i’m sorry, the link to my site is ok now.

[Leo]

Glad to hear 🙂

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

[Yvan]

I told you that I have updated my profile and that my site is identified in it.

Can you please help me?

[Elvin]

Hi,

Are you still trying to solve the same issues?

For the mobile header, the logo’s image size is too big for some mobile devices, causing the navigation toggle to wrap under the logo.

To address this, consider reducing the width of the logo so both the logo and the menu toggle fit within 1 row.

You can adjust the mobile width of the logo by adding this CSS:

/* Logo width on mobile */
@media(max-width:768px){
.site-header .header-image {
    width: 250px;
}
}

And on the homepage, how to have a bigger image centered with a text defined on a mobile ?

To clarify: Are you trying to vertical center the page hero’s article title only?

A wise man once said:
"Have you cleared your cache?"

[Yvan]

Hello,

thank you for your answer.
I would like the image like this but with a small text
https://postimg.cc/TKP9KZgt

For the menu is better, but it hides my title
https://postimg.cc/RNpPLSMk

Thanks

[Elvin]

I would like the image like this but with a small text
https://postimg.cc/TKP9KZgt

You seem to have resolved the text sizing w/ @media rule.

As for the page-hero sizing, you can do that by either adding more top and bottom padding to the mobile view on the Header Element’s settings or adding another @media rule that sets your min-height.

Example:

@media(max-width:768px){
.inside-page-hero {
    min-height: 400px;
    display: flex;
    align-items: center;
}
}

display: flex; and align-items: center; are optional as they’re just added to vertically align the title.

For the menu is better, but it hides my title
https://postimg.cc/RNpPLSMk

You can try removing the nav bar’s margin top so it doesn’t go too far down

@media(max-width:768px){
.has-inline-mobile-toggle #site-navigation.toggled {
    margin-top: 0; 
}
}

You can also consider resizing the menu items on mobile so appear to large to the point where they overlap with the title.

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts