CODEWITHSUNDEEP
csssmartphone
Crabfish78
Crabfish78

Reputation: 1

Hiding floating menu on smartphones/tablets

I use a floating menu on a website I manage. It works great on computer, but it is completely in the way when visiting the website on a tablet or smartphone.

Is there a clever way to hide this floating menu for smartphones and tablets? (Hiding it on smartphones is more important then tablets)

MY CSS:

div.floating-menu {position:fixed;left: 0px;background-image: url("/meny-cirkel.png");width:113px; height:225px; z-index:100;}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}

MY HTML:

<div class="floating-menu">
<p style="text-align: left; margin-bottom: 25px; margin-top: 30px; margin-left: 0px;"><a class="link-floatingmenuheading" href="#top">Menu</a></p>
<a class="link-floatingmenu" href="#criteria">Draft Criteria</a>
<a class="link-floatingmenu" href="#process">The process</a>
<a class="link-floatingmenu" href="#comment">Comment</a>
<a class="link-floatingmenu" href="#news">News</a>
</div>

Kind regards Pete

Upvotes: 0

Views: 233

Answers (1)

jackstruck
jackstruck

Reputation: 51

@media (max-width: 600px) {
  div.floating-menu {
    display: none;
  }

This style will only apply to browser views with a width less than 600px (so smartphones and tablets)

Take a look at this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Upvotes: 1

Related Questions