- This topic has 12 replies, 3 voices, and was last updated 4 months, 2 weeks ago by
Leo.
-
AuthorPosts
-
September 5, 2020 at 10:13 am #1432169
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/uc4jbmAdding 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!
September 5, 2020 at 1:10 pm #1432301Leo
StaffCustomer SupportHi 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/September 5, 2020 at 1:33 pm #1432314Fredrik
Hello Leo,
Sorry missed that! check it out π
September 6, 2020 at 5:32 am #1432719David
StaffCustomer SupportHi 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/September 6, 2020 at 7:14 am #1432796Fredrik
Ah, I see!
Thanks for the lesson π
September 6, 2020 at 8:17 am #1432971David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 6, 2020 at 8:21 am #1432975Fredrik
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!
September 6, 2020 at 9:14 am #1433032Leo
StaffCustomer SupportThat 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/September 6, 2020 at 9:29 am #1433041Fredrik
Ahh. Completely missed that, thank you π
September 6, 2020 at 9:39 am #1433047Fredrik
Can you include
.secondary-navigation
in the same selector?September 6, 2020 at 1:11 pm #1433162Leo
StaffCustomer SupportIt 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/September 6, 2020 at 2:40 pm #1433215Fredrik
Hello Leo,
I see, didn’t know about the
,
. Thank you for making it clear πSeptember 6, 2020 at 3:20 pm #1433226Leo
StaffCustomer SupportNo problem π
This is a good site to learn HTML and CSS if you are interested:
https://www.codecademy.com/catalog/language/html-cssDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.