Adding margin to primary menu

  • I’m using responsive theme on the site https://www.acl-tx.com.

    When hovering on top of the “Home” item in the menu, the edges become square rather than round. I want to make them round at that point as well.

    To achieve that I want to create a margin between the “Home” section on the menu and the edges of the menu – like on https://www.segurossinbarreras.com/EN/.

    Does anyone know what changes I need to make to the code to achieve that (or keep the round edges without the margin).

    Thanks for the help.

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

  • Hi Raz,

    The rounded corners are on the list element itself (the ‘ul’ tag). When you hover over the Home link in your menu, it’s the link element (the ‘a’ tag) that gets a new background.

    What you need to add is rounded corners on the link element, when hovered over. So:

    #menu-main-menu .menu-item-home a:hover { border-radius: 5px 0 0 5px; }

    The gap between the rest of the menu items is a separate issue, but is quite easy. Adding margin between the list item elements (the ‘li’ tags) or the link elements won’t do anything, as the blue background you can see is “behind” them on the list element (the ‘ul’).

    Currently there’s a red border, with this code:

    .menu a { border-left: 1px solid #585858; ...(more styling after this) }

    If you make the border thicker and change the colour to white (#FFFFFF) the same as your background colour, this will give the effect you’re looking for.

    Hope that helps.

    Pete.

    Thread Starter raz_roni

    (@raz_roni)

    Thanks, Pete. Apologies for the slow response – I didn’t get a notice when you posted the response.

    Where do I add the:
    #menu-main-menu .menu-item-home a:hover { border-radius: 5px 0 0 5px; }

    On the menu items – the gap is fine, what I thought is create a gap between the left edge and the “Home” button and then the rounded edge issue will go away.

    Thanks,
    Raz

    Thread Starter raz_roni

    (@raz_roni)

    Pete – I did find where to put it and it works great. Thanks for your help.

    Raz

    Hi Raz,

    Glad you managed to track it down – self discovery leads to great CSS techniques! ??

    You’re very welcome.

    Pete.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding margin to primary menu’ is closed to new replies.