28555

Responsive Twitter Bootstrap, Best Practice - Create 4 Navigation buttons below logo

Question:

I would like 4 navigation buttons to take up the full width, with a column gap between each (as if they were 4 span3 DIVS).

Like this: <img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/FzAzF.png" data-original="https://i.stack.imgur.com/FzAzF.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

This doesn't fit any of the Bootstrap navigation examples I can find - they are all stuck to the top.

Bearing in mind navigation should be an unordered list - how can I best implement this, keeping it responsive?

UPDATE 19 Sep 2013 - JSFiddle image below: <img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/sVN72.png" data-original="https://i.stack.imgur.com/sVN72.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Answer1:

You could adapt bootstrap's navbar (below example is bootstrap 2.3.2), making it look more like yours, but still keeping their responsive styling. Don't forget when using navbar to include jquery and bootstrap.js on your page or the menu button when viewing on mobile won't work.

<style> .navbar-inner { background: none; border: none; } .nav li { background: #ccc; text-align: center; } @media (max-width: 979px) and (min-width: 768px) { .navbar [class*="span"], .navbar .row-fluid [class*="span"] { float: none; display: block; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } </style> <div class="navbar"> <div class="navbar-inner"> <div class="container-fluid"> <button class="btn btn-navbar collapsed" type="button" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> <div class="nav-collapse collapse"> <ul class="nav row-fluid"> <li class="span3"><a href="#">Home</a> </li> <li class="span3"><a href="#">About Us</a> </li> <li class="span3"><a href="#">Our Stuff</a> </li> <li class="span3"><a href="#">Contact Us</a> </li> </ul> </div> </div> </div> </div>

In this <a href="http://jsfiddle.net/guydog28/7Aguy/" rel="nofollow">jsfiddle</a>, resize the width of the results window to see desktop vs mobile navbar.

<strong>UPDATE</strong>

If you wish to do this without the navbar component (and thus losing the tablet/mobile dropdown but staying responsive), a simple nav should do. Try this <a href="http://jsfiddle.net/guydog28/CY2Bv/" rel="nofollow"><strong>jsFiddle</strong></a>. Code Below:

<style> .custom-nav .nav li a { background-color: #aaa; text-align: center; color : white; padding: 6px 0; } .custom-nav .nav li a:hover, .custom-nav .nav li a:hover{ background-color: #ccc; } @media (max-width: 767px) { .custom-nav .nav li { margin-bottom:2px; } } </style> <div class="custom-nav"> <ul class="nav row-fluid"> <li class="span3"><a href="#">Home</a> </li> <li class="span3"><a href="#">About Us</a> </li> <li class="span3"><a href="#">Our Stuff</a> </li> <li class="span3"><a href="#">Contact Us</a> </li> </ul> </div>

Recommend

  • How can I have Brand and Navbar on separate lines?
  • How to render flexdashboard from the command line?
  • Leaflet map not sizing to dimensions of target element
  • How an included partial insert code into parent's block?
  • Is there a filesystem plugin available for django?
  • How to setCenter mapview with location in google maps sdk for iOS
  • When getting Document object from Word.Application object, its members are not filled from gencache
  • CLOSED!! How i can detect the type from a string in Scala?
  • cordova build android throws error on Ubuntu 12.04
  • OpenOptionsMenu not working with ActionBarSherlock Custom SubMenu
  • Struct pointer casts
  • Unique SMS sender id?
  • jQueryMobile, Ajax Navigation, and MVC
  • Which browser have this strange user agent? (IOS device)
  • css background images not always displayed
  • uml Composition relationships to RDF and OWL
  • Azure table store snapshot/backup capability
  • Bypass multiple inheritance in Java
  • wxPython: displaying multiple widgets in same frame
  • xtable package: Skipping some rows in the output
  • Android fill_parent issue
  • Change JButton Shape while respecting Look And Feel
  • Deleting and Updating values from a cusrsor adapter
  • req.body is undefined - nodejs
  • Window Size for Mac application
  • Modifying destination and filename of gulp-svg-sprite
  • htaccess rewriting URLs with multiple forward slashes
  • Importing jscolor library in angular 2
  • what is the difference between the asp.net mvc application and asp.net web application
  • Display Images one by one with next and previous functionality
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • Web-crawler for facebook in python
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • How to disable jQuery.jplayer autoplay?
  • A cron job substitute?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)