[Resolved] Logo Location

Home Forums Support Logo Location

This topic contains 5 replies, has 2 voices, and was last updated by  David 1 month ago.

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 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 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 Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.