1

I'm new to WordPress, using which I was able to create this site over here: http://wtfai.pl/

It's almost complete, save for one change I would like to make: to make the Primary Menu stay exactly the same way it is visible now on PCs and mobile devices, so in a single line (it's just 3 positions after all), and aligned to center. I may perhaps want to shrink the text a little bit if it doesn't fit.

Thanks in advance!

0

Add below css in your theme style.css file, change font size if you need

@media screen and (max-width: 56.875em) {
    .main-navigation li {
        float: left;
        width: 33.333333%;
        text-align: center;
        font-size: 12px;
    }
}

UPDATE:

To make menu items inline apply floats on list elements not on nav tag I checked using inspect elements and code i sent works fine. check that rule does not override by any other CSS in hierarchy.

enter image description here

  • It didn't work, even after changing the class to .site-header-menu. If this may help, here's everything I got so far in the additional CSS box: [at]media all and (min-width: 44.375em) { .site-header-main .site-branding { margin: 0; } .site-header-menu { margin: 0 auto; } .primary-menu { width: auto; } } #mobile-menu-trigger-wrap { display: none; } .site-footer { display: none; } [at]media screen and (max-width: 56.875em) { .site-header-menu { display: inline; text-align: center; font-size: 12px; } } – Mojo Gamble Mar 5 '17 at 7:51
  • Check update to answer – C Sabhar Mar 5 '17 at 9:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.