Archived topic
Menu on mobile
7 replies · Started by Yvan on December 1, 2020
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 ?
And on the homepage, how to have a bigger image centered with a text defined on a mobile ?
Thanks !
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Hi Leo,
i'm sorry, the link to my site is ok now.
Glad to hear :)
I told you that I have updated my profile and that my site is identified in it.
Can you please help me?
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?
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
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.