CODEWITHSUNDEEP
jqueryhtmlcsswebmenu
Ian Lapham
Ian Lapham

Reputation: 27

How to add a menu that only displays on mobile screen sizes?

Right now I have a decent menu formatted for desktop screens on my web app. However, on smaller screen sizes the menu really doesn't appear correctly. At this point I'm wondering if I can just add a hamburger menu like this --->

http://codepen.io/ettrics/pen/JoaaxW

    <header class="header">
  <div class="burger">
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
  </div>

  <nav class="menu">
    <div class="menu__brand">
      <a href=""><div class="logo"></div></a>
    </div>
    <ul class="menu__list">
      <li class="menu__item"><a href="" class="menu__link">Work</a></li>
      <li class="menu__item"><a href="" class="menu__link">About</a></li>
      <li class="menu__item">
        <a href="https://twitter.com/ettrics" target="_blank" class="menu__link menu__link--social"><i class="fa fa-twitter"></i></a>
      </li>
      <li class="menu__item">
        <a href="https://dribbble.com/ettrics" target="_blank" class="menu__link menu__link--social">
          <i class="fa fa-dribbble"></i></a>
      </li>
    </ul>
  </nav>
</header>

<main>
  <h1><a href="http://ettrics.com" target="_blank">Ettrics</a></h1>
  <h2>A Full-Screen Menu, showcasing your brand and website navigation.</h2>
  <p class="support">With support for IE10 & latest versions of Chrome, Safari, and Firefox.</p>
</main>

but only have it appear on mobile an tablet screen sizes. Essentially I'm asking is there a way to add this menu and hide it on desktop sized screens.

Upvotes: 0

Views: 2106

Answers (3)

Allan
Allan

Reputation: 273

In fact, you can adapt your menu with media queries:

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Bootstrap has a Navbar Template that can help you (the menu is responsive): https://getbootstrap.com/examples/navbar/

But, if you want a sidebar, this could be better: http://startbootstrap.com/template-overviews/simple-sidebar/

Upvotes: 0

Jaron
Jaron

Reputation: 161

Yes -- for this, you would use media queries. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

In this case, your CSS with a media query would look something like

.burger {
  display: none;
}
.menu {
  display: block;
}

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

This tells the browser that when the viewport is AT MOST 960px wide (any width from from 0 - 960 ), show the burger, hide the menu.

You would also need a bit of jQuery or plain JavaScript to toggle the display of the .menu when the .burger is clicked:

$('.burger').click( function() {
  $('.menu').toggle();
});

Here's a CodePen to display how this works (resize the demo area until "Burger" appears): http://codepen.io/Ronamo/pen/LZWzVJ

Upvotes: 0

Mitchel Jager
Mitchel Jager

Reputation: 445

This is where Media-queries come in

@media (min-width: 600px) {
   .your-div {
      display: none;
   }
}

This will add display: none to your div when the browser is wider than 600 pixels. You can also use max-width: 600px to add CSS rules up to 600 pixels wide.

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Upvotes: 1

Related Questions