Design primary menu

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
June 18, 2014 at 8:46 am #111841 Resolve

crcgtpc

Hello,

I would like to know if you can help me to apply the same “animation” of a menu title (primary menu) on an other menu title of the same primary menu.

Screen 1 : http://wp.me/a3A2tk-2Ai
Screen 2 : http://wp.me/a3A2tk-2Aj

As you’ll can see with these screenshots, when i move the mouse on “Agenda”, there is is a red bar that appears on the menu title (with grey background).

I would like to preserve the white barground of the menu title “La CGT en Poitou-Charentes” but that the red bar (same as “Agenda”) appears on to have the same animation for both menu.

I think it’s not very hard but when I apply the same kind of css line i use for “Agenda”, it don’t work…

Thx a lot for your help !

Br,

E.
The blog I need help with is cgtpoitoucharentes.wordpress.com

June 18, 2014 at 7:11 pm #152746
Sheri
The reason the CSS for the “Agenda” menu item doesn’t work the same way as it does for the “Les mandatés du Comité régional” menu item is because the custom CSS you used for both have been setup with the same background-color property.

Here is the current custom CSS for the “Agenda” menu item at the time of this writing:
```
#menu-item-9714 a:hover {

background-color: #B90504;

height: .4rem;

}
```
Here is the current custom CSS for the “Les mandatés du Comité régional” menu item at the time of this writing:
```
#menu-item-70 a:hover {

background-color: #fff;

}
```
So you can’t use the same method that you did for the “Agenda” item to add a red background color because the hover rules for the other items have a white background color. You can’t have both.

As a workaround, you could use borders instead. To make it so elements don’t jump around, you can add a border to the top and then change the color of the border on hover. Adding a bottom border to the “header-extra” elements works to expand the menu height by the same amount (4px in the example) so that the menu items don’t appear to jump outside of the menu area when on hover.

Here is an example you can try:
```
.primary-navigation li {

border-top: 4px solid currentColor;

}



.primary-navigation li:hover {

border-top: 4px solid red;

}



.header-extra {

padding-bottom: 4px;

}
```
Note that you will need to remove the other red background colors you had added to menu items without the white background in order to prevent a double line appearing for some elements.
June 19, 2014 at 7:55 am #152761

crcgtpc

It works well !! But the primary menu keeps the red bar in sub-menu and i dont want :/ …

You can see what i’m talking about there :

http://wp.me/a3A2tk-2AP

Is there a solution ?

Thx a lot :) :)

Br,

E.

June 23, 2014 at 9:54 am #152917

crcgtpc

I found a solution for this ;-) THx !

Br,

E.
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Design primary menu’ is closed to new replies.