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.
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.
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).
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.
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;
}
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.
CONTACT
(469) 322-8745 or via our contact form
Located in Tampa, FL 33615.
Serving businesses everywhere.