WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How To Change Main Menu Colour in CSS (20 posts)

  1. CyberSketch
    Member
    Posted 1 year ago #

    Hi,

    Could someone please assist me in changing my Main Menu colour on the following website http://www.nmsi.co.za . I have been struggling to find where exactly in css stylesheet to change it. I would like to make the menu colour Black #000000 and the hover colour gold #edbd00.
    Your speedy reponse would truly be appreciated.

    What I See in my CSS

    [no need to post CSS code - it's all visible on your site]

  2. CyberSketch
    Member
    Posted 1 year ago #

    I am sorry for not putting the code in backticks. Also the theme I am using is "Target"

  3. Matthew
    Member
    Posted 1 year ago #

    Try

    .sf-menu a, .sf-menu a:visited {
        color: #000;
    }
  4. Matthew
    Member
    Posted 1 year ago #

    You can change the #000 to any color you won't.

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You should not modify theme files directly as your changes will be overwritten when the theme is updated. Instead use a Custom CSS plugin and add the code there.

  6. CyberSketch
    Member
    Posted 1 year ago #

    Thanx guys that was really quick.. Awesome.. ill try this code above and see if it works..

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Are you wanting the text to be black? If so, this would be the code to add to custom CSS:

    ul.dropdown a:link, ul.dropdown a:visited {
        color: #000000;
    }

    For hover add this piece and change the color:

    ul.dropdown a:hover {
        color: #AAAAAA;
    }
  8. CyberSketch
    Member
    Posted 1 year ago #

    ok added the code under title menu bar in Css, It aint working.. Please advise where exactly i need to place the code. Sorry.

    /*menu bar*/
    /*////////////////////////////////////////////////////////////////////////////////////////////*/
    
    #menubar {
    	float: left;
    	z-index: 99;
    	margin: 27px 20px 0px 0px;
            position:relative;
    	width: 600px;
    .sf-menu a, .sf-menu a:visited {
        color: #000;
  9. Matthew
    Member
    Posted 1 year ago #

    Did you try the code?

  10. Matthew
    Member
    Posted 1 year ago #

    You need to place it in the Custom CSS box under Appearance > Theme options

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    First, do NOT modify your style.css file - add this plugin-
    http://wordpress.org/plugins/custom-css-manager-plugin/

    Second, that code is useless in your theme/site - CSS is theme/site specific.

  12. alchymyth
    Forum Moderator
    Posted 1 year ago #

    the links seem to be styled in /css/default.css

    try to overwrite this (in your theme's custom css section ?) with:

    ul.dropdown a:link, ul.dropdown a:visited { color: #000; }
    ul.dropdown a:hover { color: #edbd00; }
  13. Matthew
    Member
    Posted 1 year ago #

    Can't you just put it in the custom CSS box on your Dashboard?

  14. Matthew
    Member
    Posted 1 year ago #

    What color do you won't it to be?

  15. CyberSketch
    Member
    Posted 1 year ago #

    Hi WPyogi !!! Thanks so much its working now. changed it to black.
    @kidsguide thanx for trying buy your code did not work.

  16. CyberSketch
    Member
    Posted 1 year ago #

    you guys can see the end result http://www.nmsi.co.za thanx again so much!

  17. CyberSketch
    Member
    Posted 1 year ago #

    OH NO! just noticed when i scrolled down it affect the yellow are below, it moved way to the left. how do i fix that guys please?

  18. CyberSketch
    Member
    Posted 1 year ago #

    ok got it fixed thanx ;)

  19. CyberSketch
    Member
    Posted 1 year ago #

    You guys have been great! Thanx

  20. Matthew
    Member
    Posted 1 year ago #

    Glad we could help

Topic Closed

This topic has been closed to new replies.

About this Topic