[Resolved] Header layout – how to create a social icon + normal menu on 2 rows (with logo)?

[shpr]

I’m sure I’m missing something simple here but after various configurations, I can’t quite get this layout to work:

* Logo – circle/square shape (left aligned, vertical center)
* * Secondary menu – social icons (right aligned)
* * Primary menu – main nav (below secondary nav)

Basically, like this: https://screencast.com/t/FTr209mJmL3r (but with a square logo).

I have the menus ready, inc social icons. Could you tell me the recommended way to configure the layout?

Many Thanks

[Leo]

Hi there,

Try using float right in navigation location;
https://docs.generatepress.com/article/navigation-location/

and the header widget area for the social icons:
https://docs.generatepress.com/article/header-widget/

Let me know if this helps 🙂

[shpr]

Thanks Leo. When I do this, to get the header widgets to display (social icons) I have to turn off “Used navigation as a header”…which breaks the logo settings.

Also, using the header widget displays the social navigation vertical, rather than horizontal.

Any other ideas or have I missed a step?

Thanks

[tenchystryder]

Sorry to interupt Leo but I had a similar problem with a new site.

Site logo align left, secondary menu float right and social icons in top bar align right also.

Welcome to look at my site SHPR. I have menu and logo opposite way round though.
You can set padding and social icon sizes and menu sizes to suit. Also my site inside container is set to help keep it all aligned

http://www.shrimpersaway.co.uk

Maybe this might work for you.

[Tom]

Using the top bar is a good idea. Thanks, tenchystryder! 🙂

shpr – let us know if that works for you or not.

[tenchystryder]

Hi Tom

Thank you and hope your well

I always like to get things done with the standard GP tools before I add extra code. The only problem I can see with shpr’s layout is the logo won’t be spread evenly across the header and top bar areas vertically as in their pic, but small sacrifices and all that.

[shpr]

Thanks @ everyone.

That does get it pretty close but yes @tenchystryder, you’re right – because it is a circle, the logo looks tiny when it’s contained within that space, even when zero padding is applied.

If you have any suggestions re. css for allowing the logo to be larger than the nav-bar please let me know….although I realise this might not be very straight-forward due to the top-bar, mobile responsiveness etc and thus beyond scope of support.

[tenchystryder]

Hi shpr

I have my logo and menu in the header. Only the social icons are in the top bar.
This way you have more space for the logo

[shpr]

Is there any option for allowing the logo to be slightly larger than the nav-bar (or css that could do this)?

ie so a circle/square logo could be vertically slightly larger than the nav bar and span outside (below) it?

[Leo]

Any chance you can open a new topic for the separate question?

This will really help us to track the questions/issues.

Thanks!

[shpr]

Done (https://generatepress.com/forums/topic/circle-shaped-logo-in-navigation-to-span-larger-than-the-navigation/) & will mark this as resolved.

[Leo]

Thanks!

[Author]

Posts