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

Ways to conceal the jqgrid thumbnail

I have a jqgrid that displays a large amount of dynamic data. I am looking for a way to hide the thumb of the vertical scrollbar in the jqgrid when scrolling using the mousewheel. Here is a basic example: var data = [ [48803, "DSK1", "", "02200220", "O ...

javascriptjqueryasp.net-mvcjqgrid

Chrome reload causing page to automatically scroll to bottom on my website

Could really use some assistance in solving this problem as I am completely stumped. I've noticed an issue on one of my websites when pages are reloaded. Every now and then (not consistently, which adds to the confusion), upon refreshing a page, it ...

javascripthtmlgoogle-chromescrollscrollbar

Steps for instructing Google Maps to identify the location of a provided Google Maps URL

Is it possible to extract longitude and latitude data from a shared URL and place them into a marker? For example, users might copy and paste the 'Share' URL from Google Maps. For instance: or Direct Location: https://www.google.co.nz/maps/plac ...

javascriptajaxgoogle-mapsgoogle-maps-api-3

Custom server not required for optional dynamic routes in NextJS version 9.5.2

I am attempting to implement localized routes with an optional first parameter in the form of /lang?/../../, all without requiring a custom server. Starting from NextJS version 9.5, there is a new dynamic optional parameters feature that can be set up by c ...

javascriptnext.js

What could be causing my fixed element to disappear when the webpage is not long enough?

OBJECTIVE: a div is { position:fixed; bottom:0% } it has a genuine height and width; the z-index is the highest in the document = so, it should always be visible! ISSUE: mobile browsers 'cut' the bottom end of the page when zooming out. ...

htmlcss

Using Node.js to invoke an identifier loop

Having some trouble with this loop. Should I include variable c in the loop as well? Let me provide some context: there is a table and child(i) changes for every row. The SelectorT receives a sentence structured like this: Now\nIs\n09:00\n4 ...

javascriptnode.js

Image not showing up when using drawImage() from canvas rendering context 2D

Need help with drawImage() method in JavaScript <head> </head> <body> <script type = "text/javascript"> var body, canvas, img, cxt; body = document.getElementsByTagName("body" ...

javascript

CSS3PIE is failing to function properly in Internet Explorer

Looking for a solution to achieve rounded corners in Internet Explorer? Consider using . In my CSS file named template.css, I have included the following code which is loaded when the page loads on Joomla 1.5. .form_field {color:#222 !important; border:2p ...

htmlcssjoomlacss3pie

Avoid clicking in areas outside the perimeter of the blue circle in the SVG

Is there a way to restrict clicking outside the blue circle? The goal is to only allow opening by clicking on the svg itself, This includes everything, even white space inside the svg. How can this be achieved in the code? The current behavior is that ...

javascripthtmlcsssvg

Overflow - conceal the scrollbar and prevent scrolling without cutting off the element

Whenever I implement the code snippet below: body { overflow: hidden; } The overflowing element gets clipped. However, when I try this code instead: body { overflow: auto; } The element is no longer clipped, but now a scrollbar appears where it ...

htmlcssoverflow

Firebase issue: The function ref.once is throwing an Uncaught TypeError and is not recognized

I am attempting to utilize Firebase for both uploading a file and storing it in my database simultaneously. I want to track the number of uploads so that I can rename each file uniquely. While I have successfully uploaded and stored a copy in the database, ...

javascripthtmlangularjsfirebasefirebase-realtime-database

Exploring methods for monitoring page transitions in Next.js

Looking to repurpose a menu I created in react using react-router-dom for use in nextjs. My objective is to update the menu state to 'false' and change the menuName to 'menu' upon clicking on a link within the menu. Implemented a useEf ...

javascriptreactjsreact-hooksnext.jsnext-router

Challenges with displaying css/bootstrap classes within angular2

Experiencing difficulties with CSS/Bootstrap integration when displayed in an angular2 component. When attempting to display the CSS and HTML content in the Index.html file (with proper CSS and JS references), everything functions correctly. However, once ...

cssangulartwitter-bootstrap-3angular-ui-bootstrapng-bootstrap

Hovering does not activate the CSS dropdown

I have been struggling to implement a pure CSS menu that shows on hover. Although everything seems to work fine, I encounter an issue when trying to hide and then show the menu again upon hover. Here is the HTML code: <ul id="nav-menu"> <li& ...

htmlcss

Here's how you can combine two individual LESS files using grunt-recess

Hey there! I'm working on compiling 2 separate files using grunt recess: recess: { dist: { options: { compile: true }, files: { 'path/css/custom. ...

csslessgruntjsrecesstwitter-recess

When the button with an image is clicked, it will display a loading element

I have developed an application that heavily utilizes ajax, and I am looking to implement the following functionality: I would like to have a button with both text and an image. When this button is clicked, it should be disabled, and instead of the origina ...

javascriptjqueryasp.net-mvccssajax

Error in public build of Gatsby & Contentful site due to incorrect file paths

Encountering difficulties while attempting to deploy a Gatsby site with Contentful CMS. Development mode runs smoothly, but issues arise during the build process. Upon executing the Gatsby build command, the site is deployed successfully initially. Howeve ...

javascriptreactjsgithub-pagesgatsbycontentful

What is the best way to collapse the entire navigation menu after clicking a link (nav-link) within it?

I created a navigation menu using HTML and SCSS, but I'm facing an issue where the menu does not close when clicking on links inside it. The menu continues to overlay the content on the page instead of closing. Essentially, I want the navigation menu ...

htmlcssonclicknavigation

Protractor: Decrease the magnification

Currently, I am working with protractor and facing the challenge of zooming out to 50%. Despite trying numerous solutions found on StackOverflow, none have successfully resolved the issue. Some attempted solutions include: browser.actions().keyDown(protra ...

javascriptseleniumprotractor

Dismiss the Popover in Ionic 2

After opening a popover that redirects me to another page and then returning to the root page (popToRoot), I reload the data/dom upon an event and dismiss the popup once the json data is received from the server. Everything works smoothly with a lengthy ti ...

javascriptangulartypescriptionic2ionic3