Multiple class selectors not working CSS?
Question
I want to create a mobile responsive nav bar. When on mobile (screen<680px) the menu disappears (hidden by :
ul.topnav li:not(:nth-child(1)){
display: none;
}
And when i click on the drop down icon the dropdownMenu() is triggered and it adds responsive to the className of ui and the nav bar is shown vertically as it's shown in the code:
ul.responsive li {
display: inline;
float: none;
}
It only works if i use ul.topnav.responsive{} . Why doesn't it work with ul.responsive{} ??
/* ######## Nav bar ######## */ nav ul { background-color: #eee; overflow: hidden; margin: 0; padding: 0; } ul.topnav li { list-style: none; float: left; } ul.topnav li.topnav-right{ float: right; } ul.topnav li a { display: block; text-decoration: none; min-height: 16px; text-align: center; padding: 14px; text-transform: uppercase; color: #666; } ul.topnav li a:hover{ background-color: #0080ff; color: #fff; } ul.topnav li.dropDownIcon { display: none; } /* ###### Mobile styles ###### */ @media screen and (max-width : 680px) { ul.topnav li:not(:nth-child(1)){ display: none; } ul.topnav li.dropDownIcon { display: block; float: right; } ul.responsive { position: relative; } ul.responsive li { display: inline; float: none; } ul.responsive li a { display: block; text-align: left; } }
<body> <nav> <ul class="topnav" id="dropdownClick"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li class="topnav-right"><a href="#singup">Sign Up</a></li> <li class="topnav-right"><a href="#signin">Sign In</a></li> <li class="dropDownIcon"><a href="#" onclick="dropdownMenu();">☰</a></li> </ul> </nav> <script> function dropdownMenu() { var x = document.getElementById("dropdownClick"); if(x.className === "topnav"){ x.className += " responsive"; }else { x.className = "topnav"; } } </script> </body>
1 answers
solution1
1 ACCPTED 2020-10-11 15:06:01
This is a problem with the specificify of your styles.
- First, you are disabling all
lielements on mobile. - Then, after clicking the menu, you want to display
lielements.
Currently your styles have conflicting orders, so they use the rule with the highest specificify.
This:
ul.topnav li:not(:nth-child(1)) {
display: none;
}
Has greater specificify than this:
ul.responsive li {
display: inline;
}
So the first rule is taken into account. When you did:
ul.topnav.responsive li {
display: inline;
}
It increased the specificity by one, so it works.
You can find a good specificity calculator online.
If you want to increase your specificity without adding a different class, you can duplicate the .responsive selector.
ul.responsive.responsive li {
display: inline;
}
Also, please use classList.toggle instead of manually changing selectors.
/* ######## Nav bar ######## */ nav ul { background-color: #eee; overflow: hidden; margin: 0; padding: 0; } ul.topnav li { list-style: none; float: left; } ul.topnav li.topnav-right{ float: right; } ul.topnav li a { display: block; text-decoration: none; min-height: 16px; text-align: center; padding: 14px; text-transform: uppercase; color: #666; } ul.topnav li a:hover{ background-color: #0080ff; color: #fff; } ul.topnav li.dropDownIcon { display: none; } /* ###### Mobile styles ###### */ @media screen and (max-width : 680px) { ul.topnav li:not(:nth-child(1)){ display: none; } ul.topnav li.dropDownIcon { display: block; float: right; } ul.responsive { position: relative; } ul.responsive.responsive li { display: inline; float: none; } ul.responsive li a { display: block; text-align: left; } }
<body> <nav> <ul class="topnav" id="dropdownClick"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li class="topnav-right"><a href="#singup">Sign Up</a></li> <li class="topnav-right"><a href="#signin">Sign In</a></li> <li class="dropDownIcon"><a href="#" onclick="dropdownMenu();">☰</a></li> </ul> </nav> <script> function dropdownMenu() { document.getElementById("dropdownClick").classList.toggle("responsive"); } </script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.