Site logo

Archived topic

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

7 replies · Started by Piotr on December 27, 2019

Viewing posts 1–8 of 8

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 :)

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.

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

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

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

Awesome! Happy New Year! :)

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

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.

This archived topic is closed to new replies.