-
I set up a simple header using the Default preset. The logo is on the left side and the nav is on the right side.
I would like to add a row of social icons above the navigation text. I created a block in Elements, added the icons, and set its hook to inside_navigation.
When I preview, the row of social icons is correctly positioned above the nav text.
However, the entire social icons/navigation area is now flush left, pushed up against the logo. The icons and text inside each respective element are also now flush left internally (even though the icons appear flush right when I look back at the block in Elements).
How do I get the social/nav area back on the right side? I have tried to make custom CSS changes to the .main-navigation .inside-navigation class, but to no avail. Why is adding inside_navigation causing the layout to shift so dramatically?
-
Hi there,
Can you add your GP premium support key to your profile along with the GB Pro support key?
And can you link us to the site in question where we can see the social icons?
-
I have added my GP support key.
My staging site is here: https://staging.travelerjen.com/
My hook element includes a search box and social icons. The outer container of the block is set to default, and the inner container (which holds the search and the icons) is set to flex and flex-end so that the box and icons appear on the same line.
If I remove the search box, the social icons appear inline with the nav text, and then the whole area IS flush right.
I’m sure I have something set wrong, but I have no idea what it is. 🙂 Thanks.
-
Do you want it to appear like this?
https://app.screencast.com/eOoNLI3ZGquhFIf so, try adding this CSS:
@media(min-width: 769px) { .main-navigation .inside-navigation { justify-content: flex-end; } }Let me know 🙂
-
THAT’S IT! 🙂
I figured it was something super-simple, lol. Thank you so much!
-
You are welcome 🙂 Glad to help!
-
Can I pick your brain on a related issue? If you take a look at the page now, you’ll see my working code (per the above), but I’m having another problem in the header.
When I resize the page below 1200px, the logo begins to shrink as the nav pushes in from the right.
On another GP/GB blog I set up last summer, this didn’t happen. On the older blog, the logo stays the specified width, all the way down to the mobile breakpoint. I’ve compared the two blogs in their respective Customizers, and I can’t find any differences.
Is this a change to GP/GB? How can I keep the logo the same width as the screen width decreases?
-
Try adding this CSS:
.site-logo { flex-shrink: 0; } -
PERFECT! Thank you! (I never would have figured that one out!)
-
You are welcome 🙂
- You must be logged in to reply to this topic.