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

[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

[David]

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.

[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

[Tom]

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;
    }
}

[Piotr]

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

[Tom]

Awesome! Happy New Year! 🙂

[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 ….. 😖

[David]

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.

[Author]

Posts