Showing different manu based on devices

Question

I want to show different menu based on different devices like for mobile and table I want to show menu using sidr. and for large devices menu representation should be fixed bootstreap menu. How to achive this my code is

My code is

<div id="large-menu">
    <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">My Site</a>
            </div>
            <!-- Collection of nav links and other content for toggling -->
            <div id="navbarCollapse" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="Login">Login </a></li>
                    <li><a href="SignUp">Sign Up</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="AboutUs">About Us</a></li>
                    <li><a href="ContactUs">Contact Us</a></li>
                    <li><a href="Terms">Terms & condition</a></li>
                    <li><a href="Privacy">Privacy policy</a></li>
                    <li><a href="Careers">Career </a></li>
                    <li><a href="business">Business</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<div id="mobile-menu">
    <div class="bottom-logo">
        <a id="simple-menu" href="#sidr" style="font-size: 50px"><i class="fa fa-list"></i></a>
        <a href="http://www.example.com" style="font-size: 50px">MySite</a>
    </div>
    <div id="sidr">
        <ul>
            <li><a href="Login">Login </a></li>
            <li><a href="SignUp">Sign Up</a></li>
            <li><a href="ForgetPassword">Forget Password</a></li>
            <li><a href="AboutUs">About Us</a></li>
            <li><a href="ContactUs">Contact Us</a></li>
            <li><a href="Terms">Terms & condition</a></li>
            <li><a href="Privacy">Privacy policy</a></li>
            <li><a href="Careers">Career </a></li>
            <li><a href="business">Business</a></li>
        </ul>
    </div>
</div>

My complete code is HERE

You want to show mobile menu in only mobile device and large menu only in big device, am i right? — Vishal Panara, Jul 20 '16 at 09:47

Vishal Panara · Accepted Answer · 2016-07-20T10:36:54.733

There are two menus in your code, For mobile view and for big view. In big view i just hide small menu and show big menu with the use of @media (min-width: 769px){} and for mobile view i just hide big menu & show small menu with the use of @media (max-width: 768px){}

@media (max-width: 768px){ 
  #large-menu{
    display: none;
  }
  #mobile-menu{
    display: block;
  }
}

@media (min-width: 769px){ 
  #large-menu{
    display: block;
  }
  #mobile-menu{
    display: none;
  }
}

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

Solved my problem by adding this media query

 @media screen and (min-width: 0px) and (max-width: 768px) {
        #mobile-menu{
            display: block;
        }
        #large-menu{
            display: none;
        }
         }

    @media screen and (min-width: 769px) and (max-width: 2000px) {
        #mobile-menu{
            display: none;
        }
        #large-menu{
            display: block;
        }
           body {
            padding-top: 50px;
        }
    }

Working link is here Reference to stackoverflow

edited May 23 '17 at 10:27

Community

1
1

answered Jul 20 '16 at 10:46

xrcwrn

5,339
17
68
129

1

Good, You can write "media (max-width: 768px){}" rather than "media screen and (min-width: 0px) and (max-width: 768px){}". – Vishal Panara Jul 20 '16 at 11:01
1

And what about after 2000px? – Vishal Panara Jul 20 '16 at 11:03

Showing different manu based on devices

2 Answers2