Add Border Box to Main Menu Items

This post may contain referral links which may earn a commission for this site

Here's how to add a simple border round the main menu links in the Divi Theme's primary header.

The menu links in the Divi main header can be a bit tricky to style when it comes to borders. The reason for this is that Divi applies padding to the bottom of the links to control the height of the header itself (as the padding pushes the bottom of the header down). In CSS a border applied to an element surrounds the padding too. This means that a simple attempt to set a border on the menu links will result in a border that stretches from the top of the link to the bottom of the header – probably not what you want.

To solve this, we can change this extra bottom padding to extra bottom margin instead. The margin will still control the size of the menu, but allow a border to surround just the element and our choice of padding.

Here is the CSS code to achieve this. There are a few complications, which I explain below:

/* Add a border round main menu items */
@media only screen and (min-width: 981px) {

    #top-menu > .menu-item > a {

        /* Apply border */
        border: 1px solid #ccc;
        border-radius: 4px;

        /* Set size of border */
        padding: 8px !important;
        top: -8px;

        /* Correct the space below the menu */
        margin-bottom: 15px; /* (old padding-bottom) - (2 * new padding) - (2 * border width) = 33px-16px-2px */
    }

    /* Make space for submenu "arrows" */
    #top-menu > .menu-item.menu-item-has-children > a {
        padding-right: 16px !important;
    }

    /* Correct the position of the arrows */
    #top-menu > .menu-item.menu-item-has-children > a:after {
        top: 8px; /* Same as padding amount from above*/
    }
}

The first thing to pay attention to is the padding. This determines the size of the box round the menu links. Here I've used a padding of 8px, which means that there will be 8px of space between the menu link text and the edges of the box. To get this to work correctly, it's necessary to add this 8px in several places. As you'll see, "8px" appears in 3 places in the code above (once negative). Replace all of these with the same value if you want a different padding amount.

The next thing to deal with is the margin. You probably want the bottom of the header to remain where it is. This requires setting the margin equal to the original padding, but then removing the extra height added by padding and border we added. I've included the calculation in the comments in the code above – on my test site it worked out to 15px – but the easiest way is probably just to try a few different values until it looks the same as before.

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *