Solved

Navbar with 2 dropdowns in Bootstrap 3

Posted on 2014-04-13
4
1,011 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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS auto-height of empty div 3 64
boostsrap 1 32
Changing the format from a text box to a drop-down menu 9 34
Difference between Leaflet and MapBox? 5 43
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

739 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