How can I add a divider between menu items?

Tagged: ,

Author Posts

LonelyViking February 6, 2018 at 9:33 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

I am looking for a way to add a dot • between menu items in the main menu.

Would appreciate some help 🙂

Thanks,

Shane

Sebastian February 7, 2018 at 10:55 am

Hi Shane,

You have a few options here. One would be to create a dot graphic, and then add it as a background image via the Background property group. You can positionthe dot using the background-position property. And set background-repeat to no-repeat.

Another option is create an ::after pseudo element. The advantage being that you don’t have to create the dot in a graphics program. The following video shows to to create a pseudo element selector for the dot and then position and style it:

http://somup.com/cFni6mVyA9

Note: many of the CSS styles applied to the pseudo element in the video are necessary to make the pseudo element appear (e.g. setting the content property with empty ‘ ‘, width/height, and position:absolute).

Also, remember to turn off the ::after selector modifier when you next create a selector.

LonelyViking February 7, 2018 at 8:27 pm

Thanks so much! That was super helpful. How can I get the last-child not to have the dot though? I tried to do it using the same principles in the video, but couldn’t seem to get it right.

Sebastian February 9, 2018 at 12:11 pm

Oh that’s great to hear.

Here’s another video showing how to override the ::after style set on all menu items, on a single menu item:

http://somup.com/cFnQlQVyWw

(create a selector for the single menu item using ::after again, and just set the width to 0 to hide it)

Cheers,
Sebastian

LonelyViking February 9, 2018 at 8:53 pm

Perfect! Thanks Sebastian 🙂

You must login or register to reply to this topic.