A lot of our Divi Menu tutorials have been functional, while fewer of them have been about style and design. This tutorial will add some style to your Divi menu! I will show you how to add vertical divider lines between the menu items.
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!
I hope you have enjoyed learning How To Add Vertical Divider Lines Between Menu Items In Divi. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
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.
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?
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.
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! 🙂
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?
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;
}
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
In this tutorial, I will show you how to create a backup of your Divi website and explain why they are so helpful and important.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
Simple and Cool!
Thank u! 🙂
You’re welcome!
Works great–Thank you!!
Perfect, glad you found this useful! 🙂
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?
Hi Sebastian,
If you share the link I can take a look!
https://server777937.nazwa.pl/nowe_www/banimex/
any idea?
Looks like you got it with the padding, I was going to say it but you beat me to it!
I am also interested
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.
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?
Hi Cynthia, great question, I updated the code so that it does that by default now, like .et_pb_menu nav > ul > li:not(:last-child)
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! 🙂
Hi Janis,
There is always a way. You might try adding a custom CSS class to the menu items and target them that way.
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 ?
Could you please share the URL of the page where the submenu is present for us to investigate further?
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?
Hi Anneloes
Could you please share the URL of the page for me to investigate further?
Hi!
The URL is htps://fairdinkumsupport.nl
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. 🙂
Yes! Problem solved. Thank you so much!
I am glad that the issue is resolved now. 🙂
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?
That issue would not be related to my tutorial, but rather to Divi. You should contact their support about that.