Adding a link causes the background color of the sidenav to change

Whenever I include a link in my sidenav, it triggers a change where the sidenav’s background color switches to the main background color, forming a box shape around the linked text.https://i.sstatic.net/P0AU2.png

I’m aiming to eliminate the grey backdrop between spaces and instead utilize the somewhat black sidenav background color.

Here is my HTML file:

<body>
  <div class="sidenav">
    <h2>Spaces:</h2>
    {% for space in spaces %}
    
    <a href="/{{space}}">{{space}}</a>

    {% endfor %}
  </div>
</body>

This is how my CSS file looks:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #24252A;
}
.sidenav{
    height: 100%;
    width: 160px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 20px;
    color: #818181;
}

.sidenav a{
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
}

.sidenav a:hover{
    color: #f1f1f1;
}

Your assistance with this issue would be greatly appreciated. Thank you!

Answer №1

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #24252A;
 }

By using the wildcard symbol (*) to set the background-color, all elements on the page will have their background color changed to #24252A, except for the element with the class .sidenav which has a different background color defined.

To address this, it is recommended to remove the background-color from the wildcard selector and instead apply it to the body element specifically:

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    background-color: #24252A;
}

In general, setting a background-color at the global level using the wildcard selector is considered a bad practice. Hopefully, this explanation helps clarify things!

Answer №2

Make adjustments to the background colors in the .sidnav class by removing the existing background-color and adding a new one to .sidnav a

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #24252A;
}

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;


  **background-color: #111; "REMOVED"**


  overflow-x: hidden;
  padding-top: 20px;
  color: #818181;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;


  **ADD A NEW BACKGROUND-COLOR**


  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

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

What is the best way to position a logo at the center of a circle

My latest school project involves creating a contact page for my website, and I want to add social media icons inside circular containers. Below is the CSS code snippet I have used: .ul2{ display: flex; } .ul2 li{ position: relative; display: block ...

jQuery is not properly activating menu links

Below is the jQuery code I am using in order to add the class "active" to links within the navigation menu: $('.main__menu li a').click(function(e){ $('.main__menu li a').removeClass("active"); $(this).addClass( ...

Generate a document of purchase utilizing PHP POST array information

Currently studying PHP and delving into creating a basic cart/processing script. The item cart has been successfully developed, however, facing challenges in displaying information on the receipt once the user confirms purchasing the item(s) in their cart ...

Place two anchors side by side using inline-blocks without using the float property

Is there a way to align two buttons next to each other without using floating? I have encountered an issue where adding a width to one of the buttons causes it to jump down and be on a different line than the other button. The buttons are centered, so th ...

Tips on achieving vertical movement within a div element from the bottom of the wrapper to the

I am struggling to animate a .alert div within its wrapper to fly up from the bottom of the wrapper by 40px. However, I am encountering difficulty as the alert div does not start at the bottom of the wrapper as intended. The desired behavior is for it to s ...

Issues within the team relating to the assortment of items in the shopping cart

Working on an angular online shop and facing a challenge here. We have a list of products, but I need to single out one specific product from the list when the "add to cart" button is clicked. Currently exploring this in the product.component.ts file with ...

An alternative method for storing data in HTML that is more effective than using hidden fields

I'm trying to figure out if there's a more efficient method for storing data within HTML content. Currently, I have some values stored in my HTML file using hidden fields that are generated by code behind. HTML: <input type="hidden" id="hid1 ...

"Discover the versatility of implementing a single ag grid across various components, all while dynamically adjusting its style

I am facing an issue where I have an angular grid ag-grid in component1, which is being used in some other component2. Now, I need to use the same component1 in component3 but with a different class for ag-grid, specifically 'ag-grid-theme-dark'. ...

Ensure that all values are in a single row on the webpage

I'm currently working on a web application that requires a label, textbox, and button to be aligned in one row. However, they are displaying in separate rows. Below is the code I have been using: <div class="form-group row"> <label clas ...

What is the best way to retrieve the highest value in Codeigniter?

I am attempting to display the MAX value of a field in my CodeIgniter project, but I am still having trouble figuring it out. I have tried looking for solutions on Stack Overflow, but I haven't been able to successfully implement them in my project. ...

Miscalculation in PHP MySQL: Incorrect output when adding field 1 and multiplying field 2 by

In my MySQL table, there are 4 fields: product price cost, selling price, stock of products, and earnings per unit. For example: If the cost of our product is $100, we sell it for $120, and we have a stock of 10 units, the following code calculates the e ...

Is there a way to ensure that all elements on a page display properly across all screen resolutions without being cut off?

My website consists of three main elements: pictures, Cards (containing pictures and various typography), and Buttons. These elements are arranged in a column layout. The issue I am facing is that the pictures and buttons get cut off on the screen due to ...

Encountering a syntax error when attempting to generate a div dynamically with jQuery

I am in the process of creating a view application form using Bootstrap after submitting a form. Initially, I created it utilizing two 'div' elements. Now, I am exploring how to dynamically generate a div upon clicking a button: <i> Sectio ...

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Is there a way to hide a link to another page if the user has previously visited that page? For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navi ...

Arrange two columns of clickable text links

I am currently working on a code block and I am trying to display two columns, one on the left and one on the right. However, the second column is appearing below the first one. <style type="text/css"> a img{border:none;} #planninglaunchb ...

Having trouble accessing a JavaScript variable in Javascript due to reading null property 'value'

What I Require I am in need of passing a URL variable from an HTML document to a JavaScript file. HTML Snippet <script> var urlParam = "{{ page_param.asy_request | replace('&','&')}}"; urlParam = urlParam.rep ...

Responsive HTML grid with a distinct line separating each row

My challenge is to create a layout that features a grid of floating divs with horizontal lines under intermediate rows. The catch is that there should not be a line under the last row, and if there is only one row of elements, no line should be displayed. ...

The execution of certain JavaScript code is failing to display properly when utilizing the document.getElementById method

PHP Code <input type="text" placeholder="ID" name="instructor_id"><br> <div class="errors"> <strong id="errorSeven"></strong> </div> $queryCheck1 = "SELECT ins ...

Is there a way to make my item reach a height of 100%?

I've created a unique Wordpress theme and I'm looking to make an element 100% height to fill the remaining available space. Here is the HTML code snippet: <header id="masthead" class="navbar navbar-default" role="banner" style=" backgrou ...

How can I find the XPath element for a date picker drop-down menu in Python using Selenium?

When I attempted to click on the date in the dropdown datepicker, an error message popped up saying "Unable to Locate Element". I tried using the following code snippets: monyear = driver.find_element_by_xpath('/html/body/div[7]/div[1]/table/tbody/tr ...