• Resolved Shawn

    (@nefariousla)


    Hello,
    Currently, I have two separate navigation blocks in my header — one on the left and the other on the right so my site logo can be centered. This was the workaround I had to implement since I couldn’t find any options offered by the plugin to do this seamlessly. The issue I’m running into now is that when I view the website on a mobile device, it creates two separate hamburger menus. How can I go about fixing this? I don’t even know where to begin. Is centering the site logo in between the navigation not possible?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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.

    Thread Starter Shawn

    (@nefariousla)

    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.

    Plugin Author Hardeep Asrani

    (@hardeepasrani)

    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!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Navigation Menu (How to Center Site Logo Between Menu)’ is closed to new replies.