External Style is not detected by javascript (if conditon used)

I am relative new to web development so while developing a project site responsive design I ran into a problem that when ever hamburger menu is pressed even though lines for expending exists in external css file but it is not detected but new inine styles are created by javascript and then it works as expected. HTML:

<nav class="mobileNav" id="mobileMenu">
    <a class="mol-6" onclick="show();" href="index.html">
        <figure>
            <img class="icon" src="images/nav/home.png" alt="">
            <figcaption>Home</figcaption>
        </figure>
    </a>
    <a class="mol-6" onclick="show();" href="astronomy.html">
        <figure>
            <img class="icon" src="images/nav/astro.png" alt="">
            <figcaption>Astronomy</figcaption>
        </figure>
    </a>
    <a class="mol-6" onclick="show();" href="telescope.html">
        <figure>
            <img class="icon" src="images/nav/tele.png" alt="">
            <figcaption>Telescopes</figcaption>
        </figure>
    </a>
    <a class="mol-6" onclick="show();" href="about.html">
        <figure>
            <img class="icon" src="images/nav/about.png" alt="">
            <figcaption>About</figcaption>
        </figure>
    </a>
</nav>

CSS:

#mobileMenu {
 font-family: light, sans-serif;
 max-height: 0px;
 z-index: 99;
 transform: translateY(-100%);
 overflow: hidden;
 padding: 0px;
 transition: transform 0.5s;
}

Javascript:

function show() {
if (document.getElementById("mobileMenu").style.maxHeight == "0px") {
    setTimeout(function(){
        document.getElementById("mobileMenu").style.maxHeight = "100%";
        document.getElementById("mobileMenu").style.position = "fixed";
        document.getElementById("mobileMenu").style.padding = "1%";
    }, 1)
    document.getElementById("mobileMenu").style.transform = "translateY(0px)";
} else {
    setTimeout(function(){
        document.getElementById("mobileMenu").style.maxHeight = "0px";
        document.getElementById("mobileMenu").style.padding = "0px";
        document.getElementById("mobileMenu").style.position = "relative";
    }, 500)
    document.getElementById("mobileMenu").style.transform = "translateY(-100%)";
}}

Working Example: Astromuneeb (Require Portrait Orientation)

Any help will be appreciated.