New Landing › How can we help? › Atelier › How to change header menu font color

Viewing 12 posts - 1 through 12 (of 12 total)
  • Back to forum
    Posted in: Atelier
  • June 29, 2016 at 11:13 pm #278239
    sharozdawa
    Member
    Post count: 18

    Sir, I want to change the header menu font color please help me with it I have also attached screenshot to understand well

    Attachments:
    You must be logged in to view attached files.
    June 30, 2016 at 3:58 am #278266
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Please use this custom css code:-

    nav .menu > li.menu-item > a, nav.std-menu .menu > li > a {
    color: #ff0000 !important;
}

    Thanks
    Mohammad

    June 30, 2016 at 7:14 am #278285
    sharozdawa
    Member
    Post count: 18

    Sir, where should i place this CSS?

    June 30, 2016 at 7:20 am #278288
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Please go to Admin > Theme Options > Custom CSS > Put the code here.
    Thanks
    Mohammad

    April 13, 2017 at 10:38 am #320864
    Guiseppe2000
    Member
    Post count: 6

    Hello Mohammad,

    I’ve got a follow-up question on this topic. Is it possible to have two different colors for the menu font on two pages? For instance, on the homepage I want the menu font to be white, on all the other pages I want it to be black?

    I think I have to copy the standard menu and name it for instance standardmenu2 and assign the black color to this menu via the custom css-code and then assign this menu to all the other pages. But what would the custom css-code look like then?

    Thanks in advance for your reply.

    April 13, 2017 at 10:57 am #320869
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi @Guiseppe2000,

    Can you share us your site url?

    -Rui

    April 13, 2017 at 11:02 am #320872
    Guiseppe2000
    Member
    Post count: 6

    http://www.atelier180.nl

    April 13, 2017 at 7:01 pm #321009
    David Martin – Support
    Moderator
    Post count: 20834

    Each page has a unique body class with a page ID added to it by WordPress, you can use this in CSS to target a specific page.

    For example, your shop page you can use this CSS:

    .page-id-15002 nav .menu > li.menu-item > a, nav.std-menu .menu > li > a {
    color: red !important;
}
    April 13, 2017 at 9:18 pm #321031
    Guiseppe2000
    Member
    Post count: 6

    Hello David,

    thanks, this is a big step ahead. I have two more issues I’d like to resolve:

    1) Can I also implement a css-code for a hover color for the menu?
    2) I’m also looking for a way to get specific colors for the logo and the icons used for social media / mail / search / shopping cart / etcetera on each different page. Could you help me out?

    Thanks so much!

    April 18, 2017 at 10:05 am #321284
    David Martin – Support
    Moderator
    Post count: 20834

    1) Yes. Use the CSS “hover” attribute.

    .page-id-15002 nav .menu > li.menu-item:hover > a, nav.std-menu .menu > li:hover > a {
    color: blue!important;
}

    2) Use the above method of applying the body class ID to the relevant CSS classes for those items. The CSS classes for each item can be found using Chrome web inspector tool.

    April 19, 2017 at 2:51 pm #321594
    Guiseppe2000
    Member
    Post count: 6

    Ok, thanks for the reply. I still have a small problem though. If I get back to my first question ‘the two different colors for two pages’-issue. When I change a color for a specific page through css, the problem is that the menu on the homepage changes color also. Since I can not find a page-id for the homepage, I cannot target it. Do you have another solution perhaps?

    On the pages where I have a naked header over a slider, I want the menu color to be white, on pages where I have a standard header with a white background, I want the menu to have a black color…

    April 19, 2017 at 3:00 pm #321596
    David Martin – Support
    Moderator
    Post count: 20834

    1) You locate the body ID class by looking in the <body> HTML attribute.

    2) You can choose Naked (light) or Naked (dark) for that.

  • Back to forum
    Posted in: Atelier
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register