[Resolved] Full width nav with logo on the left, menu centered and social icons on the righ

Home Forums Support Full width nav with logo on the left, menu centered and social icons on the righ

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1115716
    Piotr

    Hi,
    I’m trying to update my website. I’d like to create full width menu (menu as a header) with logo floating to the far left, menu buttons centered and social icons floating to the far right. I’ve created social icons using your tutorial and it works fine, but when I set menu alignment on “Center” in the customizer, all of the elements become contained. Could you help me, please? I cannot find any solution on the forum which would work for me πŸ™
    Many thanks,
    Piotr
    This is how it should look like :)

    #1115870
    David
    Staff
    Customer Support

    Hi there,

    can you change the navigation position and alignment so it is inline with the logo and ill take a look at the CSS required.

    #1115884
    Piotr

    Hi David,
    thank you for your reply! Yes, sure. I changed navigation position and alignment. I added my social icons with “menu-item-float-right” CSS class as well πŸ™‚
    Many thanks,
    Piotr

    #1116439
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I would do this:

    1. Set your navigation alignment to “Left”.
    2. Add this CSS:

    @media (min-width: 769px) {
        #menu-menu-2 {
            display: flex;
        }
    
        .menu-item-27 {
            margin-left: auto;
        }
    
        .menu-item-11377 {
            margin-right: auto;
        }
    }
    #1116628
    Piotr

    Hi Tom,
    this code works perfect πŸ™‚ Thank you a lot and Happy New Year to all of you!
    Sincerely,
    Piotr

    #1116866
    Tom
    Lead Developer
    Lead Developer

    Awesome! Happy New Year! πŸ™‚

    #1314895
    Mark

    I was trying to emulate this site’s header with central menu and logo on RHS:
    https://www.bangdigital.com.au/

    So I’ll be eager to try this.

    Edit: was not able to achieve the desired outcome using the above instructions ….. πŸ˜–

    #1315252
    David
    Staff
    Customer Support

    Hi there,

    you need help with that ?
    If so start a new topic where you can share a link to your site and i can look at the specific CSS.

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