Styling Menu Items (Margins)

  • Resolved andynick

    (@andynick)


    3 years, 10 months ago

    I want to add a border to items in the main menu in the header of my page.
    I managed to achieve that with this CSS:

    li.menu-item {
    border: 0.5px solid blue;
    border-radius: 6px;
    max-height: 3.0rem
    }

    Unfortunately though, I wasn’t able to create any margin space between the links, so the borders are touching. I’d love to be able to create a small space between them if I can.
    I’m also not happy with the top and bottom padding on the menu items, too.
    Any help will be very welcome!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Oliver Campion

    (@domainsupport)

    No problem, I’d probably use this instead …

    .primary-navigation .primary-menu-container > ul > .menu-item {
border: 0.5px solid blue;
border-radius: 6px;
max-height: 3rem;
margin: 0 0.5rem;
}

    … which will also make sure that the menu items you target are those in the primary nav. It’s also probably why your attempt to change the margin didn’t work.

    Let us know if that helps?

    Oliver

    Thread Starter andynick

    (@andynick)

    Thank you so much, Oliver – that worked very well!

    Plugin Author Oliver Campion

    (@domainsupport)

    Great, I’ll mark this one as “resolved”.

    Oliver

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Styling Menu Items (Margins)’ is closed to new replies.