Center Site Logo and Nav Menu

Airi
#1

Good Morning,

I tried solutions from previous threads on this site but had no luck with aligning the Site Logo and Nav Menu to the center of the page with Airi theme.

Below is the CSS I currently have regarding the header on the website. The Nav Menu somewhat moved when using this code but it did not align to the center of the page. I had trouble moving the site logo as well.

/Center-Nav Menu/
.main-navigation {
text-align: center;
font-size:14px;}

Can you assist?

Thank you,

Chris

#2

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header .site-branding,
    .site-header .main-navigation {
      display: block;
      width: 100% !important;
      max-width: 100% !important;
      flex: unset;
    }
    .site-header .site-branding,
    .site-header .header-mobile-menu {
      text-align: center;
    }
    .site-header .header-mobile-menu,
    .site-header .main-navigation {
      margin-top: 20px;
    }
    @media only screen and (max-width: 1199px) {
    .site-header .header-mobile-menu {
      display: block;
      width: 100% !important;
      max-width: 100% !important;
      flex: unset;
    }  
    }

Regards,
Kharis

#4

It works! You are amazing Kharis.

Thank you again!

#5

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

#6

Hi! This helped me with the logo and the menu on Mobile devices, but on my computer the menu-buttons are still to the right.
I steer a way to make it all centered? :slight_smile:

www.shoutery.se

#7

Never mind… I went back to the design… :slight_smile:

1 Like
#8

Ok.

Feel free to raise a new topics of your own in case of any othe questions you might have.

Regards,
Kharis
aThemes Support