The toggle function for the classList ('open') is functioning correctly and can be seen in the inspect element tool, however, the website is not displaying the associated style

How can I make the .nav show styles in .open after clicking #menu-icon?

Note: I used Bootstrap to create the nav

HTML

<!-- logo -->
    <div class="logo">
        <img src="assets/logo.png" alt="logo g's shop">
    </div>
    <i class="ri-menu-line" id="menu-icon"></i>

<!-- nav -->
    <ul class="nav nav-pills nav-fill m4">
      <li class="nav-item">
        <a class="nav-link active .bg-white" aria-current="page" href="#">ALL ITEM</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">SMARTPHONES</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LAPTOPS</a>
      </li>
    </ul>

CSS

.nav {
    position: absolute;
    z-index: 10001;
    top: 65px;
    right: 30px;
    width: 270px;
    background-color: #f3efef;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 4px;
    transition: all .50s ease;
    font-size: 14px;
}

.nav-item {
    margin-top: -2px;
    border-radius: 4px;
}

#menu-icon {
    display: block;
}

.nav .open {
    left: 0;
}

JS

let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.nav');

menu.addEventListener("click", function() {
    navbar.classList.toggle('open');
});

I expect that ".nav .open" will work when I click the #menu-icon, preferably using jQuery instead of vanilla JS

javascripthtmljquerycssbootstrap-4

Answer №1

The main issue causing your code to not work is the CSS selector being used.

Below is your current code:

.nav .open {
    left: 0;
}

This code is targeting a child element of nav with the class open.

If you want to target the nav itself when it has the class open, you should use the following code:

/*  Make sure there is no space between the classes */
.nav.open {
    left: 0;
}

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

Unable to correctly declare and display UTF-8 character within JSON syntax

In my JSON object, there is an attribute that contains a unique special character - I've attempted to save the string in encoded UTF-8 as "\xF0\x9F\x94\x94" or tried displaying it using its HEX value - String.fromCharCode(0x1F514 ...

javascripthtmljsonutf-8

Utilize Vue.js to incorporate an external JavaScript file into your project

Currently, I am utilizing Vue.js 2.0 and facing an issue with referencing an external JavaScript file in my project. The index.html file contains the following script: <script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfro ...

javascriptvue.jsvue-component

Creating dynamic keys to insert objects

In my coding project, I am dealing with an empty array, a value, and an object. Since there are multiple objects involved, I want to organize them into categories. Here is an example of what I envision: ARRAY KEY OBJECT OBJECT KEY OBJECT ...

javascripttypescript

Guide on aligning a popup next to the button that activated it using CSS and JavaScript

I am currently generating a dynamic quantity of divs, each containing a button that triggers a popup when clicked. I am attempting to position the popup below the specific button that activated it, but it remains static and does not move accordingly. <d ...

javascripthtmlcsspopup

"Exploring the possibilities of Sketchfab through an AJAX JSON

Currently, I am on a quest to gather the URL for the thumbnail of a Sketchfab model. To access this information, you can visit: Upon visiting the above URL, all the necessary details are visible to me. My next step involves making an AJAX call to dynami ...

javascriptjqueryjsonajax

The utilization of the Open Sans font family results in certain alterations to the user

Currently, I am working on developing a button widget using react. I have utilized the 'Open Sans' font family for the HTML body in order to maintain consistent UI styling. However, some of the styling elements break down when the 'Open Sans ...

htmlcssreactjs

I'd love some clarity on the concept of stacking contexts

After encountering a bug with a non-clickable video player inside a jquery ui dialog, I resolved the issue by changing position:relative; to position:inherit; Other solutions included removing position:relative; altogether or adjusting the z-index of the ...

cssz-index

Unresponsive jQuery Ajax JSON Request

I am working with a basic Ajax function: insertInto = function(){ console.log("Hello "); var power = $("#power").val(); var vehicle = $("#vehicle").val(); var sendData = { "power": power, "vehicle": vehicle }; $.ajax({ type: ...

javascriptphpjqueryajaxjson

creating reactive images with Vue

The original code utilized an image in a menu as shown below: <img :alt="$t('more')" class="mobile-plus-content visible-xs" src="../../../assets/img/plus79.png" /> This results in: src="data:image/png;base64,the image" I made a mo ...

javascriptvue.js

Adding substantial sections of HTML without any adjustments

While I am working on DOM manipulation, I have encountered the need to insert large blocks of HTML. I am looking for a more efficient way to do this rather than relying on concatenation or creating a messy code structure. Consider the simple code snippet b ...

javascriptjqueryhtmlstring

Consolidate checkbox input values into a single array in the necessary format

Trying to extract checkbox values and format them into an array has proven to be quite challenging. I could really use some assistance in solving this issue. Below are the input types: <input type="checkbox" id="any" name="chk" value="value1"> < ...

jquerycheckbox

Utilizing AngularJS within a Captive Network Assistant (WISPr) on iOS and MacOS devices

In my past experiences with projects, it has been observed that Apple's Captive Network Assistant (also known as WISPr client) operates with a restricted browser. For further information, you can refer to How can I debug the browser in Captive Portal? ...

javascriptiosangularjscaptivenetworkwispr

Invoke a bounded function within an Angular directive using the ng-click event

I was wondering if it's possible to invoke a bound function within a directive by clicking on a specific part of a div. Currently, I have a div with an inner div that acts as a button for expanding the main div. The larger div has a directive associat ...

javascripthtmlangularjsdom

Avoid making the check mark disappear in an SVG animation

After perfecting my CSS animation, I have the circle looping around to complete its shape while a check mark fills in the middle with a slight delay. Once both shapes are completed simultaneously, the check mark disappears. The reason for the disappearing ...

csssvgcss-animations

Tips for updating HTML Ajax content when the back button is clicked

I created a search page with filters that update the URL parameters to prevent values from being lost if the page is refreshed. q = $('#form input[name=q]').val(), srchtype= $('#filter input[name=srchtype]:checked').val(), sortBy ...

javascriptjqueryajax

From creating a simple jQuery fiddle, let's delve into the world

Here is a code snippet I'm trying to transition from jQuery to an Angular directive. Visit this link to view the original code: http://jsfiddle.net/rhtr1w04/ Below is my implementation in app.js: angular.module('app',[]).directive('an ...

javascriptjqueryangularjshighchartsangularjs-directive

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

(UPDATE: Issue Resolved - I discovered that I needed to include the JavaScript within $(document).ready(function()), which was previously missing. The example below worked perfectly for me.) I am attempting to implement a Multi-Level Navbar with Angular 6 ...

cssangularbootstrap-4navbar

Instructions on incorporating domains into next.config.js for the "next/image" function with the help of a plugin

Here is the configuration I am currently using. // next.config.js const withImages = require("next-images"); module.exports = withImages({ webpack(config, options) { return config; }, }); I need to include this code in order to allow images from ...

javascriptnext.jsnextjs-image

How come my Calendar is not showing up on the browser?

I came across a helpful guide on setting up a Calendar in HTML using JavaScript You can find it here: Unfortunately, the code I tried to use based on that guide isn't functioning as expected. <div class="row"> <div class="col-lg-4 text ...

javascriptjqueryhtmlcalendar

Looping Angular Components are executed

I am currently developing an Angular application and encountering an issue with my navbar getting looped. The problem arises when I navigate to the /home route, causing the navbar.component.html components to duplicate and appear stacked on top of each oth ...

htmlangulartypescriptcomponents