- This topic has 5 replies, 2 voices, and was last updated 1 year, 2 months ago by
Leo.
-
AuthorPosts
-
February 3, 2020 at 11:07 am #1153268
feisar
I’ve got my Sticky Navigation menu working as I want on mobile devices (logo left, hamburger menu right) and ‘medium’ width devices (logo centered, full navigation centered below), which you can see at the linked site.
However, on larger screen devices, above breakpoint 1024px, I can’t get the logo floated left, and the full navigation to be floated right with space between. They are both bunched together in the middle on one line.
Navigation Alignment is set to ‘centered’ (for the medium-sized devices), but if I set it to ‘right’ it looks correct on desktop, but then not on medium-sized devices.
Any ideas how I can get it working on both medium-sized and desktop devices?
Thanks!
GP v2.42
GPP v1.9.1February 3, 2020 at 12:05 pm #1153302Leo
StaffCustomer SupportHi there,
Can you try setting the navigation alignment to right:
https://docs.generatepress.com/article/navigation-layout/#navigation-alignmentThen use dropdown option to set when the navigation should be below the logo and centered:
https://docs.generatepress.com/article/navigation-drop-point/Let me know if this helps π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 3, 2020 at 12:12 pm #1153310feisar
Thanks for the reply.
Yes, I’ve tried that with no luck. It looks good on desktop, but on medium-sized devices, both the logo and the navigation menu are aligned to the left, not centered! I’m not sure why.
I’ve changed the settings on the live site so you can see what’s happening.
EDIT: I’ve just noticed that no matter what I set the Navigation Drop Point to, it doesn’t change when it switches.
Thanks.
GP v2.42
GPP v1.9.1February 3, 2020 at 3:27 pm #1153432Leo
StaffCustomer SupportAhh my bad that option is only for header.
What if we use the current set up with this CSS?
@media (min-width: 769px) and (max-width: 1024px) { .main-navigation .inside-navigation { display: flex; flex-direction: column; } .inside-navigation .navigation-branding { margin-left: auto !important; margin-right: auto !important; } }
You can adjust the breakpoint as you see fit.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 3, 2020 at 10:34 pm #1153631feisar
Thank you! That’s perfect.
I had tried adjusting the CSS myself but just couldn’t get it to work.
(Incidentally, should the Navigation Drop Point affect the Sticky navigation, or is there a reason it doesn’t?)
GP v2.42
GPP v1.9.1February 3, 2020 at 11:08 pm #1153642Leo
StaffCustomer SupportThe navigation drop point only works when header is used and the navigation as a header option is not used.
Glad I could help π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.