CODEWITHSUNDEEP
htmlmenu
p_e_88
p_e_88

Reputation: 1037

Different Menu on Mobile View

How can i get different menu styles in a layout.

For example in the desktop view is there home, profile and messages and in the responsive mobile layout should there be a icon before each menu point. but not in the desktop version.

I'm using bootstrap as framework and i tried couple of things but it didnt worked out for me.

<header 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">Brand</a>
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Login</a></li>
        </ul>
    </div>
</div>

Do i have to create a extra mobile menu and display the normal menu off if the viewport ist smaller than desktop? Jsfiddle

Upvotes: 1

Views: 3444

Answers (2)

linusg
linusg

Reputation: 6439

Its as easy as Zlatko Vujicic has commented: just add a media query in your css that sets display: none for the small-device layout when a specific size is reached.

While im sometimes get in trouble with this, you can also use javascript (jquery) to hide the mobile navigation.

Hope this helps

Upvotes: 0

KMathmann
KMathmann

Reputation: 444

I think what you need are media-queries.

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Example:

body {
    background-color:lightgreen;
}

@media only screen and (max-width: 500px) {
    body {
        background-color:lightblue;
    }
}

When the width of this document is less than 500 pixels, the background-color is "lightblue", otherwise it is "lightgreen".

http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery

So you can define different styles for desktop and mobile view. You can hide the icons on desktop.

And please do not use JQuery like linusg said. JQuery is outdated it was a long time a realy good framework but today it isn't anymore. Use normal javascript (use the newest standard Ecmascript6 and maybe Ecmascript7).

Upvotes: 1

Related Questions