Archived topic
Navigation Support for Galaxy Fold & iPhone 5/SE
12 replies · Started by Fredrik on September 5, 2020
Hello,
I've been adding support for Galaxy Fold & iPhone 5/SE to my primary navigation.
Doing so by removing the 20px padding that the menu items are assigned. Otherwise everything gets smushed.
See print: https://prnt.sc/uc4jbm
Adding below CSS works. See print: https://prnt.sc/uc4lj3
@media (max-width: 414px) {
.main-navigation .main-nav ul li a {padding-left: 10px; padding-right: 10px;
}
}But this causes a problem with the sub-items in the off canvas menu by adding padding-left 10px, I think. See print: https://prnt.sc/uc4m9i
So any suggestion to structure this better is much appreciated :) Thx!
Hi there,
Any chance you can link us to the site in question?
You can edit the original topic and use the private URL field.
Let me know :)
Hello Leo,
Sorry missed that! check it out :)
Hi there,
so this .main-navigation will target all navigations with that class including the off canvas.
Instead you can do this to exclude the off-canvas:
.main-navigation:not(.slideout-navigation)
Ah, I see!
Thanks for the lesson :)
You're welcome
One quick question on the same topic.
I'm trying to exclude (.slideout-navigation) on this with the same principle:
.inside-navigation:not(.slideout-navigation) {
padding: 0px 10px;
}Maybe that requires a different approach. Thx!
That doesn't work as .inside-navigation is not at the same level as .slideout-navigation class.
Try this selector instead:
.main-navigation:not(.slideout-navigation) .inside-navigation
Ahh. Completely missed that, thank you :)
Can you include .secondary-navigation in the same selector?
It should be something like this if I understand what you are asking correctly:
.main-navigation:not(.slideout-navigation) .inside-navigation,
.secondary-navigation .inside-navigation {
/* CSS here */
}Hello Leo,
I see, didn't know about the ,. Thank you for making it clear :)
No problem :)
This is a good site to learn HTML and CSS if you are interested:
https://www.codecademy.com/catalog/language/html-css
