CODEWITHSUNDEEP
javascriptjquerycssmenumedia-queries
kkamil4sz
kkamil4sz

Reputation: 531

Can't hide fixed menu using media queries

I have a horizontal menu that sticks to the top of web browser after you scroll past it. To make it happen i'm using javascript (jquery). Now i want to hide that menu and show mobile menu at certain resolution, but when i give "display: none" to menu classes, it only hides original menu.
If i set .original or .menu to "display:none" it hides original static menu, and fixed menu sticks to the top of web browser immediately (you don't have to scroll).
Setting .cloned to "display:none" doesn't do anything. How to get rid of that fixed menu ?

Script:

<script>

        // Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {
    // scrolled past the original position; now only show the cloned, sticky element.

    // Cloned element should always have same left position and width as original element.     
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}

    </script>

CSS:

@media screen and (max-width:960px){
    .cloned {
        display: none;
    }

    .original {
        display: none;
    }

    .menu {
        display: none;
    }

    #navi {
        display: none;
    }

    #content {
        width: 90%;
    }
}


EDIT:

jsfiddle: https://jsfiddle.net/765kadoj/3/

Upvotes: 0

Views: 97

Answers (1)

jtmingus
jtmingus

Reputation: 834

The reason it is happening is because your javascript is overriding your css after it has been set. You have two options:

  1. You need to write some javascript to change the css to display: none for the .cloned class when the screen is smaller than 960px.

  2. You can use the !important override, which would look like this:

    .cloned { display: none !important; }

However, I would strongly suggest using option 1, since the !important override typically isn't the best practice. For more information on !important, see this article.

Upvotes: 1

Related Questions