Different navbar styles when on mobile or desktop

Question

Is there a way to change the navigation bars according to their viewports?

For example, when your viewport is 1024x768 you're gonna show the first navigation bar which built for desktop sizes and more, but if your viewport is lower than that resolution, display the 'mobile-friendly' navigation bar.

Check here: http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile — Austin Ewens, Feb 19 '17 at 03:42

score 1 · Accepted Answer · answered Feb 19 '17 at 06:58

You can use Media Queries:

In CSS:

@media (min-width:768px) and (min-height:1024px) {
 /*Desktop css*/
}
@media (max-width:768px) and (max-height:1024px) {
 /*Mobile css*/
}

Or with external stylesheets:

<link rel="stylesheet" media="(min-width:768px) and (min-height:1024px)" href="desktop.css">
<link rel="stylesheet" media="(max-width:768px) and (max-height:1024px)" href="mobile.css">

Different navbar styles when on mobile or desktop

1 Answers1