Dropdown Menu Spacing – help!

  • sophocles11

    (@sophocles11)


    4 years ago

    Hi!
    I’m a (very new) web developper and have been building a site with Beaver Builder using the Astra theme. I have been completely stuck on how to reduce the spacing between the dropdown menu items – as I’ll be adding even more product categories, I want as many of them to fit on a computer screen as possible.

    Can anyone help me with this? I’m quite new to CSS…

    Thanks!

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Ian Sackofwits

    (@plantprogrammer)

    Hey, sophocles11,

    Feel free to play around with the values in this CSS sample code, which reduces the padding between each menu item:

    div.main-navigation ul.sub-menu > li.menu-item > a {
  padding-top: .5em;
  padding-bottom: .5em;
}
    Prabhat

    (@prabhatrai)

    Hey @sophocles11,
    You can add the below CSS styling under style.min.css file at the bottom to change the top-bottom spacing of dropdown items:

    .main-header-menu .sub-menu .menu-link {
    padding-top: .4em;
    padding-bottom: .4em;
}

    Path: wp-content/themes/astra/assets/css/minified/style.min.css

    mrtom414

    (@mrtom414)

    It’s probably better to add the code in the customizer additional css section. If you add it to your style.css file and the theme updates, you may lose the changes you made and have to start over again.

    Prabhat

    (@prabhatrai)

    That is the reason why we should always use child themes.

    mrtom414

    (@mrtom414)

    You can use the option in the customizer for adding CSS styles without creating a child theme. The Customizer is stored in the options table of the database. Updating themes and plugins will not effect it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Dropdown Menu Spacing – help!’ is closed to new replies.