Center Site Logo and Nav Menu

#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