How give more style on a CSS /Jquery Menu Bar

Question

Long time!! :)

I would appreciate if someone can help me with this, it's a jquery menu that I've been using for my website, I would like to know if it's possible to:

Menu Bar at Jsfiddle

• Put some vertical line separator on each option of the menu to separate them without being affected by the hover effect like the text option.

• add to the menu on the corner end on the right a small ''social media'' icons (img) each one directing to a specific link just like the text menu. The menu fits the website content (940px width) and has extra space but in the fiddle example it doesn't show.

• also important> is there a way to add a bigger text on the menu and make each menu word option bigger by stretching it? Looks pretty small.Horizontally I mean, vertically it stays the same.

It's important that the underline hover and the rest appears the same just like it's shown in jsfiddle without being affected by these possible changes.

I would deeply appreciate it!!! :)

Answer 1

There are a few CSS and markup changes you can make to achieve what you'd like

#example-one { margin: 0 auto; list-style: none; position: relative; width: 940px; font-family:Arial; }
#example-one li a { color: #bbb; font-size: 14px; letter-spacing:2px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; border-right: 1px solid white; }
#example-one li:first-child a { border-left:1px solid white; }

1. On the first line, you can add your font-family to change the font used in your menu.
2. On the second line, I added a border-right, and set letter-spacing:2px.
3. I added the third line to give a border-left to only the first item (so that you get the full appearance of separators).

Also I added this item to your list that you could easily insert a social media icon into:

<li style="float:right;"><a style="border:none;" href="#">Social Icon</a></li>

You can push it to the right side of the menu using float:right.

Here is an updated fiddle.