WordPress.org

Ready to get started?Download WordPress

Forums

Adding margin to primary menu (5 posts)

  1. raz_roni
    Member
    Posted 1 year ago #

    I'm using responsive theme on the site http://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 http://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.

  2. petegale
    Member
    Posted 1 year ago #

    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.

  3. raz_roni
    Member
    Posted 1 year ago #

    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

  4. raz_roni
    Member
    Posted 1 year ago #

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

    Raz

  5. petegale
    Member
    Posted 1 year ago #

    Hi Raz,

    Glad you managed to track it down - self discovery leads to great CSS techniques! :)

    You're very welcome.

    Pete.

Topic Closed

This topic has been closed to new replies.

About this Topic