CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
user3163577
user3163577

Reputation: 79

How to keep showing number of notifications on small screens

Let me explain what I mean. On medium screens, the top navigation bar would look like this:

=========================================================
Logo                            10  Settings Account Home
=========================================================

Where "10" is the number of notifications and is a bascially a dropdown menu that shows recent notifications when clicked on.

On small screens, I want the menu to be like this:

==============
Logo   10  |||
==============

in which "|||" is the collapse button which shows
Settings Account Home when clicked on, and "10" has the same role as before.

As far as I have learned from bootstrap examples, ALL of "10 Settings Account Home" will go inside the collapse button. One solution I can think of is having two separate notification buttons and show/hide them using the media queries. But in this case, I should also have two separate menus (containing recent notifications) which doesn't seem smart to me. I appreciate it if you can give me any ideas to achieve what I'm looking for.

Upvotes: 1

Views: 153

Answers (1)

moodyjive
moodyjive

Reputation: 1807

One way to achieve this is to remove the piece of nav that you DO NOT WANT to be collapsed from navbar-collapse and put it right below the navbar brand and use the navbar-link class. See code below: 

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    <p class="navbar-text navbar-left"><a href="#" class="navbar-link">10</a></p>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Settings</a></li>
        <li><a href="#">Accounts</a></li>
        <li><a href="#">Home</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>

See non-nav links: http://getbootstrap.com/components/#navbar-links.

Upvotes: 1

Related Questions