CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
JT1
JT1

Reputation: 97

remove toggle within mobile breakpoint

Hoping someone can help with this.

I have a navbar set up similar to the ones we see on GMail, Facebook, etc with the User Avatar button with options like settings, account, logout. I also have the main website navigation inline with the avatar icon.

When the screen is viewed on a mobile device the navbar collapses as it should however i want the avatar toggle button to disappear so the menu appears like:

<li><a href="#"><span class="glyphicon glyphicon-cloud-upload"></span> Upload</a></li>
<li><a href="#"><span class="glyphicon glyphicon-globe"></span> Globe</a></li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span> Favourite</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Me</a></li>
<li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
<li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>

Heres the fiddle: http://jsfiddle.net/Z5Txw/

Upvotes: 0

Views: 95

Answers (2)

Milukove
Milukove

Reputation: 74

You can use hidden-xs and visible-xs classes to create different menus. To main navigation and avatar navigation menus use hidden-xs, and create another menu for mobile device with visible-xs class. Like this: jsfiddle.net/Z5Txw/2/

Upvotes: 0

Christian
Christian

Reputation: 1683

Add the hidden-xs class to the element you want to hide when the navbar is collapsed. Updated fiddle: http://jsfiddle.net/Z5Txw/3/.

Edit: I edited the fiddle based on your comment, adding another ul with visible-xs to achieve what you want. It looks like so now:

<!-- Visible when navbar is collapsed -->
<ul class="nav navbar-nav visible-xs">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Me</a>
        </li>
        <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a>
        </li>
        <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
        </li>
    </ul>

    <!-- Visible when navbar isn't collapsed. -->
    <ul class="nav navbar-nav navbar-right hidden-xs">
        <li class="avatar-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="http://placehold.it/30x30" height="30px" class="img-circle avatar" alt="Avatar">
            </a>

            <ul class="dropdown-menu">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Me</a>
                </li>
                <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a>
                </li>
                <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
                </li>
            </ul>
        </li>
    </ul>

Upvotes: 1

Related Questions