• ugococo

    (@ugococo)


    Hi,

    When I put 6 pages in my menu, the 6th one is displayed under the five others. How could I display the 6 pages in one line ? (there is some space left)

    Thank’s a lot,

Viewing 5 replies - 1 through 5 (of 5 total)
  • dwheitner

    (@dwheitner)

    The menu font styles (some of which are narrower than others) and size can be adjusted in the customizer, which may make it narrower for you. Adjusting the spacing b/t items would probably take custom css coding (I know some basics, but beyond my current knowledge).
    Keep in mind that even if you get the items to fit on one line, it will still spill over on a mobile device.
    One way to approach this latter issue within Make is to put 1-3 high-priority menu items in the header bar, in addition to having your full menu in the standard location. See davewheitner.com for an example of this, where I’ve put two items I want to make sure people see right away in the header bar. Hope that helps!
    Oh, keep in mind too that within the menu editor, you can edit the name of the menu item so it’s shorter than the title that appears on the page itself. This may enable your menu to fit.

    Thread Starter ugococo

    (@ugococo)

    Thank you for your answer. But if you take a look to this website tamifaulknerdesign.com/ (make theme), it displays many menu items. I would like to display more than 6 items in one line, without changing items’ names. But I didn’t find where to modify the css’ menu in the customizer… Do you know where I could find it ? (which div ?)

    Thank’s a lot ??

    moyer4

    (@moyer4)

    You can’t modify the menu css in the customizer beyond the settings you see there.

    Go to Appearance->Editor to modify css. Best to use the child theme to avoid changes being overwritten if you update the main theme. Look for menu css in wp-content\themes\make\style.css to figure out what to modify.

    noahcryns

    (@noahcryns)

    Hello,

    Try:
    .site-navigation .menu li a, .site-navigation .nav-menu li a {
    font-size: Whateversizeworksforyou;
    }

    dwheitner

    (@dwheitner)

    The inspector (available by right-clicking in Chrome on the element of the page you’re interested in changing) can also be useful for id’ing which css code pertains to it. I *think* there’s a tutorial somewhere on Make’s site re: using the inspector. When I clicked on individual menu items in the website you referenced, it pulled up the same css style noahcryns referenced. In addition to font-size, there’s also a padding setting, per the example below. It appears that tinkering with the 2nd padding number adjusts the spacing b/t the menu items.
    And ditto what moyer4 said re: using a child theme if you’re going to edit your stylesheet.

    .site-navigation .nav-menu li a {
    padding: 1.1rem 1.6rem;
    }

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