Menu separator

Eric05

Hello Air,

how to stretch the menu separator? I'd like to have a full dotted line between the main menu items, can you give me some css indications?

Thank you

Air

Hello:-)
Please use this CSS

.top-menu > li:after {
    left: 0;
    margin-left: 0;
    width: 100%;
}

With regards.

Eric05

Thank you ! Some more questions :

how to have a dotted line ?

how to reduce the width of the rectangle that appears on hover, and the rectangle displayed on the current menu item (because I use a 80% width kine and I'd like the rectangle to be the same width)?

Thank you

Air

For dotted line you will have to edit above style to

.top-menu > li:after {
    left: 0;
    margin-left: 0;
    width: 100%;
    background-color: transparent;
    border-bottom: 1px dotted #FFFFFF;
}

For other part of question please post live link, so I could see what you have now.

With regards.

Eric05

Thank you; it works !

URL : http://www.photographe-gap.org/

Air

Instead of setting previous style to 80% I would edit this :

#access .top-menu {
    margin: 0 -40px;
}

Edit -40 in range -40 : 0 and you will get results desired;-)

With regards.

Eric05

Not able to make it work! The dotted line overflows right or left. And for the colored rectangle when the item is hovered, how to reduce it?

Thank you

Air

Please use only styles I gave. Your modifications are messing. For line use code from two posts above http://support.apollo13.eu/discussion/comment/6121#Comment_6121

for width of menu use

#access .top-menu {
    margin: 0 -20px;
}

You might also be interested in reducing padding:

.top-menu > li > a{
    padding: 7px 10px;
}

Hope you will get results this time:-)

With regards.

Eric05

Yes ! I got it! Thank you very much for your patience!!!

Eric05

Well actually one last thing... How to change the color of the white rectangle on hover and selected item?

Thank you

Air

:-)

.top-menu li.current-menu-item > a {
    color: #33182F;
}

With regards.