Navigation Menu (How to Center Site Logo Between Menu)

It looks like you are using the Astra theme on your website. One solution to this issue would be to use the built-in responsive header options provided by Astra. To do this, you can go to the Customizer and navigate to the “Header & Navigation” section. From there, you should see an option to “Display Different Logos on Mobile Devices”. You can upload a separate mobile logo and it will be displayed on mobile devices instead of the desktop logo.

Next, you can enable the “Merge Menu Items on Mobile” option to merge the two menus into a single hamburger menu on mobile devices. This option can also be found in the “Header & Navigation” section of the Customizer.

If you would like to keep the current layout of your header and simply center the logo, you can do this by adding some custom CSS to your website. Here’s an example of how you could do this:

1. In the Customizer, go to the “Additional CSS” section and add the following CSS:

@media (max-width: 767px) {
  .site-header .site-branding {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .main-navigation {
    display: none;
  }
}

This CSS will hide the left and right navigation blocks on mobile devices and center the logo instead.

I hope this helps! Let me know if you have any questions or if you would like further assistance.

Hi Mayank,

I’m actually using the Raft theme on my website. I don’t think Raft has a built-in responsive header. Should I just change my theme to Astra?

Hi Shawm

Did you try the second method by using CSS? If not then please try that method first.

Hey @nefariousla,

Would it be possible for you to turn this into a single menu with the imperfect logo alignment so we could see and give you CSS to fix that?

Thank you!