Design primary menu

Home Forums Automattic Further Design primary menu

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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
    #152746

    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.

    #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.

    #152917

    crcgtpc

    I found a solution for this ;-) THx !

    Br,

    E.

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

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