-2

I want to show the navbar only on devices bigger than ipad and on smaller devices a different styled navbar. I tried it

1) css only using display:none for smaller devices

  @media (max-width: 768px) {
    nav {
      display:none;
    }
  }

2) css only using visibility: hidden / visibility:visible

    @media (min-width: 768px) {
    nav
    {
        visibility:visible;
    }
}

@media (max-width: 768px) {
    nav
    {
        visibility:hidden;
    }
}

3) used jquery

$(window).on("orientationchange load resize", function () {
     var width = $(document).width();
     if(width<765){
       $("#navbar").hide();
     }
     else if(width>765){
              $("#navbar").show();
     }
});

see jsfiddle (with jquery): https://jsfiddle.net/codingcodingcoding/913j87bb/

Nothing works. If anyone knows why, please tell me.

GreyRoofPigeon
  • 17,833
  • 4
  • 36
  • 59
codingworld
  • 3
  • 6
  • It's because you are writing wrong code. :) Tell us one thing. How can we tell what's wrong without seeing your code? – Soolie Nov 16 '17 at 14:06
  • Post your code and then we can help fix it. Don't expect us to just write it out for you. – ProEvilz Nov 16 '17 at 14:07
  • I accidantly clicked on publishing my questing before adding code - no need to downgrade my question. jsfiddle is coming in a minute. – codingworld Nov 16 '17 at 14:11
  • You're not using media queries correctly. See [here](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) and also remember that there is a difference between a PC browser and a mobile device. – ProEvilz Nov 16 '17 at 14:23
  • 2
    Possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – Mogsdad Nov 16 '17 at 16:58

1 Answers1

0

If you add to your jsfiddle (at the css window):

@media (max-width: 768px) {
  nav {
    display:none;
  }
}

it works. Checked it by reducing result window. You don't need jquery for this.

Hope it helps.

Javi
  • 170
  • 3
  • 13
  • Thank you. I was trying it on codepen and then using chrome developer tools to check if its working and its never working but when I simply resize the window I can see it works – codingworld Nov 16 '17 at 14:30
  • Please check the answer as correct if it helped you and you find it correct, thanks. – Javi Nov 16 '17 at 14:53