When switching between classes, it is not possible to apply a different value to the same CSS property

I am currently working on a project that involves toggling a class on a ul tag with an id of sideNav using JavaScript.

In this scenario, I have set the left attribute of the id to 0, while the same attribute in the class has a value of -100%.

After several attempts to troubleshoot the issue, it seems that using the same property with different values is causing a problem. Are there any alternatives or solutions to overcome this challenge?

Here is a snippet of my code:

var btn = document.getElementById("burgerWrapper");
var sideNav = document.getElementById("sideNav");

btn.addEventListener("click", () => {
  sideNav.classList.toggle("activeNav");
})
#sideNav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: 1rem 0;
}

.activeNav {
  left: -100%;
}
<ul id="sideNav">
  <li><a href="#">Option1</a></li>
  <li><a href="#">Option2</a></li>
  <li><a href="#">Option3</a></li>
</ul>

javascripthtmlcss

Answer №1

Your problem stems from the CSS specificity issue - an id carries more weight than a class, leading it to override the latter.

If you want to delve deeper into how CSS specificity functions, check out my response here.

const btn = document.getElementById("burgerWrapper"),
  sideNav = document.getElementById("sideNav")

btn.addEventListener("click", () => sideNav.classList.toggle("activeNav"))
#sideNav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: 1rem 0;
}

#sideNav.activeNav {
  left: -100%;
}
<ul id="sideNav">
  <li><a href="#">Option1</a></li>
  <li><a href="#">Option2</a></li>
  <li><a href="#">Option3</a></li>
</ul>

<button id="burgerWrapper">click me</button>

Answer №2

Understanding the CSS Cascade is crucial as it determines how properties are applied based on specificity.

The #sideNav has a specificity score of 1.0.0, while the .activeNav scores 0.1.0, giving priority to the id selector. To ensure your styles overwrite existing ones, consider utilizing more specific selectors like #sideNav.activeNav which boasts a score of 1.1.0.

If you want to delve deeper into the CSS cascade and specificity, check out this resource: https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

Answer №3

Give this a shot


#sideNav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: 1rem 0;
}

#sideNav.activeNav {
  left: -100%;
}

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

The process of filtering arrays and utilizing the V-for directive in Vue.js

Utilizing Vue.js, I am attempting to iterate through an array of levels. I successfully received the response json in actions with a forEach function like: let filters = [] const array = response.data array.forEach((element) => ...

javascriptjsonvue.jsmultidimensional-arrayvuex

Error encountered while attempting to generate migration in TypeORM entity

In my project, I have a simple entity named Picture.ts which contains the following: const { Entity, PrimaryGeneratedColumn, Column } = require("typeorm"); @Entity() export class Picture { @PrimaryGeneratedColumn() ...

javascriptnode.jstypescriptexpresstypeorm

Tips for displaying an element for each item chosen in a multi-select box

I currently have a situation where I am rendering for every selected element within my multiselect angular material selectbox. The rendering process functions correctly when I select an element, but the issue arises when I try to deselect one - it just ke ...

javascriptangulartypescriptangular-material

Determine the exact location of a click within an SVG element

This block of HTML includes SVG elements: <div class="container"> <div class="spacer"></div> <svg> <g id="polygonGroup" transform="translate(80, 50)"> <polygon points="-60,-10 -35,-30 -10,-10 -10,30 -60,30"&g ...

javascriptjquerysvgclickdom-events

Combining Material UI with React Form Hook to handle multiple checkboxes with pre-selected defaults

I am working on creating a form with grouped checkboxes using react-form-hook and Material UI. The checkboxes are generated dynamically through an HTTP Request. I am aiming to set the default values by providing an array of object IDs: defaultValues: { ...

javascriptformscheckboxmaterial-uireact-hook-form

The width of the Bootstrap shadow container is not optimized for large viewports

Having recently started using bootstrap (less than six hours of documentation/development time), I encountered an issue where the width of my shadow container extends too far on smaller screen sizes. Any screen size above 991px leaves unwanted white space ...

htmlcssbootstrap-5

Placeholder for empty values in Angular UI mask

Currently, I have implemented the angular ui mask directive for a date field. However, it is inserting underscores as a placeholder. Is there a way to display nothing in the placeholder instead? ...

javascriptangularjsangular-ui

Stop storing CSS data for nopCommerce

Currently, I am looking for a method to avoid caching CSS files on my nopCommerce website. In the past, I have achieved this by adding the date and another element at the end of the CSS call. Html.AppendCssFileParts("~/Themes/CustomTheme/Content/css/site. ...

htmlcssasp.netcachingnopcommerce

Extract a section of the table

I'm looking to copy an HTML table to the clipboard, but I only want to include the rows and not the header row. Here is the structure of the table: <table style="width:100%" #table> <tr> <th class="border"></th> ...

javascripthtmlangularhtml-table

When executing tests in jest, imports from node_modules may become undefined

My jest configuration seems to be encountering an issue with resolving node_modules during execution. They are coming back as undefined... Here is a snippet from my test file: import lodash from 'lodash' it('test', () => { expect ...

javascriptnode.jstypescriptjestjsts-jest

Achieving the display of font-weight 100 for Google web fonts successful

I have been experiencing difficulties in achieving the ultra-thin display of the Lato font through Google web fonts. Despite appearing correctly on Google's website, the font weight does not change when implemented on my own page if it is below 400 (I ...

csswebfontsgoogle-webfonts

Is there a way to smoothly incorporate a new animation into a page, while ensuring that existing elements adjust to make room for it?

I am looking to smoothly fade and move a hidden element (display:none) within the page, shifting other elements to animate into their new positions as necessary. When I reveal the hidden element by changing it to "display:initial," it should seamlessly a ...

htmlcss

Gitbook is facing a unique challenge with the Chinese language in its HTML code - an issue with excessive spacing

Currently, I am utilizing gitbook and github pages to construct my personal webpage with the main language being Chinese. However, I have noticed that gitbook is adding an extra space in some places where it is unnecessary. Below is the text found in the m ...

htmlmarkdowncjkgitbook

Utilizing Google Language API for bulk translation tasks

My current project involves using Google's AJAX Language API to translate each element in an array. for(var i=0; i < mytext.length; i++) { google.language.translate(mytext[i], originalLanguage, newLanguage, function(result){ if(!result.error){ ...

javascriptajaxloopsfor-loopgoogle-language-api

Tips on setting the ajax parameter contentType to "html"

I'm encountering an issue where the variable "myvariable" is passing as null. Can anyone provide guidance on what I might be doing incorrectly? $.ajax({ type: "POST", url: "/MyController/MyAction", data: JSON.stringify({ items: my ...

jqueryhtmlajax

The file_get_contents() function encountered an issue as the content type was not specified, leading to it assuming

I am currently working on a project using PHP and JavaScript. I need to call an API from the camera using PHP code. I am using the file_get_contents function and Post request for this purpose. Below is the code snippet: $value = $_POST['TakeNewPic&ap ...

javascriptphpajaxrequest

Unable to customize the button color within the Bootstrap framework

This button was created using Bootstrap. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <lin ...

htmlcsstwitter-bootstrap

Multiple columns contained within a span

I'm trying to create a panel that displays a list of values with corresponding labels. The requirement is for each label to be positioned above its respective value and aligned to the left. The layout should resemble the following: Label 1 Lab ...

htmlcss

moodle - eliminate the need for grading at the same time

I'm currently setting up a Moodle installation and I'm looking for suggestions on how to prevent simultaneous grading. My goal is to have several evaluators grading students across various courses without any conflicts. If you have any recommend ...

javascriptphpmoodle

Error encountered when accessing JSON data from the DBpedia server in JavaScript

Hello everyone and thank you for your help in advance. I have encountered this error: Uncaught SyntaxError: Unexpected identifier on line 65 (the line with the "Var query", which is the third line) and when I click on the Execute button, I get another e ...

javascriptjqueryajaxjsondbpedia