[Resolved] Float Right Inside Navigation

[Austin]

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.

[David]

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.

[Austin]

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”.

[Leo]

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 🙂

[Austin]

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.

[Austin]

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.

[Leo]

Glad you’ve figured out 🙂

No problem at all!

[Author]

Posts