Archived topic
Mobile menu redesign
7 replies · Started by Hiroki on April 10, 2022
I didn't like mobile hamburger menu, so I set the Mobile Menu Breakpoint to 0 to expose the menu.
However, as it is now, it takes up too much space in the vertical direction, so I want to shorten the length.I want to make it thinner.
Is there anything I can do?
Hi Hiroki,
Can you try modifying the Menu item width in Appearance > Customize > Layout > Primary Navigation as such?: https://share.getcloudapp.com/bLuKB5nD
If that doesn’t work try adding this CSS in Appearance > Customize > Additional CSS:
@media (max-width: 768px) {
div#primary-menu ul li a {
padding-left: 10px;
padding-right: 10px;
}
}If you would like to modify the Typography on mobile: https://share.getcloudapp.com/6quZzGgr
Hope this helps! :)
I'm sorry Fernando.
I'm using a starter site and the change doesn't work, probably because the element of "Charge" is used.
https://nakagawahiroki.com
The code should work for “Charge”. I tried the CSS and it seems to be working as expected from my end: https://share.getcloudapp.com/P8u1QN90
Can you confirm if you’ve added this in Appearance > Customize > Additional CSS?
I’m not seeing the code currently in your website. If you’ve added this and it isn’t working, can you try clearing any caching mechanism set in your website?
Kindly let us know. :)
Thank you very much.
I added the code and it worked pretty well, but not exactly the same like the image.
There is a similar code that was there from the beginning of the starter site.
/* Navigation styles */
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
border-width: 3px;
border-style: solid;
border-color: inherit;
border-radius: 5px;
line-height: 3em;
}
}
Is this in the way?
The display from my mobile phone is like this.
No, that code shouldn’t be a hindrance.
Try adding this:
@media (max-width: 366px) {
div#primary-menu ul li a {
padding-left: 6px;
padding-right: 6px;
}
}I believe the screen size you’re showing is smaller than 367px wide. Basically, you just need to make a new media queries and set smaller padding sizes to accommodate much smaller screens. You may also opt to change the font-size if needed.
Hope this clarifies. :)
I deleted the previous code and added it after that, but nothing changed.
I used the secret mode so that the cache is not displayed and used.
By the way, in the previous support, some additional CSS code was deleted, but this is the first time to add it.
Was there the right way to add CSS?
Is there anything I can do?
