CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Ollipekka
Ollipekka

Reputation: 41

Changing navbar height breaks responsive collapse?

I succesfully reduced the height of navbar, but after the resize browser - responsive collapse breaks.

Normally if it's in collapse mode it expands the navbar area so all of the dropdowns are within it. After changing height of the navbar it jumps out of the div and is missing most of the properties

Are there any "tutorials" or guides how to successfully change the height of navbar without breaking responsiveness.

Code used :

.navbar, .navbar-header, .navbar-brand, .navbar-nav, 
.navbar-nav ul, .navbar-nav li, .navbar-nav>li>a {
    margin-top: 0px;
    min-height: 28px;
    height: 28px;
    padding: 1px 5px 1px 5px
}

JSFiddle

Upvotes: 4

Views: 3817

Answers (2)

zessx
zessx

Reputation: 68810

Here's a CSS you can use :

/* Navbar height */
.navbar {
    min-height: 28px;
}
.navbar-brand,
.navbar-nav>li>a {
    line-height: 26px;
    padding: 1px 5px;
}
/* Toggle button size */
.navbar-toggle {
    margin: 4px;
    padding: 4px;
}
.navbar-toggle .icon-bar {
    width: 14px;
}
.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 2px;
}

Updated JSFiddle

Note : I put a margin-top on the navbar to avoid the "Result" label.

Upvotes: 0

Bass Jobsen
Bass Jobsen

Reputation: 49054

Use a media query to set the height only for screen widths above the @grid-float-breakpoint

LESS:

@media(min-width:@grid-float-breakpoint)
{   
.navbar {min-height:200px;}
}

CSS:

@media(min-width:768px)
{   
.navbar {min-height:200px;}
}

See also http://bootply.com/96446 (based on the code in your jsfiddle)

Upvotes: 3

Related Questions