Menu on two lines needs tightening up.

  • Resolved ianbertramuk

    (@ianbertramuk)


    3 years, 4 months ago

    I’m using WooCommerce and the Storefront theme. I’ve tried to reduce the number of item in the main menu with submenus, but it still runs over two lines with a wide space between them. I’ve tried the CSS code below, which I got from a post on the sme topic about two years ago, but it makes no difference. I don’t really know CSS so need all the help I can get.

    Ideally I would like slightly less space between the individual menu items and for the two menu lines to be closed up.

    .storefront-primary-navigation .site-header-cart {
    margin-top: -220px;
    }

    .storefront-primary-navigation .main-navigation {
    width: 100% !important;
    }

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

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

  • Hello @ianbertramuk ,

    If I understand correctly, you want to show the menu items in one line. However, now they are showing in two lines, right?

    The Storefront theme gives 73% of the width to the menu and the rest to accommodate the cart buttons as you can see here: https://d.pr/i/xGVcyW

    If you want to increase the width of the menu area you can use:

    @media (min-width: 768px) {
    .woocommerce-active .site-header .main-navigation {
        width: 100%;
    }
}

    This will push down the cart buttons under the menu area. You can push back it to the top using negative margins as you found in your example but it’s not highly recommended actually:

    @media (min-width: 768px) {
    ul#site-header-cart {
        margin-top: -106px; */
    }
}

    You can control the padding on both sides of the individual menu items like this:

    @media (min-width: 768px) {
    .main-navigation ul.menu>li>a, 
    .main-navigation ul.nav-menu>li>a {
        padding-right: 1em;
        padding-left: 1em;
    }
}

    You need to add this CSS in your Appearance > Customize > Additional CSS field.

    I hope this information helps.

    Please note that our CSS support is limited, you can check this CSS basics tutorial to be familiar with how to use the CSS according to your need: https://wordpress.com/support/css-basics/

    Thank you ??

    Hi @ianbertramuk,

    I hope you managed to get the menus displaying as intended. We haven’t heard back from you for a while, so I’m going to mark this post as resolved.

    If you need any further help here, please let us know. Or, if you need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there.

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Menu on two lines needs tightening up.’ is closed to new replies.