How can I add a divider between menu items?

Tagged: ,

This topic contains 4 replies, has 2 voices, and was last updated by  LonelyViking 4 years, 7 months ago.

Author Posts

LonelyViking

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

Would appreciate some help 🙂

Thanks,

Shane


Sebastian

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

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

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

Perfect! Thanks Sebastian 🙂

You must login or register to reply to this topic.