Color in the menu

Home Forums Automattic Further Color in the menu

Viewing 20 posts - 1 through 20 (of 24 total)
  • Author
    Posts
  • #111561 Resolve

    crcgtpc

    Hello

    I would like to know if it’s possible to change color of one title in my primary menu (in order to highlight it) ?

    Thx a lot for your help !

    BR,

    E.

    The blog I need help with is cgtpoitoucharentes.wordpress.com
    #151672

    Kathryn P.
    Happiness Engineer

    Yes, it should be possible – let me know which specific menu item you want to highlight and I can help you with the custom CSS.

    #151928

    crcgtpc

    Hey !

    Il would like that in the left menu, “Le comité régional” be in red except when we move the mouse on (in white). And when we move the mouse on it, i would like that “L’actualité du comité régional” be in red.

    Is it possible ?

    Thx a lot !

    E.

    #151931

    Although it might be a bit confusing for some because of the inconsistent behaviour, I think this is what you asked for.

    .secondary-navigation .menu-item-322 > a,
    .secondary-navigation .menu-item-332 > a {
    color: #B90504;
    }

    .secondary-navigation .menu-item-322 > a:hover,
    .secondary-navigation .menu-item-332 > a:hover {
    color: #fff;
    }

    Please let me know if you need further assistance.

    #151942

    crcgtpc

    Hello !

    Thx for your answer :) In fact it’s the menu “L’actualité du Comité régional” who need to be red (not “Le rôle du Comité régional”).

    Br

    E.

    #151943

    crcgtpc

    PS : is it possible to have the little arrow animation (visible with Read more ->) for a menu item ?

    Br,

    E.

    #151950

    Oh, sorry. The below should do the job.

    .secondary-navigation .menu-item-322 > a,
    .secondary-navigation .menu-item-9252 > a {
    color: #B90504;
    }

    .secondary-navigation .menu-item-322 > a:hover,
    .secondary-navigation .menu-item-9252 > a:hover {
    color: #fff;
    }

    .menu-item-322 > a:after,
    .menu-item-9252 > a:after {
    content: "2192";
    position: relative;
    left: 2px;
    }

    .menu-item-322 > a:hover:after,
    .menu-item-9252 > a:hover:after {
    left: 7px;
    }

    #151996

    crcgtpc

    Oh ! It’s great !

    Thx a lot ! :)

    I have an ultimate question. Is it possible to change the color of the rectangle in wich is the text “Le comité régional” in order to highlight it like in the Tweenty Fourteen theme ? Idem for “L’activité du Comité régional”.

    The arrow used in twenty fourteen is available for the item menu of Further ? (Like the one who add for me ?)

    Thx a lot :)

    BR,

    E.

    #151999

    crcgtpc

    I found the item menu !

    But i always have a problem to color the primary and secondary menu in order to have the same design as Twenty Fourteen theme. I’m sure that’s possible to keep the grey color and have red color when we move mouse on the menu (and text in white).

    Thx for your help !

    Br,

    E.

    PS : is it possible to add the same arrow after “La CGT au CESER”, after “Le rôle du CESER” and after “La CGT en région” ?

    #152013

    Kathryn P.
    Happiness Engineer

    PS : is it possible to add the same arrow after “La CGT au CESER”, after “Le rôle du CESER” and after “La CGT en région” ?

    To add the arrow next to any menu item that has a sub-menu, you can tweak the code that Takashi gave you earlier so that it no longer targets specific parent menu items, but instead targets all menu items with sub-menu items. So remove this:

    .menu-item-322 > a:after,
    .menu-item-9252 > a:after {
    content: "2192";
    position: relative;
    left: 2px;
    }

    And add this instead:

    .menu-item-has-children > a:after {
    content: "2192";
    position: relative;
    left: 2px;
    }

    #152014

    Kathryn P.
    Happiness Engineer

    Is it possible to change the color of the rectangle in wich is the text “Le comité régional” in order to highlight it like in the Tweenty Fourteen theme ? Idem for “L’activité du Comité régional”.

    Using the Firebug browser inspector I see that the menu item “Le comité régional” has the class: menu-item-322

    This means you can target it with CSS to change the background colour with some code like this:

    .menu-item-322 {
    background-color: #xxxxxx;
    }

    Just replace xxxxxx with whatever colour code you like.

    You can add the same background colour to other menu items by adding them to the above code like this:

    .menu-item-322,  .menu-item-xxx{
    background-color: #xxxxxx;
    }

    Just replace xxx with the actual menu item number, which you can find by using a browser inspector or viewing the page source.

    #152015

    crcgtpc

    Hey ! Thx for your help. i notice that there is no animation for the arrows with

    .menu-item-has-children > a:after {

    content: “2192”;

    position: relative;

    left: 2px;

    }

    whereas there is animation for the first title menu “Le Comité régional”. How can i do this animation for the others menus with arrows ?

    #152016

    crcgtpc

    PS : for the primary menu (top) i would like to have a different arrow, is it possible to change or i must keep the arrow used on the secondary menu (left) ?

    #152024

    Kathryn P.
    Happiness Engineer

    The “animation” is actually just an optical illusion. It’s side effect of some additional code you have, which applies to a few of your sidebar menu item:

    .menu-item-322 > a:hover:after,
    .menu-item-9252 > a:hover:after {
    left: 30px;
    }

    You can modify the above code to apply to the second menu item (.menu-item-549) as well, by changing it to this:

    .menu-item-322 > a:hover:after,
    .menu-item-9252 > a:hover:after,
    .menu-item-549 > a:hover:after{
    left: 30px;
    }

    The third menu item is already as far to the right as it can go.

    549

    #152025

    Kathryn P.
    Happiness Engineer

    PS : for the primary menu (top) i would like to have a different arrow, is it possible to change or i must keep the arrow used on the secondary menu (left) ?

    You can use the code for any entity you like.

    So you’d just change the number 2192 in this line:

    content: "2192";

    to another entity number in the Unicode column, using the chart here as a reference:

    http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

    #152028

    crcgtpc

    Thx for the secondary menu ! I works well !

    But for the menu at the top, i’m not able to put the down arrow for “La CGT en Poitou-Charentes” and “Les mandatés du Comité régional”. Can you help me ?

    BR,

    E.

    #152029

    Kathryn P.
    Happiness Engineer

    You’ll need to first identify the class that each of those menu items is using. You can use a browser inspector to find the class, so you can then target the class with CSS. Since you’re doing a lot of menu customization it would be good for you to learn how to find the class. :-)

    Here’s a guide to doing that:

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    Let me know how it goes!

    #152063

    crcgtpc

    Thx a lot for your help !

    I would like change the content: “2192”; by an other JUST for elements in the primary menu (La CGT en Poitou-Charentes and Les mandatés du Comité régional). Can you help me ? The one i want to use is : 25be

    Br,

    E.

    #152064

    crcgtpc

    PS : FIrebug is efficient !

    #152074

    Kathryn P.
    Happiness Engineer

    So by using Firebug, can you see that those two menu items have the class menu-item-82 and menu-item-70?

    Screenshot: https://cloudup.com/ckQUlViBPj8

    That means you can target them like this:

    .menu-item-82 > a:after, .menu-item-70 > a:after  {
    content: "25be";
    }

    If you need help with anything else, please start a new thread as this one’s gotten super long. Thanks!

Viewing 20 posts - 1 through 20 (of 24 total)

The topic ‘Color in the menu’ is closed to new replies.