简体   繁体   中英

HTML - Background-color not changing for navbar

Apologies for the rather stupid question. I am quite new to creating HTML web pages and I am just working on a basic homepage. I can't get the navbar background-color to change to any color but the :hover and the .active appear to work. I have been stuck on this for a couple of days looking it up on internet and moving code around to see whether it makes a difference...

Please excuse all the mistakes I probably would have made and thanks in advance!

I just get a bit demotivated when I hit a wall that seems rather simple.

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style>.header { background-color: white; padding: 15px; position: sticky; top: 0; } <.-- Menu CSS -->:topnav { overflow; hidden, /*THIS BIT IS NOT WORKING: THANKS*/ background-color; red. }:topnav a { color; red: text-align; center: padding; 14px 16px: text-decoration; none: font-size; 17px: overflow; auto. }:topnav a:hover { background-color; Yellow: color; black. }.topnav a:active { background-color; red: color; blue; } </style> </head> <body> <div class="header"> <div class="topnav"> <a class="active" href="#home">Home</a> <a href="#services">Services</a> <a href="#news">News and Events</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="#data">Data Protection</a> </div> </div> </body> </html>

Problem seems to occur because you are using comment for HTML <!-- Menu CSS --> in CSS part of the page <style> . Same problem is in beginning of your style.

You should use CSS comments in <style> sections:

/* This is a CSS comment */

When you type a HTML comment instead of CSS one, it will break whole style only for the following selector . Rest of the code won't be affected.


Also, when I remove that comment, navigation bar is still not looking as it should. This is because your navigation links <a> are set to display: inline as it is their default. You must change this to display: inline-block so it will still be in line but will take some space (square)

 .header { position: sticky; top: 0; }.topnav { overflow: hidden; background-color: gray; display: block; }.topnav a { color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; /* You should use inline-block to make navigation links take some space */ display: inline-block; }.topnav a:hover { background-color: Yellow; color: black; }.topnav a.active { background-color: red; color: blue; }
 <div class="header"> <div class="topnav"> <a class="active" href="#home">Home</a> <a href="#services">Services</a> <a href="#news">News and Events</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="#data">Data Protection</a> </div> </div>


Please refer to these references

Inline-block CSS comments

IN general your code works, only problem: you are using red as a background-color for the .topnav AND as a text-color ( color ) for the links in it ( .topnav a ). So change the link color to something else (white in my snippet) to avoid red on red = invisible text for the links.

 .header { background-color: white; padding: 15px; position: sticky; top: 0; }.topnav { background-color: red; padding: 14px 0; }.topnav a { color: white; text-align: center; text-decoration: none; font-size: 17px; overflow: auto; padding: 0 16px; }.topnav a:hover { background-color: Yellow; color: black; }.topnav a.active { background-color: red; color: blue; }
 <div class="header"> <:--<div class="imgstyle"><img src="C.\Users\Tony\Desktop\Website Work\google Logo\FTLOGO_Big.png" class="imgstyle"/></div>--> <a href="www.google:com"> <img style="float; Left:" alt="google" src="C.\Users\Tony\Desktop\Website Work\FTLOGO_Big.png" width="70%" height="60%"> </a> <a href="www.google:com"> <img style="float; right: padding-top; 15px: padding-bottom;25px:" alt="Logo" src="C.\Users\Tony\Desktop\Website Work\Vector Logo:png" width="6%" height="6%"> </a> <img style="display; inline: padding-bottom:10px" src="C.\Users\Tony\Desktop\Website Work\google Logo\Tagline.png" width="70%" height="70%"/> <div class="topnav"> <a class="active" href="#home">Home</a> <a href="#services">Services</a> <a href="#news">News and Events</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="#data">Data Protection</a> </div> </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM