Add divider to last menu item in child theme

Hey there,

You may want to try and use css for that. I did a search for “last-child + css” (without the quotation marks) and came up with a whole slew of information. For example:

https://www.w3schools.com/cssref/sel_last-child.asp

You may also want to try and the Foundation forums as the top-bar is part of Foundation:

https://foundation.zurb.com/forum

Hope this helps. If you like WP-Forge, remember, add a review. Enjoy!

Yes, I really like wp-forge’s menu as it is works pretty neat with offcanvas. Thanks alot for your theme Thomas! As the li.divider is in front of each list item, how can we also add it to the last item in the menu only?

Using 'after' => '<li class="divider"></li>', adds an additional

• behind each menu item but no problem as you said we can use CSS to select all except the last child and with display:none will do the trick. But after adding 'after' => '<li class="divider"></li>', to wp nav menu, the dropdown is disabled. Would you know why is this happening?

Sorry if I am unclear, thanks a lot for your advise.

Hey there,

Well first off you add 'after' => '<li class="divider"></li>' as you can see it will cause problems. Why? I do not know as I did not develop Foundation. That is something you have to ask the Zurbians. It may be because what your adding conflicts with how the top-bar js is written.

So I followed the link above and clicked on https://www.w3schools.com/cssref/sel_last-child.asp

then I opened up the style sheet, played around for about 5 min and came up with the following:

.top-bar-section ul li:last-child {
  border-right: solid 1px #4e4e4e;
  border-bottom: none;
  border-top: none;
}
.top-bar-section ul li li:last-child,
.top-bar-section ul li li li:last-child,
.top-bar-section ul li li li li:last-child
.top-bar-section ul li li li li li:last-child,
.top-bar-section ul li li li li li li:last-child {
  border:none
}

This gave me a line or divider on the last menu item. This also added a line on the last menu item in the drop down do I added the extra css to keep this from happening.

All it takes is just a little effort amigo. Hope this helps, and please leave a review of WP-Forge. Enjoy!

Wow, Thomas thanks a lot! Never thought of targeting each individual menu item! I am over thinking this to add new class and then targeting all menu item except the last-child. Thank you so much you are awesome, just like your theme. (:

You are very welcome.