How To Create And Use Custom Taxonomies In Divi Tutorial by Pee Aye Creative 1

How To Add Vertical Divider Lines Between Menu Items In Divi

This tutorial will show you how to add vertical divider lines between menu navigation items in the Divi Menu module or the default menu.

Add Vertical Dividers To The Divi Menu Module

The first snippet here will apply to the Divi Menu module, so you probably will want to be using this in a header template in the amazing Theme Builder.

Using More Than One Menu Module

You don’t need to add any class to the module since we are targeting it, but if you want this effect to only apply to one menu module on your site, then replace the .et_pb_menu with your own CSS class and add that to the module’s CSS field in the advanced tab.

Copy the code snippet below and paste it in the Divi>Theme Options>Custom CSS box. If you want to learn more about adding code to Divi, be sure to check out our full guide on Where To Add Custom Code In Divi.

/*add borders to the menu items*/

.et_pb_menu nav > ul > li:not(:last-child) {
  border-right: 1px solid #2cba6c;
}


/*adjust spacing around menu items*/

.et_pb_menu li a {
  padding: 4px 20px;
}

Add Vertical Dividers To The Default Divi Menu

Even though I totally recommend using the new Divi Theme Builder and Menu module, I haven’t forgotten those of you who are still using the default header. The snippet is very similar to the one above, except the CSS property is targeting the default menu instead of the Menu module. The step here is exactly the same. Copy the code snippet below and paste it in the Divi>Theme Options>Custom CSS box.

/*add borders to the menu items*/

#top-menu li:not(:last-child) {
  border-right: 1px solid #2cba6c;
  margin-bottom: 20px;
}


/*adjust spacing around menu items*/

#et-top-navigation nav > ul > li > a {
  padding-bottom: 4px!important;
  padding-left: 20px;
}

Now you have vertical divider lines in your Divi menu!

Customize The Snippets

You may need to play around with the spacing in the snippets to fit your website. For example, you may need to change the margin and padding values to something that works better for your situation. Other than that, you should be good to go!

Be sure to check out our 20 other Divi menu tutorials!

15
Last updated Jan 3, 2021 @ 12:56 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

25 Comments

  1. Gio

    Simple and Cool!
    Thank u! 🙂

    Reply
  2. Nityia Przewlocki

    Works great–Thank you!!

    Reply
  3. Sebastian

    Hi, thanks for this tutorial. What about small vertical dividers in case logo inserted in menu module? Dividers are so height as logo…do you have any idea?

    Reply
      • Sebastian

        any idea?

      • Nelson Lee Miller (aka The Divi Teacher)

        Looks like you got it with the padding, I was going to say it but you beat me to it!

    • John

      I am also interested

      Reply
      • Nelson Lee Miller (aka The Divi Teacher)

        Hi John, you have to adjust the padding or assign a height. It’s impossible for me to put that in the code since every site is different. Send me the link and I’ll advise.

  4. Cynthia

    Thank you so much! It looks great except on the drop down menu items. Do you know how to exclude the sub-menu items for drop down menus?

    Reply
  5. Janis

    Great tutorial, thank you! 🙂 Is there any way to only add the divider between the last two menu items, not between all of them? Would be very useful for language switchers. Thanks! 🙂

    Reply
  6. Natasha Chapman

    Hi thanks for the tutorial, it works for the main menu but I actually only want it on my sub menu, is there a code to do that ?

    Reply
    • Hemant Gaba

      Could you please share the URL of the page where the submenu is present for us to investigate further?

      Reply
  7. Anneloes

    The dividers are still showing in my submenu. The last child is not showing a divider. Changing the code to “first-child” the first child is not showing a divider. That makes sense … but … how to remove the divider from al the items in the submenu?

    Reply
    • Hemant Gaba

      Hi Anneloes

      Could you please share the URL of the page for me to investigate further?

      Reply
      • Anneloes

        Hi!

        The URL is htps://fairdinkumsupport.nl

      • Hemant Gaba

        Please remove the present code that you are using and use the code given below instead:

        #top-menu > li{
        border-right: 1px solid #ec7034;
        margin-bottom: 20px;
        }

        Let me know how it goes. 🙂

      • Anneloes

        Yes! Problem solved. Thank you so much!

      • Hemant Gaba

        I am glad that the issue is resolved now. 🙂

  8. Leameana

    This works when I am in the theme builder but when I exit the theme builder my menu looks like a bulleted list what am I doing wrong?

    Reply

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart