Centering primary nav menu bar

  • Hi,

    I moved Shoreditch’s primary navigation bar below the custom header, where I want it, using the child theme’s header.php file. Now I’d like to center that whole nav bar (the four menu items). I’ve tried lots of different CSS hacks to center the menu system but none seem to work; the nav bar always remains aligned left. View the current site at: https://elitemt.co.uk

    Thanks for any help!

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @typiary!

    Defining a width can help a lot, try the following CSS:

    .menu-top-menu-container {
    max-width: 300px;
    margin: 0 auto;
}

    That 300px is specific to your current menu, you’d need to change it if you add anything to the menu ??

    Thread Starter Typiary

    (@typiary)

    Thanks, Chad. The menu didn’t move. Interestingly, when I removed the header image, the menu went back to being aligned right. I tried working on a few other CSS properties, like box-sizing, but no luck yet. Even when applied to:
    .site-content
    .site-menu
    .main-navigation
    .menu-top-menu-container
    .primary-menu

    Any other help is appreciated.
    -Jeremy

    It looks like you may have used another method (plugin, maybe?) to center the menu since posting, so the structure is a bit different.

    A possible factor is the name of the menu being used. .menu-top-container will be the element name for a menu you’ve named “top” – if you switch menus, change the name, etc, the style won’t fire.

    Let me know if you switch back to your old setup and I’ll be happy to take another look! ??

    Thread Starter Typiary

    (@typiary)

    Hi Chad,

    Thank you so much for your time and interest. Yes, I’m using this plugin so at least I can see that it’s possible to do what my client wants:
    https://www.ads-software.com/plugins/ap-mega-menu/

    The way it is now is pretty much the way my client wants the menu. I would be much happier not using a plugin and doing some CSS with your help. But I have to to leave the site like this (with plugin) for another 36 hours or so to see if my client is pleased (give her a chance to check it).

    In about 36 hours (or after hearing from her), I can turn off the plugin and restore the Shoreditch menu with my mods (old setup), and play around with the CSS for a little while. I hope that’s OK; I’ll return to this thread in this forum (right here!) as soon as I can.

    Cheers,
    Jeremy

    Sounds like a plan!

    I finally finish my Car Club website and the bottom Navigation buttons are drifted left and not centered . Can someone please take a look and see where I messed it up…Thank you in advance for your expert help !

    https://www.firebirdclubofcanada.ca/

    Hi @rodeoranger!

    It looks like your site is using a different theme, named Azul Silver. Your best bet will be to post in the support forum for that specific theme describing the issue:
    https://www.ads-software.com/support/theme/azul-silver

    When I took a look at your site I didn’t see which links you mean, so when you post over there, a description of the specific items you’re having trouble with will help ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Centering primary nav menu bar’ is closed to new replies.