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
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.