Alignment of Logo and Menu

  • Unknown's avatar
    sheevben · Member ·

    Hi!

    I am using the Maywood theme and I would like to have my company logo on the left and the navigation centred and underneath the bottom edge of it (kind of like this https://co-learning.eu/)

    I have been playing with custom CSS and so far have the broken version you see live on my site at the moment:

    /*
    Welcome to Custom CSS!

    To learn how this works, see https://wp.me/PEmnE-Bt
    */
    .site-logo {
    float: left;
    }
    .main-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    }
    .logged-in .main-navigation {
    top: 32px;
    }

    Any help would be appreciated!

    The blog I need help with is: (visible only to logged in users)

  • staff-totoro · Staff ·

    Hi there,

    You may wish to use this CSS instead, which will correctly justify the logo to the left.

    /* -- left-align logo and right-align main and social navigation when site title is hidden on larger screens -- */
@media screen and (min-width: 560px) {
    /* set header to display as grid */
    .site-header {
        display: grid;
        grid-template-areas:
            "site-logo main-navigation"
            "site-logo social-navigation"; /* if there is no social navigation menu, replace the site-logo in this line with a . to align the logo with only the main navigation, like this: ". social-navigation" */
        grid-template-columns: 100px auto; /* change the value of 100px to adjust the size of the site logo */
        align-items: space-between;
    }
     
    /* set area for site branding */
    .site-header .site-branding {
        grid-area: site-logo;
    }
     
    /* set area and text alignment for main navigation area */
    .site-header .main-navigation {
        grid-area: main-navigation;
        text-align: right
    }
     
    /* set area for social navigation */
    .site-header .social-navigation {
        grid-area: social-navigation;
    }
     
    /* set alignment of social navigation */
    .site-header .social-navigation > div > ul {
        justify-content: flex-end;
    }
}

    Hope this helps!

  • staff-totoro · Staff ·

    Hi again,

    I forgot to mention that this is the support forum for our free sites, but your Business Plan upgrade includes priority live chat support that you can access 24 hours a day (except major holidays)

    With this in mind you are encouraged to reach out to us here, and we can take a closer look at your issue in realtime. No need to wait for a reply in the forums: https://wordpress.com/help/contact

  • The topic ‘Alignment of Logo and Menu’ is closed to new replies.