[Support request] Circle shaped logo in navigation to span larger than the navigation

Home Forums Support [Support request] Circle shaped logo in navigation to span larger than the navigation

Home Forums Support Circle shaped logo in navigation to span larger than the navigation

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #919741
    shpr

    I was attempting to create a navigation/header with a ‘large’ circle logo on the left, main/primary menu on the right and social media links above the primary navigation similar to https://www.screencast.com/t/FTr209mJmL3r.

    This has been partially achieved using the “use navigation as a header” and a menu widget in the “top bar” area (ref. https://generatepress.com/forums/topic/header-layout-how-to-create-a-social-icon-normal-menu-on-2-rows-with-logo/).

    The part I have not yet been able to do is to allow the logo to be larger than the height of the navigation (even with zero padding the logo still looks quite small due to the aspect ratio).

    Hoping you can advise how to increase the size of the logo.

    Thanks

    #919751
    Leo
    Staff
    Customer Support

    Hi there,

    If you are using the “use navigation as a header” option then the logo size is determined by the menu item height:
    https://docs.generatepress.com/article/menu-item-height-width/

    Let me know if this helps 🙂

    #919789
    shpr

    If “navigation as a header” is not the best way to achieve this layout can you please tell me what way is?

    ie. I don’t want to increase the height of the menu, only the size of logo (because it is a circle shape and if it is the same height as the menu bar it looks too small).

    #919796
    Leo
    Staff
    Customer Support

    Any chance you can link us to the site in question?

    You can edit the original topic and use the private URL field.

    #926362
    shpr

    Have updated with url. Thanks.

    #926365
    Leo
    Staff
    Customer Support

    What if we try this CSS?

    .navigation-branding img {
        padding: 0;
        height: 65px;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

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