How do you create menu dividers in WordPress?

how to create menu dividers in WordPress and Elementor Pro

Have you ever built out a navigation menu and thought you wanted to give it a little more appeal with a divider line between each menu item? WordPress doesn’t naturally have a way to do that so you have to manipulate the code a bit. So I’m going to show you the easy code to get the lined menu look like this example below.

NOTE: In my example, I’m using WordPress with Elementor Pro. You may need to make adjustments depending on whether you are using a theme or some sort of builder as they are set up differently, however, this will get you where you need to start.

screenshot of a WordPress menu that has divider lines between the menu items

In the example I’m going to show you, I’m targeting a specific menu. I have several menus on my site but I just want the primary header menu to display the lines. Here is the code and following the code, I’ll explain the method behind the madness. But it’s really pretty simple.

#menu-1-894814e .menu-item:not(:last-child) a {
border-right: 1px solid #ededed;
padding:5px 10px 5px 5px;
}
#menu-1-894814e .menu-item:last-child a {
padding:5px 3px 5px 5px;
}

So simple, right?

Now let me explain this more for those who are new to coding. I know it’s easy just to paste it in but take a few minutes to understand it.

What does the above code do?

There are two lines of code. The first line of code gives you that colored divider between each menu item EXCEPT the last item or “child”.

The second line of code in a nutshell aligns the last menu item with the other menu items. This again depends on how your menu is coded. See you applied styles to all the others and made the last item a lone wolf of sorts so it needs padding adjusted to it so it matches the others. Just try deleting that last line of code from your CSS and see what I’m talking about (if using Elementor Pro).

Targeting a specific menu in WordPress

As I mentioned before, I was wanting to only style the main menu on my site. In order to do that, you have to know the ID for that menu. IDs are given to specific elements. This makes it easy for you to style it and manipulate it on an individual bases. Here is how to do that. I am using Chrome but you can use any editor. I’m also using the code from a random site as our example.

  1. Go to your website and right mouse click on the menu and select “inspect”.
  2. You’re going to see a lot of code. If you’re new to coding, it might be a bit overwhelming so trial and error won’t hurt you.
  3. What you are looking for is your main menu element so you can grab the ID.

    screenshot of menu code in WordPress

  4. I have highlighted the main menu ID on the WordPress website. You will see something similar to this on your site. If you’re using a builder like Elementor or Divi, you’re going to have to wade through all their code but this is what you’re looking for. 
  5. In the code example above, replace the ID I have for my menu with the ID for your menu.
  6. You’ll now see the divider lines on your menu.
  7. You will need to play with your menu padding in general to get the dividers how you want them.
  8. Also to change your divider color, you want to replace the HEX code number I have with the color you want.

Using Elementor and Elementor Pro to add dividers in your navigation menu

If you’re using Elementor and Elementor Pro, the above still applies WITH ADJUSTMENTS. Elementor handles all your padding so you will upload an edited version of this which looks like this:

#menu-1-894814e .menu-item:not(:last-child) a {
border-right: 1px solid #ededed;
}
#menu-1-894814e .menu-item:last-child a {
padding:10px 5px 5px 5px;
}

View of the main menu styling tab in Elementor Notice I stripped out the padding in the first line of code because that’s being handles in the “style” area of the main menu in Elementor Builder.

However, in this case, that second line of code is important because as you can see, your last menu item is not in alignment with the other menu items because you removed the styling for the last menu item or “child” in the first line of code. Here is how you get it in Elementor.

  1. Navigate to “Templates” and then “Theme Builder”.
  2. Select your header menu and edit it in Elementor.
  3. Copy your code and then select just the nav menu, not the column, and then go to the “Advanced” tab and paste this code into the “Custom CSS” tab.
  4. It may not look exactly right depending on how you built your menu so under the “style” tab, make adjustments to the “padding” and “space between”.
You have to take a slightly different route depending on what you are using. This code should help you get a starting point if you’re new to coding.

Recommended Posts