CODEWITHSUNDEEP
jquerycsshtmlresponsive-design
Jesus Rodriguez
Jesus Rodriguez

Reputation: 2631

max-height responsive not being applied

I'm learning how to make a responsive navigation bar. in order to understand check this jsfiddle http://jsfiddle.net/4Yr7J/

if you expand the result you will see a different menu but when its minimized (as shown by default by jsfiddle) you only see a bar called "menu" this bar is supposed to grow when clicked due to adding the following class

.showing{
    max-height: 20em;
}

through 

    <script>
        $('.handle').on('click', function(){
            $('#main_menu nav ul').toggleClass('showing');
        });
    </script>

the class is being added just fine. However, the property max-height:20em is not being recognized. I noticed the dev tool shows it as crossed out. I don't know what is causing this but any help is greatly appreciated.

Upvotes: 0

Views: 125

Answers (1)

Irvin Zhan
Irvin Zhan

Reputation: 824

Revised JSFiddle Here

The problem is that when it comes to CSS,

#main_menu nav ul {
    width: 100%;
    max-height: 0;
}

takes precedence over

.showing {
    max-height: 20em;
}

because it is more specific. One way we can fix this is by replacing it with:

#main_menu nav ul.showing {
    max-height: 20em;
}

which is much more specific than #main_menu nav ul, meaning that this CSS rule will take precedence over the max-height:0.

Upvotes: 1

Related Questions