CODEWITHSUNDEEP
htmlcss
Psychosis404
Psychosis404

Reputation: 91

Multiple class selectors not working CSS?

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();">&#9776;</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>

Upvotes: 0

Views: 69

Answers (1)

Jorjon
Jorjon

Reputation: 5434

This is a problem with the specificify of your styles.

  • First, you are disabling all li elements on mobile.
  • Then, after clicking the menu, you want to display li elements.

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();">&#9776;</a></li>
        </ul>
    </nav>

    <script>
        function dropdownMenu() {
            document.getElementById("dropdownClick").classList.toggle("responsive");
        }

    </script>

</body>

Upvotes: 1

Related Questions