Archived topic
Float Right Inside Navigation
6 replies · Started by Austin on September 27, 2020
Hello,
I've used both the generate_inside_navigation and generate_after_primary_menu hooks to add a feature to the right of a right floating navigation... and it always shows up to the far left (of both site logo and primary menu). The hooked html is wrapped in a div and I've added right float css to that div class. I've tried a "menu-item-float-right" class I saw referenced in a GP nav bar + icons article. I've also tried left floating the primary-menu ID css and via the Navigation Alignment float options. Nothing works.
Any ideas? No caching, on WAMP localhost using private browser settings.
Hi there,
can you provide a link to the site so i can see the issue.
I think its just a couple of lines of CSS to re-order those elements.
Hello,
Pushed to a live server for you. (Temporary link shortening service, wait 5 seconds to continue): https://www.temporary-url.com/90C
Currently using the generate_after_primary_menu hook
The Div class on the hooked content is "donate-button".
Hi there,
Are you trying to add the Donate button on the left of Sample Page?
If so can you try using this method?
https://docs.generatepress.com/article/adding-buttons-navigation/
Let me know if I'm missing something :)
Leo,
Thanks for the reply. Yes, I want to add an element to the right of the primary menu.
I realized that custom class could be used with a menu item. However, let's assume that it was not a button to be added but something else, like php for email optin or a login form. Is there no way to get that to the right using generate_after_primary_menu and not hacking the core files (which would likely lead to responsivity issues)? The HTML renders in the right order here so I would think it's a CSS problem but I can't seem to figure it out. I suspect the answer will seem obvious when I do figure it out.
I've seen support tickets from the past in which people use generate_after_primary_menu and generate_inside_navigation to get thing to the far right of the nav bar but I don't seem to be able to replicate that.
Leo/David/Tom,
I found the solution to my issue:
The primary menu has an order property of 4, so adding an order property of 5 to the hooked element solves the problem.
element.style {
order: 5;
}Sorry to take up your time with something so silly.
Glad you've figured out :)
No problem at all!
