Archeo: add CSS for mobile menu font size #5644
Conversation
archeo/style.css
Outdated
| * Possible future fix: https://github.com/WordPress/gutenberg/pull/33543 | ||
| */ | ||
| @media (max-width: 599px) { | ||
| .wp-block-navigation__responsive-container-content li { |
There was a problem hiding this comment.
I noticed this selector doesn't work in the editor for non-standard links. For example, I have Submenu and a Home link, and the large font size isn't applying:
It makes me wonder if adding this CSS is worth it, or if it's going to cause more confusion if a user changes this navigation's font size in the editor and previews it.
Another thought — could we create a custom CSS variable that uses a responsive type size and apply it to the navigation block here. That way any user modifications to the font-size would still take precedence.
There was a problem hiding this comment.
could we create a custom CSS variable that uses a responsive type size and apply it to the navigation block here.
Oh that's a fine idea.
There was a problem hiding this comment.
I think the CSS variable with a responsive type size is a great idea, however, I'm not sure how to do this where the font size is bigger on smaller screens and smaller on larger screens.
For now, I've gone with setting the larger font size for the overlay in CSS (we were already doing this, I missed it when I was working on this PR!) and setting the default font size in theme.json.
|
If this doesn't already exist, we should file an issue to ask for the ability to specify an overlay-specific font size. I imagine this will be a common use case, and we already have the ability to set overlay-specific values for color via |
|
I don't see the responsive menu "small" as posted in the before shots, I looks correct as of this change. The only change I can see from this PR is that the font size configuration has been moved from the BLOCK to THEME.JSON which looks good to me. |
Yeah this sounds correct, I missed that we'd already set the large font size for the responsive menu via CSS, but then it looks like it was being overwritten by the font size set in the header markup. So, I've removed the font size from the Going to look for / create an issue for setting an |
|
I couldn't find a related issue so have opened this: WordPress/gutenberg#39352 The change looks good, 🚢 |
Looks like some folks are starting to think about this holistically here: WordPress/gutenberg#39142 |
Changes proposed in this Pull Request:
This increases the font size of the main navigation on small screens, as suggested in #5631:
The
blockGaphas already been reduced tovar(--wp--custom--spacing--small)in #5640. This is what I've used in the above screenshot. Should this be reduced any further?Related issue(s):
#5631