?
Solved

Navbar with 2 dropdowns in Bootstrap 3

Posted on 2014-04-13
4
Medium Priority
?
1,042 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…
Suggested Courses

800 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