Solved

Navbar with 2 dropdowns in Bootstrap 3

Posted on 2014-04-13
4
983 Views
Last Modified: 2014-04-19
Hello, I need to build a navbar with:

1. Dropdown name "Filter" aligned to the left, this only visible for mobile (it has to show a text, no button)
2. Navbar-brand (centered in mobile and left aligned for desktops) that says "Application" or whatever
3. Another dropdown aligned to the right visible in mobile and desktop, this with the typical mobile button (the one with the three horizontal lines)

Is this possible? How can I acomplish this?

Thanks so much.
0
Comment
Question by:ivanblue
  • 3
4 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39998934
I cannot picture what you are asking for from the description.

Without a diagram of some kind I am left guessing.  To give you any real help we will need a link to see how the page is coded and how it behaves.


Cd&
0
 
LVL 1

Author Comment

by:ivanblue
ID: 40000617
Hello COBOLdinosaur, I'm going to copy the navbar I already have, but I don't know how to code the one I want.

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
            
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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="<?php echo base_url(); ?>">MyApp</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

              <ul class="nav navbar-nav navbar-right">

                <li class="dropdown visible-xs visible-sm visible-md hidden-lg">
                  <a class="dropdown-toggle" href="#" data-toggle="dropdown">Filter <strong class="caret"></strong></a>
                  
                  <div class="dropdown-menu" style="padding: 15px;">
                    <form id="frmFilter" name="frmFilter" action="#" method="post">
                      <div class="form-group">
                        <label for="txtKeyword">Keyword</label>
                        
                        <input id="txtKeyword" name="txtKeyword" type="text" class="form-control" placeholder="restaurant, bar, electronics..." />
                      </div>

                      <div class="form-group">
                        <label for="sldRating">Rating</label>
                        
                        <input id="sldRating" type="text" class="form-control" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]" />
                      </div>

                      <div class="form-group">
                        <label for="sldPrice">Price</label>
                        
                        <input id="sldPrice" type="text" class="form-control" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]" />
                      </div>

                      <div class="form-group">
                        <label for="txtCategory">Category</label>
                        
                        <input id="txtCategory" name="txtCategory" type="text" class="form-control" placeholder="Enter category" value="Food and Drinks" />
                      </div>

                      <div class="form-group">
                        <label for="txtSubcategory">Subcategory</label>
                        <input id="txtSubcategory" name="txtSubcategory" type="text" class="form-control" placeholder="Enter subcategory" value="Bar" />
                      </div>
                    </form>
                  </div>
                </li>

                <li class="divider-vertical"></li>
                <li><a href="#">Sign Up</a></li>
                <li class="divider-vertical"></li>
                
                <li class="dropdown">
                  <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
                  
                  <div class="dropdown-menu" style="padding: 15px;">
                    <form id="frmLogin" name="frmLogin" action="#" method="post">
                      <div class="form-group">
                        <label class="sr-only" for="txtUsername">Username</label>
                        <input id="txtUsername" name="txtUsername" class="form-control" placeholder="username" type="text" size="30" />
                      </div>

                      <div class="form-group">
                        <label class="sr-only" for="txtUsername">Password</label>
                        <input id="txtPassword" name="txtPassword" class="form-control" placeholder="password" type="password" size="30" />
                      </div>

                      <div class="checkbox">
                        <label>
                          <input id="chkRememberMe" name="chkRememberMe" type="checkbox" value="1" /> Remember me
                        </label>
                      </div>

                      <input id="btnLogin" name="btnLogin" class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" value="Ingresar" />
                    </form>
                    
                    <hr style="margin:10px 0 0 0;" />

                    <a href="#"><img src="public/img/facebook-sign-in.png" alt="" style="width:220px;margin:5px 0;" /></a>
                    <a href="#"><img src="public/img/google-sign-in.png" alt="" style="width:220px;margin:5px 0;" /></a>

                  </div>
                </li>
              </ul>              
            </div>
          </nav>

Open in new window


This is how the navbar currently looks on desktop and mobile:
Current Navbar Desktop
Current NavBar Mobile
And this is how I want the navbar to look like on mobile:
Wanted NavBar Mobile
Thanks!
0
 
LVL 1

Accepted Solution

by:
ivanblue earned 0 total points
ID: 40000794
I've done it! I developed the answer to my question:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            
            <div class="navbar-header" style="text-align:center;">
              <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

              <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navbar-ex2-collapse" style="/*paddind:3px 15px;*/padding: 9px 10px 3px 10px;margin-left: 15px;">
                <span class="sr-only">Toggle navigation</span>
                <i class="glyphicon glyphicon-search" style="font-size:16px;color:#fff"></i>
              </button>

              <div style="text-align:center;padding-top: 15px;"><a href="<?php echo base_url(); ?>" style="font-size: 18px;color:#ccc;">MyApp</a></div>
            </div>

            <div class="collapse navbar-collapse" id="navbar-ex1-collapse">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Sign Up</a></li>
                <li class="divider-vertical"></li>
                
                <li class="dropdown">
                  <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
                  
                  <div class="dropdown-menu" style="padding: 15px;">
                    <form id="frmLogin" name="frmLogin" action="#" method="post">
                      <div class="form-group">
                        <label class="sr-only" for="txtUsername">Username</label>
                        <input id="txtUsername" name="txtUsername" class="form-control" placeholder="username" type="text" size="30" />
                      </div>

                      <div class="form-group">
                        <label class="sr-only" for="txtUsername">Password</label>
                        <input id="txtPassword" name="txtPassword" class="form-control" placeholder="password" type="password" size="30" />
                      </div>

                      <div class="checkbox">
                        <label>
                          <input id="chkRememberMe" name="chkRememberMe" type="checkbox" value="1" /> Remember me
                        </label>
                      </div>

                      <input id="btnLogin" name="btnLogin" class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" value="Ingresar" />
                    </form>
                    
                    <hr style="margin:10px 0 0 0;" />

                    <a href="#"><img src="public/img/facebook-sign-in.png" alt="" style="width:220px;margin:5px 0;" /></a>
                    <a href="#"><img src="public/img/google-sign-in.png" alt="" style="width:220px;margin:5px 0;" /></a>

                  </div>
                </li>
              </ul>
            </div>

            <div class="collapse navbar-collapse" id="navbar-ex2-collapse">

              <div class="nav navbar-nav navbar-left visible-xs visible-sm visible-md hidden-lg" style="padding:15px;">

                    <form id="frmFilter" name="frmFilter" action="#" method="post">
                      <div class="form-group">
                        <label for="txtKeyword">Keyword</label>
                        
                        <input id="txtKeyword" name="txtKeyword" type="text" class="form-control" placeholder="" />
                      </div>
                    </form>
              </div>             
            </div>
          </nav>

Open in new window


Thanks!
0
 
LVL 1

Author Closing Comment

by:ivanblue
ID: 40010166
As there were no other answers I was force to keep looking over the internet and found a good solution that I slightly change to my needs. Works perfect for everybody who wants two navbar toggle buttons on mobile with Twitter Bootstrap 3. Thanks.
0

Featured Post

Free camera licenses with purchase of My Cloud NAS

Milestone Arcus software is compatible with thousands of industry-leading cameras for added flexibility. Upon installation on your My Cloud NAS, you will receive two (2) camera licenses already enabled in the software. And for a limited time, get additional camera licenses FREE.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now