Archived topic
Right-aligned social media icons using "navigation as header"
11 replies · Started by Toby on January 11, 2021
Hi - sorry to open up yet another question on this topic. There are several similar-but-hard-to-understand-in-the-current-context discussions on this in the forum. Perhaps it would make sense to have a permanent "how-to" in the docs?
I'm using the "navigation as a header" layout, with a search icon to the right.
I want to add social media icons/links to the navbar, aligned to the right, before the search icon which should still be furthest on the right.
The icons I use are small embedded SVG:s (i.e., not font awesome, not YAP (yet another plugin)). I have no problem getting them to show up in the navbar, the problem is placing them where I want without too much hack-ish guesswork.
What is the current recommended method? Any chance of a GUI customizer update to solve this?
Cheers, Toby
Hi Toby,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Sorry, I haven't done this on any public site yet.
It's the same navbar layout as in the GP site library "split": http://gpsites.co/split/
My question is how you recommend doing that layout and still keep the search-icon furthest to the right (when I use the WP menu classes for this, my menu items float to the right of the GP search icon).
As this is a very common layout, and there are several answers to similar questions here in the GP forums already (not all up to date though, they use font awesome and whatnot), I think it's a good idea for you to write a "how-to" on this, or refer to existing documentation.
As I mentioned in my question, I am using the GP "navigation as a header" layout, and I wonder how you recommend this be done. Please advice.
I can set up a new site and install GP + "split" and try to figure out what you have done there, but that takes a lot of time and effort - I thought asking here would be quicker.
Cheers, Toby
Are you using Flex or float of the theme structure?
You can check under Customizer > General.
If you can create a staging site then it would be easier for us to help.
Thanks!
Sorry for being unclear. I have no problem doing this on my own with a basic CSS hack. I wondered what the GP official recommended way would be, as having social icons in the "navigation as a header" style is very common and you frequently get similar questions. But if you have no answer for that, so be it.
Thanks.
I wondered what the GP official recommended way would be
Can you answer my question above first?
Are you using Flex or float of the theme structure?
The method depends on what structure you are using :)
Oh sorry about that. It's float but I'm switching to flexbox.
Thanks again.
This is the best method with Flexbox:
https://docs.generatepress.com/article/generate_menu_bar_items/
Thanks Leo. You provide excellent support, as always :).
No problem :)
Hi, sorry to reopen this...
How would you accomplish the same thing using the float theme structure? I'm having issues with flexbox so I will have to stick with float, for now.
Is there any possibility we could see the site ? Don't want to send you off blind that could lead to other problems.
