[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
    Posts
  • #904632
    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

    #904811
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #910961
    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

    #911029
    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.

    #911329
    Tom
    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.

    #911355
    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.

    #911369
    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.

    #911371
    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

    #918029
    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?

    #918036
    Leo
    Staff
    Customer Support

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

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

    Thanks!

    #919742
    shpr
    #919750
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.