html - Make **Responsive navigation** supporting different devices such as mobile, tab and desktop -

i have navigation want make responsive navigation supporting different devices such mobile, tab , desktop.

i ng-including menu.html file in sidebar mobile, , including same hmtl file in header desktop.

the question how make styles mobile sidebar stay on mobile , add second styles desktop.

this sidebar using mobile: http://pages.revox.io/dashboard/latest/html/index.html disabling show desktop

and including menu in header desktop: http://pages.revox.io/dashboard/latest/html/tabs_accordian.html

both of styles need included in resources of theme.

here structure using both sidebar , header right now

   <ul id="menu-lg" class="menu-items text-uppercase list-inline nav-tabs-simple" role="tablist">         <li class="sm-m-t-20 list-unstyled active" ui-sref-active="open" data-toggle="tab">             <span class="icon-thumbnail hidden-md hidden-lg"><i class="fa fa-dashboard"></i></span>             <a class="nav-text" ui-sref="product.dashboard" data-toggle="tab">                 <span class="titl">dashboard</span>             </a>         </li>         <li class="list-unstyled" ui-sref-active="open">             <a class="nav-text" ui-sref="product.balance">                 <span class="title">balance</span>             </a>             <span class="icon-thumbnail hidden-md hidden-lg"><i class="fa fa-dollar"></i></span>         </li>         <li class="list-unstyled" ui-sref-active="open">             <a class="nav-text" ui-sref="product.users">                 <span class="title">users</span>             </a>             <span class="icon-thumbnail hidden-md hidden-lg"><i class="fa fa-user"></i></span>         </li>     </ul> 

and structure of second menu styles need apply structure on top:

<ul class="nav nav-tabs nav-tabs-simple" role="tablist">     <li class="active"><a ui-sref="product.dashboard" data-toggle="tab"      role="tab" aria-expanded="false">hello world</a>     </li>     <li class=""><a ui-sref="product.balance" data-toggle="tab" role="tab" aria-expanded="false">hello two</a>     </li>     <li class=""><a ui-sref="product.users" data-toggle="tab" role="tab" aria-expanded="true">hello three</a>    </li> </ul> 

as can see of classes merged, menu behaves alright there bugs , thinking there must better solution problem.

you talking making navigation responsive.

you need use breakpoints achieve result on different devices.

here few of commonly used break-points

@media screen , (max-width:959px){     /*your css classes*/ } @media screen , (max-width:640px){     /*your css classes*/ } @media screen , (max-width:320px){     /*your css classes*/ }