🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Logo Location

Home Forums Support Logo Location

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1177147
    Ruth Kijner

    Hello,
    I’m just started to configure the template. My goal is to locate the navigation bar in the middle of the header and adjust the location of the logo.
    So I configured mobile menu through Customizing –> Layout –> header.
    But unfortunately from the customization panel, I couldn’t customize the location of the logo itself as I wanted, therefore I used CSS to adjust the logo.

    .navigation-branding .site-logo {
    position:absolute;
    left: 300px;
    }

    It’s partly solved my problem .the issue is that the logo location changes between different sizes of PC screens.
    My questions:
    Is it possible to adjust the same location of the logo for all width of pc screens/tablets?
    Is it possible to keep the logo in the middle of the header just on the mobile?

    #1177381
    David
    Staff
    Customer Support

    Hi there,

    what would the logo align to in the desktop mode ?

    #1178291
    Ruth Kijner

    Hello David,
    I appreciate your reply.
    I succeeded to locate the logo (left after the mission) and keep that position also in wider pc screens and laptops. (my anchor point is the mission in the body, so I located the logo after the left border of our mission )

    .navigation-branding .site-logo {
    position:absolute;
    left:49%;
    margin-left: -749px;
    }

    #1178406
    David
    Staff
    Customer Support

    The issue with that is the logo disappears off the edge of the screen when you reduce the browser width. Can i suggest:

    1. Add this CSS:

    @media (min-width: 1200px) {
        .inside-navigation {
            max-width: 1600px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
        }
        .navigation-branding .site-logo {
            position: absolute;
            left: 10px;
        }
    }

    2. Customizer > Layout > Primary Navigation and reduce the Menu width to say 20px ?

    When there is enough room the logo will align to the left and menu will remain center.

    #1179944
    Ruth Kijner

    Hello David,

    I applied your suggestion, and it works great.

    Thank you so much!

    #1180373
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.