CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
KaekeaSchmear
KaekeaSchmear

Reputation: 1578

Bootstrap 3 Responsive Menu - Navbar spacing issue

I'm having the following problem:

The Bootstrap 3 navbar according to the documentation has three different dividers as defined here: http://getbootstrap.com/components/#navbar-default

However, I don't have any navigation links to input in the nav navbar-nav section next to brand; I only make use of navbar-form navbar-left and nav navbar-nav navbar-right so I decided to remove nav navbar-nav entirely.

The issue that gives me is that when the menu collapses there is a weird spacing between the navbar and the form. What is the proper way to implement what i'm trying to do and / or avoid this issue?

Update If I drop nav navbar-nav navbar-right I get the same spacing issue except for the bottom for the bottom of the collapsed menu. It seems that Bootstrap expects something to be there; is there a way around this?

Update2 Default Bootstrap 3 Navbar http://jsfiddle.net/wmkp595e/

Upvotes: 0

Views: 1227

Answers (3)

crazymatt
crazymatt

Reputation: 3286

This is default behavior with Bootstrap. If there is too much content in the top navigation then when the browser window size is smaller it will cause the elements in the header to wrap. There are a couple of ways to deal with it:

  • You can reduce the amount of space that is being used in the navigation by either reducing padding or making your navigation links use less text or sizing down your input elements. This is probably the simplest option.

  • Alternatively you can edit the @media CSS in bootstrap to allow the navbar-toggle button to activate sooner.

Upvotes: 0

Christina
Christina

Reputation: 34652

If you look at the Bootstrap 3 css (https://raw.githubusercontent.com/twbs/bootstrap/master/dist/css/bootstrap.css) of the navbar before the media queries -- which is the one used by the small viewport menu, you'll see that the borders are there no matter where you put your form, so if it's right after the .navbar-header you will have double rules and a padding on the top that you may or may not want to remove.

.navbar-form {
  padding: 10px 15px;
  margin-top: 8px;
  margin-right: -15px;
  margin-bottom: 8px;
  margin-left: -15px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}

If you put your form right after it, write some css to address this, since your css will come after the Bootstrap CSS, you will need a max width or yours will screw up the padding:

@media (max-width:767px) {
   .navbar-form {
      border-top:0px;
      padding-top:0;
   }
}

DEMO: http://jsfiddle.net/wmkp595e/3

Upvotes: 2

maioman
maioman

Reputation: 18734

nav navbar-nav navbar-form navbar-left navbar-right

are utility classes that sets positioning of the element,

can you make a fiddle or show the site?

Upvotes: 0

Related Questions