- This topic has 11 replies, 4 voices, and was last updated 1 year, 10 months ago by Leo.
May 19, 2019 at 10:39 am #904632shpr
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 ThanksMay 19, 2019 at 3:52 pm #904811LeoStaffCustomer Support
Try using float right in navigation location;
and the header widget area for the social icons:
Let me know if this helps 🙂May 25, 2019 at 11:19 pm #910961shpr
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?
ThanksMay 26, 2019 at 2:15 am #911029tenchystryder
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
Maybe this might work for you.May 26, 2019 at 9:03 am #911329TomLead DeveloperLead DeveloperMay 26, 2019 at 9:23 am #911355tenchystryder
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.May 26, 2019 at 9:43 am #911369shpr
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.May 26, 2019 at 9:46 am #911371tenchystryder
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 logoJune 2, 2019 at 2:36 pm #918029shpr
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?June 2, 2019 at 2:56 pm #918036LeoStaffCustomer SupportJune 4, 2019 at 8:55 am #919742shpr
Done (https://generatepress.com/forums/topic/circle-shaped-logo-in-navigation-to-span-larger-than-the-navigation/) & will mark this as resolved.June 4, 2019 at 9:00 am #919750
- You must be logged in to reply to this topic.