Cannot centre nav menu (above header)

  • Resolved akroe

    (@akroe)


    7 years, 5 months ago

    I’m trying to center the navigation menu, the top one that appears above the header image in twentysixteen theme. I’ve tried various CSS suggestions from other threads and none work. I’m starting to think it might be to do with the webkit-flex stuff (applying to .site-header-menu ?) but am newish to coding and amn’t familiar with the webkit-flex stuff.

    Any suggestions? I’ve made a child theme of twentysixteen.

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

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

  • You will want to do this, although this will affect your mobile view too so we have to add a bit more for mobile viewing.

    .toggled-on ul#menu-top {
    display: block;
    text-align: left;
}

    Then for the desktop view, we need to do this:

    
@media screen and (min-width: 56.875em) {
.site-header-menu {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    text-align: center;
}

#menu-top {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
}
}

    I only tried this in the browser and not the theme itself, but so far it seems to work.

    Thread Starter akroe

    (@akroe)

    Yes! That worked! Thank you so much!!

    (In case you look at the website and wonder why it’s still right-aligned, it’s because the website owner decided in the end they preferred the right-alignment. But I will use this fix on another twentysixteen website I run too, so very useful.)

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Cannot centre nav menu (above header)’ is closed to new replies.