How to edit the Bootstrap mobile collapsed dropdown menu layout?

105
November 23, 2016, at 4:12 PM

I am trying to figure out how to go about creating a custom dropdown menu for bootstrap when the page is in mobile mode (or any mode really that would display the hamburger button). I know how to manipulate the button itself but google search after google search I cannot find any good articles or posts about creating a custom bootstrap dropdown.

I am currently using the "out of the box" ul/li listed menu that Bootstrap uses by default but cannot figure out how to manipulate it so that when "mobile mode" is in use it switches to this style.

This is how my nav looks now:

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/#home"><img src="/img/logo.png" class="img-responsive"></a>
        </div>
        <div class="navbar-collapse collapse text-center">
            <ul class="nav navbar-nav text-center">
                <li>
                    <a href="/link/">Link</a>
                </li>
                <li>
                    <a href="/link/">Link</a>
                </li>
                <li>
                    <a href="/link/">Link</a>
                </li>
                <li>
                    <a href="/link/">
                        <div class="btn btn-outline btn-sm">Sign Up</div>
                    </a>
                </li>
                <li>
                    <a href="/link/">
                        <div class="btn btn-outline btn-sm">Sign In</div>
                    </a>
                </li>
            </ul>
        </div>

I made this quick concept of what I am trying to do but I cannot figure out where to start to where it won't affect my current nav which is just links/buttons aligned to the right.

Any help in the right direction would be greatly appreciated!

Answer 1

This is not difficult at all. Its all just CSS: create a div inside a list item and place two buttons there. Float them so there to the right of the rest of your links since they'll be the first li item, style them however.

Then adjust them for mobile by removing the float and add whatever styles you want.

See example Snippet.

.navbar.navbar-custom .signin { 
  float: right; 
  position: absolute; 
  right: 15px; 
} 
.navbar.navbar-custom .navbar-nav > li > a { 
  color: #ccc; 
} 
.navbar.navbar-custom a.btn.navbar-btn.btn-sign { 
  background: none; 
  border-radius: 0; 
  font-size: 14px; 
  margin-right: 5px; 
  margin-left: 5px; 
  color: #ccc; 
  display: inline-block; 
  padding: 6px 10px; 
} 
@media (max-width: 767px) { 
  .navbar.navbar-custom .navbar-nav { 
    text-align: center; 
  } 
  .navbar.navbar-custom .navbar-nav > li { 
    font-size: 16px; 
  } 
  .navbar.navbar-custom .navbar-nav > li:not(:first-child) { 
    right: 90px; 
  } 
  .navbar.navbar-custom .navbar-nav > li { 
    border-bottom: 1px solid #eee; 
  } 
  .navbar.navbar-custom a.btn.navbar-btn.btn-sign { 
    padding: 7.5px 15px; 
    font-size: 20px; 
  } 
  .navbar.navbar-custom .signin { 
    float: none; 
    clear: both; 
    position: relative; 
    right: 0; 
  } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
<nav class="navbar navbar-default navbar-custom "> 
  <div class="container-fluid"> 
    <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-nav"> <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
 
      </button> 
      <a class="navbar-brand" href="#"> 
        <img src="http://placehold.it/50x20" class="img-responsive"> 
      </a> 
 
    </div> 
    <div class="navbar-collapse collapse" id="bs-nav"> 
      <ul class="nav navbar-nav"> 
        <li class="signin"> <a href="#" class="btn btn-default navbar-btn btn-sign">Sign Up</a> 
          <a href="#" class="btn btn-default navbar-btn btn-sign">Sign in</a> 
 
        </li> 
        <li> <a href="/link/">Link</a> 
 
        </li> 
        <li> <a href="/link/">Link</a> 
 
        </li> 
        <li> <a href="/link/">Link</a> 
 
        </li> 
        <li> <a href="/link/">Link</a> 
 
        </li> 
      </ul> 
    </div> 
  </div> 
</nav>

Answer 2

Here how i usually do this. Create a separate CSS file and added to you html. Detect the screen size. Write CSS to overwrite the Boostrap css once you hit the screen size that you consider as mobile. Look at this post that has extended example on CSS for mobile divices. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

READ ALSO
Disable css styling in DataTables

Disable css styling in DataTables

I'm trying to fit a DataTables table inside a Bootstrap panel. .

70
free-jqGrid search button does not work on second click

free-jqGrid search button does not work on second click

The search button works on the first click, but once it is closed either by clicking the X (close button) or by running a search (setting to close after search) it does not open, there are also no errors in the console so I am unable to determine what is wrong and how to fix it. .

115
highmaps click on country and change its background color, Also remove the Series 1 from tooltips

highmaps click on country and change its background color, Also remove the Series 1 from tooltips

I am testing this highmaps for my appication and I could not find this information, Anybody with a link or answer please.

71
slideshow using mouse scrolling to change image

slideshow using mouse scrolling to change image

I'm trying to achieve this kind of effect for an images slideshow :.

85