[Resolved] How do I align my menu icon, button, and logo like this?

Home Forums Support How do I align my menu icon, button, and logo like this?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1428633
    Andy

    Hi there,

    – I’d like to move my off-canvas menu icon to the left corner
    – I’d like to move my button to the right corner
    – I’d like to center align my logo

    Example: https://imgur.com/a/LkEOD3x

    Is this possible? Thank you in advance!

    #1428863
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .main-nav {
        position: relative;
    }
    
    .navigation-branding {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .main-nav {
        width: 100%;
    }
    
    .nav-aligned-right .main-navigation ul {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
    
    .nav-aligned-right .main-navigation ul li.slideout-toggle {
        margin-right: auto;
    }
    #1429786
    Andy

    Perfect, thank you David! 2 quick questions:

    – The logo doesn’t link to ‘homepage,’ how can I fix this?

    – Is there a way to add padding to the right of the orange button? Similar to the menu icon? It is sticking to the wall (in mobile view)

    View post on imgur.com

    Cheers!

    #1429795
    Leo
    Staff
    Customer Support

    Edit this:

    .navigation-branding {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    to this:

    .navigation-branding {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
    }

    Then add this:

    @media (max-width: 768px) {
        .main-navigation .main-nav ul li.sub-button a {
            margin-right: 20px;
        }
    }
    #1430034
    Andy

    fantastic thank you !

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