What could be causing the issue of my navbar text not changing color using CSS?

Despite several attempts, I am unable to change the color of the hyperlinks in blue or purple using the HTML and CSS below. Can anyone point out what I might be missing?

nav ul {
  /* Navbar unordered */
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  /* Navbar ordered */
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  /* Navbar on mouse hover */
  background-color: #1f2926;
  color: white;
}
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="book.html">Book</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

I have experimented with adding !important without success. So far, the only working solution I discovered is embedding the styles directly within the HTML code like this:

<li><a style="color: white" href="index.html">Home</a></li>

htmlcsslisthtml-lists

Answer №1

If you want to ensure that the a tag inherits the color of its parent li property, one approach is to set the color property of the a tag to inherit:

nav ul {
  /* Styling for unordered list in Navbar */
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  /* Styling for ordered list in Navbar */
  /* Default color set to blue for anchor tags to inherit */
  color: blue;
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  /* Hover effect for Navbar items */
  background-color: #1f2926;
  color: white;
}

nav a {
  /* Ensure anchor tags inherit parent's color */
  color: inherit;
}
<body>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="menu.html">Menu</a></li>
      <li><a href="book.html">Book</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
</body>

Answer №2

You have applied the color setting to the li element instead of the a element.

The a element already has a default color, so you need to target it specifically.

a { 
  color: white;
}


nav ul {
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  background-color: #1f2926;
}

a {
  color: white;
}
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="book.html">Book</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

To apply the hover effect on the a element inside the li, use the following code:

nav li:hover a {    
  color: white;
}


nav ul {
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  background-color: #1f2926;
}

nav li:hover a {
  color: white;
}
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="book.html">Book</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Shifting the image below the text for mobile display

My goal is to place an image below a block of text when viewed on a mobile device, but currently, the image is covering the text. Here is how it appears on desktop: [![enter image description here][1]][1] This is the current mobile view (the image is ov ...

htmlcss

How do I set up a navigation bar item to align to either side based on the selected language?

I need to adjust the positioning of the last list item component within a specific div. The webpage is available in both Arabic and English, with the direction changing based on the selected language. Here is a snippet of CSS code that I'm using: #na ...

htmlcssbootstrap-4

Why should one incorporate semantic markup into their HTML documents?

During my studies, I learned that tags provide a definition to content in HTML. For example: <section>It's a section</section> <article>It's an article</article> By correctly using semantic markup in my HTML, the documen ...

htmlw3c-validationsemantic-markup

What could be causing the discrepancy in alignment of my hyperlink?

I noticed that in this example the hyperlink is aligned at the bottom compared to the text. Can anyone help me identify the issue and provide a solution? Thank you! ...

htmlcss

Creating an HTML hyperlink to a file

I've been attempting to connect a blog post I saved previously to my new website, but so far I have not been successful in getting them to display. It keeps showing up as file not found. Is there something I am missing? My past blog posts are stored i ...

htmlhyperlink

Challenges related to maintaining a webpage's content using AJAX

I have a form that I want to use to send and insert the values into my database. After the values are inserted, I would like to clear the input fields of the form and display a success message. Here's an example of how I would like it to look: Clear ...

phphtmlajax

Strategies for eliminating all elements with a particular innerHTML content

function removeElements() { let li = document.getElementsByClassName("li"); for (var i = 0; i < li.length; i++) { if (li[i].innerHTML === "hello") { li[i].parentElement.remove(); } } } <li> <span class="li">hi</sp ...

javascripthtmljquery

Placing a FontAwesome icon alongside the navigation bar on the same line

Upon login, the navigation bar experiences display issues. Prior to logging in: https://i.stack.imgur.com/ZKyGe.jpg Following successful login: https://i.stack.imgur.com/zyP3m.jpg An obstacle I'm facing involves the Log Out fontawesome icon wrappi ...

htmlcss

Methods for verifying if a file is included in another file, while disregarding any whitespace adjustments

Let's say I have multiple CSS files (a.css, b.css, ..., e.css) and after concatenating and compressing them, I get a new file called compressed.css. Now, I need to verify if each of the original CSS files is included in the compressed.css file. Are th ...

cssfilecompressionminify

What could be causing my HTML elements to shift position based on varying screen sizes or zoom levels?

Does anyone else experience their HTML and CSS elements shifting around based on the screen size or zoom level? I have screenshots illustrating this issue. Here is how it currently appears And here is how it's supposed to look ...

javascripthtmlcssiframebrowser

extra elements within the 'navbar-toggler' icon button

How to create a navbar with multiple menu items that are always visible? Some items will be shown upon clicking the navbar button, while others will remain steady. Using the bootstrap navbar-toggler button can make the navbar longer when adding more items ...

htmlcssbootstrap-4

Selection tool for Material UI Fields

Is there a way to design something similar to this layout using Material UI? I'm looking to create a selection between fields. Any advice on how to achieve this in Material UI? ...

cssreactjsmaterial-ui

Tips for creating incremental progress on a pop-up page?

I am looking for guidance on creating a page with specific functionalities. Here is what I have in mind: I want to implement a button that opens a popup when clicked. The popup should display static instructions and buttons for the user to progress throu ...

javascriptjqueryhtmlajaxpopup

iPhone height is not correct

One issue I faced was when trying to view a webpage in landscape mode on iPhones (specifically testing on model SE, but it appears that many people are experiencing the same problem with other iPhone models). I have created a simple example below, consist ...

javascripthtmlcssiphonemobile

CSS Media Query Assistance - optimizing text display for mobile responsiveness

I am currently facing an issue with my CSS code where the content is displaying as one long sentence on mobile devices, requiring users to scroll to read it. I am trying to modify it so that it displays as two lines on mobile. <!-- promo banner --> ...

htmlcssresponsive-designhidden

Why are the items I have inserted inside my <div> tag not appearing on the screen?

What could be simpler than this: {this.state.dash ? <div className='dashWrapper slide'> HELLO </div> : null} I've tried everything, but nothing seems to show up inside the div. ...

cssreactjs

Why can't the file upload button locate its CSS styles?

Check out this jFiddle demonstrating the issue. Some of the Angular code may appear broken in the example, but that's just due to it being pasted into jFiddle; it's not an actual problem I'm facing. The CSS styles aren't working on the ...

cssangularjs

Is the jSON data featured at the top with DIV / Table Headers positioned at the bottom?

I'm really struggling with this issue. I've tried a few different things but nothing seems to work. Any suggestions on how to tackle this problem? Here's a link to a screenshot of the error I'm encountering... <div class="contain ...

jqueryhtmlcssjson

Error message: The desired element is not found in the cache when selecting a radio button with mechanize::phantomjs

Currently, I am working on automating a webpage that contains numerous JavaScript functions using Perl. I have been successful in utilizing the headless mechanize::phantomjs toolkit thus far. However, I have encountered what seems to be a minor issue that ...

htmlperlphantomjsmechanizebrowser-automation

What is the best way to set a parent element's width to be the same as one of

Is it possible to make the width of div.main match that of table.tbl2? In this scenario, I want inline4 to be on the second line and for the width of div.main to be identical to the width of table.tbl2. .container { text-align: center; } .main { di ...

htmlcss