Navigation Support for Galaxy Fold & iPhone 5/SE

[Fredrik]

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!

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fredrik]

Hello Leo,

Sorry missed that! check it out 🙂

[David]

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)

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fredrik]

Ah, I see!

Thanks for the lesson 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fredrik]

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!

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fredrik]

Ahh. Completely missed that, thank you 🙂

[Fredrik]

Can you include .secondary-navigation in the same selector?

[Leo]

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 */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fredrik]

Hello Leo,

I see, didn’t know about the ,. Thank you for making it clear 🙂

[Leo]

No problem 🙂

This is a good site to learn HTML and CSS if you are interested:
https://www.codecademy.com/catalog/language/html-css

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts