WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Changing color at navigation bar on HeatMap Theme (8 posts)

  1. Eugenelds
    Member
    Posted 2 years ago #

    Theme used: HeatMap Theme Pro

    Dear wordpress support experts,

    I have a problem in which i can't change the color of my navigation bar. The current color shown is GREY. I would like to change the color of the bar itself and font color.

    I have basic experiences in CSS Sheet but i can't seem to change anything to make it work. Please advice. Many thanks in advance.

    Click Here to view my site.

  2. Ziv
    Member
    Posted 2 years ago #

    Go to line 2572 in your style.css and change the following code:

    .header-classic-css #nav-bar-wipe,
    .header-classic-css #cat-bar-wipe {
    	width: 980px;
    	margin: 0px auto 0px;
    }

    to this code:

    .header-classic-css #nav-bar-wipe,
    .header-classic-css #cat-bar-wipe {
    	width: 980px;
    	margin: 0px auto 0px;
    	background: #YOURCSSCOLOR;
    }

    Now all you need to do is just edit "yourcsscolor" to whatever color you want. Try using this webpage when choosing your color.

  3. Eugenelds
    Member
    Posted 2 years ago #

    Hi Ziv,

    It works perfectly! A billion thanks for your prompt and spot on response!:)

  4. chzumbrunnen
    Member
    Posted 2 years ago #

    How did Ziv find out, that you need to change something below line 2572? Probably because he used a tool like Firebug or simply the "Inspect Element" function of Firefox:

    In Firefox (since v12, I think)
    Rightclick on the Navbar / Inspect Element
    Show Styles (button in bottom bar)

    see Screenshot here:
    http://chruezundquer.ch/wp-content/uploads/2012/07/2012-07-03_09-14-32.png

  5. Eugenelds
    Member
    Posted 2 years ago #

    Hi chzumbrunnen, well written and clearly understood. It is very helpful of you to share such a good source of info to get to know a website better! Cheers~ :)

  6. Ziv
    Member
    Posted 2 years ago #

    I used inspect element with google chrome. It's not as good as firebug but it works.

  7. chzumbrunnen
    Member
    Posted 2 years ago #

    The most important functionality of firebug (at least for me) is nowadays available directly in the integrated web developer tools of Firefox, Chrome and Safari. The "Inspect Element" function in Firefox became my favorite in the last few days and I'm glad it helped Eugeneids.

  8. stupid3gp
    Member
    Posted 2 years ago #

    Thanks for the details.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags