Solved

Navbar with 2 dropdowns in Bootstrap 3

Posted on 2014-04-13
4
1,001 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 Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

828 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