Center Menu Items

  • Resolved olivias4w

    (@olivias4w)


    8 years, 11 months ago

    Hi there,

    I upgraded to Apex Pro for a site I’ve been making and have been having trouble centering the text in the menu. In the custom CSS, I entered:

    #menu-primary {
    text-transform: uppercase;
    }

    However, the text for the menu is still aligned left – except on a mobile browser, in which case it is centered. Please let me know if there is any other code I should use.

    Website: https://kathrynandchriswedding.com/?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Thanks so much for upgrading!

    You can use this CSS to center the menu text on your site:

    @media all and (min-width: 50em) {

  .menu-primary-container {
    text-align: center;
  }
  .menu-primary {
    float: none;
  }
}

    Please copy & paste the code above into the “Custom CSS” section in the Customizer (Appearance > Customize), and it should take affect right away.

    Thread Starter olivias4w

    (@olivias4w)

    Thanks – It worked except for one caveat. Now the font on the mobile / iPhone version, both on Chrome and Safari, has defaulted back to the original font in the theme (I had changed it to Libre Baskerville).

    The website again is https://kathrynandchriswedding.com/

    Theme Author Ben Sibley

    (@bensibley)

    What’s happened is that the closing curly brace } is missing from the above code, so other CSS on the site is getting affected by it.

    If you edit the Custom CSS, make sure it ends with two }} and then the font will apply to the mobile size again.

    Thread Starter olivias4w

    (@olivias4w)

    Great! It worked. Thank you ??

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Center Menu Items’ is closed to new replies.