CODEWITHSUNDEEP
csshtml
Hanna Stone
Hanna Stone

Reputation: 303

Different header for mobile

Doing a static site for a client and they want to have a totally different main menu design for mobile devices (more of a App look and feel).

What is the best way to serve this? Having two header tags, one for desktop and one for mobile?

This is what I have now:

<header class="desktop-only-header">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</header>

<header class="mobile-only-header">
  <ul>
    <li><a href="/"><i class="icon-home"></i></a></li>
    <li><a href="/about"><i class="icon-about"></i></a></li>
    <li><a href="/contact"><i class="icon-contact"></i></a></li>
    <li><a href="/best-articles"><i class="icon-best-articles"></i></a></li>
    <li><a href="#"><i class="icon-social"></i></a></li>
  </ul>
</header>

I tried to have only one header but the amount of CSS needed to change the look and feel (show and hide content) on mobile was just too much.

Upvotes: 2

Views: 6777

Answers (2)

Kaustavi Banerjee
Kaustavi Banerjee

Reputation: 47

to design a different view for mobile from desktop, you can easily write neccessary code into media query tag in CSS. but first design for mobile, then design for desktop; because in modern days, all responsive site maintains mobile-first design thereafter desktop design. And you can use your style like:

@media screen and (min-width: 768px) {
 //your code for desktop view
}

I hope my suggestion will help you.

Upvotes: 1

Granny
Granny

Reputation: 783

You could use mediaqueries to show and hide different content depending on screensize.

So for example: 

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) { 
  #header_desktop{
   display:none;
  }
  #header_mobile{
   display:initial;
  }
}

The above code will hide the desktop nav and show the mobile nav when the screen width drops below 768px. Make sure you hide the mobile nav in general.

.mobile-only-header {
  display: none;
}


/* Small devices (tablets, 768px and up) */

@media (max-width: 768px) {
  .desktop-only-header {
    display: none;
  }
  .mobile-only-header {
    display: initial;
  }
}
<header class="desktop-only-header">
  <ul>
    <li><a href="#">Desktop</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<header class="mobile-only-header">
  <ul>
    <li><a href="#">Mobile</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</i></a></li>
    <li><a href="#">Contact</i></a></li>
  </ul>
</header>

Upvotes: 1

Related Questions