- This topic has 7 replies, 3 voices, and was last updated 3 years, 11 months ago by
Tom.
-
AuthorPosts
-
March 6, 2017 at 1:00 pm #287894
Max
Hey Guys,
I was wondering why the tablet navigation menu was spaced full width when you click on the drop down and the buttons I have added look the same.
Here is the url: http://www.vividballet.com
I have tried various code and changing other code I have, can’t seem to nail it down.
GeneratePress 1.3.44GP Premium 1.2.94March 6, 2017 at 4:19 pm #287971Leo
StaffCustomer SupportHi Max,
Try this:
@media (min-width: 768px) and (max-width: 1024px) { .main-navigation.grid-container { max-width: 500px; } }
Let me know.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 7, 2017 at 7:13 am #288277Max
Hey Leo!
I tried that and it didn’t seem to change the width of the container.
I tried changing the px amount too just to make sure and nothing.
Any other ideas?
I have tried this on two different sites I am using Generate Press with and I get the same result with the tablet view.
March 7, 2017 at 7:17 am #288278Leo
StaffCustomer SupportHmm give this a shot:
@media (min-width: 768px) and (max-width: 1024px) { .main-navigation.toggled { max-width: 500px; margin: auto; } }
Let me know.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 7, 2017 at 10:42 am #288372Max
Bummer! Didn’t work!
I tried adding the new code and it still didn’t shorten the width. It seems to be spanning the entire width of the drop down.
Strange, it does the same on the mobile as well but doesn’t look as strange because the width is so small already.
March 7, 2017 at 10:42 am #288373Tom
Lead DeveloperLead DeveloperAre you basically trying to center the menu items with the arrows right next to the next?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 7, 2017 at 10:50 am #288376Max
Yes, that would be better and my buttons are spanning a huge width of the tablet view and I can’t seem to change the width of those either.
Seems locked in a width for all the navigation items.
March 7, 2017 at 5:13 pm #288555Tom
Lead DeveloperLead DeveloperWhat if you did this..
@media (max-width: 768px) { .main-navigation .menu-item-has-children .dropdown-menu-toggle, .secondary-navigation .menu-item-has-children .dropdown-menu-toggle { float: none; } .main-navigation .main-nav ul li.menu-item-has-children > a, .secondary-navigation .main-nav ul li.menu-item-has-children > a { padding-right: 15px; } }
The only problem with this is menu items without an array don’t align with the others.
Let me know if that’s closer to what you’re looking for.
If not, it would help to see an example of the look you’re hoping to achieve 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.