Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+6 votes
in Q2A Core by
edited by

enolez.comI am trying to change qa-nav-main-link and qa-logo-link  ​background color! I have already changed the css code of "qa-nav-main-link" and "qa-logo-link" but it doesn’t works. I have attempted many times but I can't understand why its not working! 

qa-nav-main-link css: 


qa-logo-link css: 


How can I change this color? 

Q2A version: 1.8.3
edited by
We're not sitting in front of your computer, so you need to show us what exactly you modified. Please edit your question and show the changes you made to the CSS. Did you inspect the elements in question with your browser's dev tools? What does that show?
Yes I inspected the elements with browser's dev tools.

I added  screenshots of css those I modified. See!

3 Answers

+1 vote
selected by
Best answer

First some general advice. The name of the CSS class is apparently qa-nav-main-link, not header-nav-main-link. Please get these things right in your questions, otherwise people won't know what you're talking about and you may get incorrect advice. Also, you should make sure all of your style definitions are terminated with a semicolon (I see several that aren't in your screenshots).

Now, if you just want to set a background color I'd recommend using the specific attribute background-color instead of the shortcut background. You should also remove all background attribute values that you aren't using anyway (none repeat scroll 0 0).

If you want an element to have the same color as its containing element, you could use one of the values inherit (to make it inherit the color of the parent element) or transparent (to make the color of the element behind it shine through) instead of explicitly setting a color.

Did you verify that the CSS files on your web-server have been updated with the changes you made? Is there some caching infrastructure between web-server and browser that may retain an old version of the website for some time? Try connecting to the web-server directly to check if the web-server itself shows the correct page.

Also, as mentioned in my comment, use your browser's developer tools to inspect the website (in Firefox you display them by pressing Ctrl+Alt+i, or simply by right-clicking on an element of the webpage and then selecting "Inspect Element" from the context menu). Those tools should also allow you to temporarily override styles until the page is reloaded, so you can check if an attribute change has the desired effect. They should also allow you to check if the style you want to apply is being overridden by some other style.

As a side-note: please disregard the two answers you've gotten before, as they are flat-out incorrect. Not only do they have the CSS class name wrong, but their suggestion would apply only to <a> elements that have an ancestor with the given CSS class.

Many many thank you @Ansgar Wiechers.  These are very helpful information for me. Again thank you so much!
0 votes
edited by

Attach anchor tag ( a ) after the class name of css.


.header-nav-main-link a {

background-color : green ;
border-bottom : 1px solid;

border-radious : 15px;


Hope you’ll able to solve your problem by using this css trick.

Sorry bro... It doesn’t work..
–1 vote

Css for it

.header-nav-main-link a {

background-color : color code;

color: color code ;


background coror is color of background,

color is color of text

I tried this before but it still not working..