Home › Forums › Automattic › Further › Design primary menu
-
AuthorPosts
-
crcgtpcHello,
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-2AjAs 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.comJune 18, 2014 at 7:11 pm #152746
SheriThe 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
crcgtpcIt 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 :
Is there a solution ?
Thx a lot :) :)
Br,
E.
June 23, 2014 at 9:54 am #152917
crcgtpcI found a solution for this ;-) THx !
Br,
E.
-
AuthorPosts
The topic ‘Design primary menu’ is closed to new replies.