How to adjust the width?

[web_editor]

How to adjust the width of main nav? And display it to the right? Like this and insert the symbol “|” in every menus

Here’s the CSS

Here’s the link of the site

[Paulie_D]

Firstly, I don’t use the pipe (|) symbol as a delimiter/separator.

It’s not semantic and isn’t accessibility friendly for screen readers and there are better options (a right/left border for one).

To make the links ‘larger’ add padding

If you want it on the right, don’t float it to the left, float it to the right….obvious really.

[web_editor]

How to reduce the width of bg color of main nav?

[Paulie_D]

Seems to be defined here

.main-navigation {
clear: both;
display: block;
font-weight: 300;
font-family: 'Arial', 'sans-serif';
font-size: 9px;
position: relative;
border-bottom: 3px solid #787878;
background: #787878; /* here */
margin: 0 auto;
text-align: center;
float: right;
}

So it covers the whole div.

[web_editor]

I try to put this width:50% but the nav is expanding to the left

[Author]

Posts