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

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

Home Forums Support Header layout – how to create a social icon + normal menu on 2 rows (with logo)?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #904632

    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

    Customer Support

    Hi there,

    Try using float right in navigation location;

    and the header widget area for the social icons:

    Let me know if this helps ๐Ÿ™‚


    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?



    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.

    Lead Developer
    Lead Developer

    Using the top bar is a good idea. Thanks, tenchystryder! ๐Ÿ™‚

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


    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.


    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.


    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


    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?

    Customer Support

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

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


    Customer Support


Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.