Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Archeo: add CSS for mobile menu font size #5644

Merged
merged 3 commits into from
Mar 11, 2022
+6 −1
Merged

Archeo: add CSS for mobile menu font size #5644

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
738c61a
Add CSS for mobile menu font size
mikachan Mar 9, 2022
0c428cf
Remove CSS patch
mikachan Mar 10, 2022
fc91389
Move navigation font size into theme.json
mikachan Mar 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions archeo/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,3 +224,13 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
height: auto;
max-width: 100%;
}

/*
* Custom font size at small screens for navigation.
* Possible future fix: https://github.com/WordPress/gutenberg/pull/33543
*/
@media (max-width: 599px) {
.wp-block-navigation__responsive-container-content li {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:
Screen Shot 2022-03-09 at 2 12 32 PM

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

font-size: var(--wp--preset--font-size--large) !important;
}
}