Support » Theme: evolve » How to Change the Color of Navigation Bar / MenuBar

  • Hey there,
    I am pretty new around here and of course brand new working with WP. I am trying to create a little website for video games, Comiccons events and any related in general. I was reading so many suggestions on this forum and was able to start creating my site but i am afraid i am not doing a really good job.
    I selected Evolve as my theme and its great but i would like to customize it more, for example i would like to change the Color of the Navigation bar meaning when somebody is moving between the menu options it lights up or something like that. I was trying for 2 days playing with custom CSS suggested in other places and also tried due the Editor feature but somehow any change made on it don’t reflect in the actually site.

    Also i will appreciate if any of you gives me some ideas in how is the best way to set my web composition. Thank you in advance

    Here my Website: http://gamesycomic.com/

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hi,

    Please use the following in Theme Options -> Custom CSS
    It will change the menu item (word) color to red and background to yellow when you hover over it.
    Use this code as a guide to achieve your own hover effect.

    #nav ul li a:hover{
    color:red !important;
    background:yellow !important;
    }

    Thanks!

    Thread Starter Acueva

    (@acueva)

    Oh man you Rock!!! last question tho if you don’t mind. I seem that in some websites this navigation color change also applies to the sub articles under that menu, will this code also extend that to any sub article or sub option under the menu? please your thoughts and thank you again in advance.

    Hi,

    Almost the same codes, but add another ul li

    #nav ul li ul li a:hover{
    color:red !important;
    background:yellow !important;
    }

    Thanks!

    Denzel, I am actually trying to change the color of other font but will look for that next. This caught my eye because changing the nav bar color was next on my list. I tried putting exactly the code above in the Custom CSS and absolutely nothing happened.

    Website is at http://www.marlissmelton.com
    Thanks!
    (And if you can tell me for my next question if there is a thread for changing the font color of the “Read Me” text under the Frontpage Content Boxes, I would appreciate that, too. I’ll keep looking.)

    Hi,

    Please remove any existing custom css that does not work, it can affect other styles.

    Please use the following in your Theme Options -> Custom CSS

    #nav ul li a:hover{
    color:red !important;
    background:yellow !important;
    }
    #nav ul li ul li a:hover{
    color:red !important;
    background:yellow !important;
    }

    I tried while viewing your site in firebug, the above solution works.
    Please see screenshot. http://prntscr.com/855e0p

    As for changing content box read me button font color.

    .home-content-boxes .read-more {
        color: yellow !important;
    }

    http://prntscr.com/855esg

    You only need to change the words yellow, and red to any color hex code that you need. http://www.w3schools.com/html/html_colors.asp

    Thanks!

    Thanks Denzel. I stupidly thought the nav code above was for changing the nav when regular, not on hover. So when I tried it before, I just didn’t see the nav entries change because I wasn’t hovering over them.

    I’ve got it now. Also, I had figured the read-more code from the forum here, but thank you. There is so much great info here. Lovely theme.
    Thanks.

    Thread Starter Acueva

    (@acueva)

    Denzel,

    You rock man…Sorry for the delay work has been really busy

    Thanks

    I recently lost my Menu colors in Evolve (after an update on 29 April 2016.) I need help in changing the page menu colors: the fonts are very light brown or gray on a light background. When I put my mouse over a page, the font turns white and is almost invisible. I’m trying to get a fix through the theme author, but discovered Denzel’s instructions on Theme Options -> Custom CSS. Will this mess up my Evolve theme? I have a child theme. Would I edit the Child theme?

    Getalife,
    I’m having the exact same issue you are. The evolve theme update from 3.0.5 to 3.0.6 hosed my menu colors. I tried creating a child theme and using the custom CSS above, it didn’t work for me. Any ideas?

    Thanks in advance.

    Hi KnightWolfJK,

    Please open a new thread, if you need help.
    You will need to post your website URL as well as details of the help you need.

    Thank you

    Thank you, Denzel Chia! I have been looking for this information ALL DAY! Right when I was going to throw in the towel, I found this forum!

    Hi @recf2f,

    You are welcome! Glad you find it useful.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How to Change the Color of Navigation Bar / MenuBar’ is closed to new replies.