Need help centering menu for mobile and desktop

• 

  jenniferaambrose · Member · Jan 12, 2021 at 5:53 pm

  • Copy link
  • Add topic to favorites

  I’m having a problem getting the menu items to appear centered on my website for the desktop. It seems to automatically center everything for mobile, but when I stretch out my desktop screen all the way, the menu items are left centering.

  I saw posts over the last few years where people have the same problem, and I applied all those CSS codes that developers posted (one at a time) in the Customize – Add CSS box, but none of the codes work for me.

  The blog I need help with is: (visible only to logged in users)

• 

  staff-totoro · Staff · Jan 12, 2021 at 11:10 pm

  • Copy link

  Hi there,

  Please add the following CSS to your customizer settings, which will center your site menu on desktop:

  /* center menu horizontally*/
  @media screen and (min-width: 768px) {
    .menu-wrapper {
      flex-direction: column;
      align-items: center;
    }
   
    #header-menu {
      margin-left: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  Hope this helps!

• 

  jenniferaambrose · Member · Jan 13, 2021 at 1:45 pm

  • Copy link

  That worked where other codes posted have failed!!!! Thanks much!!!