Is there any way to reduce the height of the navigation bar in this?
http://www.bootply.com/render/1dopQbJEMd. I am using exactly the same css properties in the link.I tried with the height property in css. But its not getting reduced.
after inspecting that code, i saw that
.navbar has min-height:50px , change it to min-height:0 so it will inherit the height from it's contents
.navbar-brand has padding:15px 15px, reduce the top and bottom padding how you want, for example padding:5px 15px
.navbar-nav>li>a has padding-top:15px;padding-bottom:15px reduce them as well to 5px as you did on point 2
.navbar-text has margin-top:15px;margin-bottom:15px , reduce it also to 5px as you did on point 2 and 3
in the end you will have CSS :
.navbar {
min-height:0;
}
.navbar-brand {
padding:5px 15px;
}
.navbar-nav>li>a {
padding-top:5px;
padding-bottom:5px;
}
.navbar-text {
margin-top:5px;
margin-bottom:5px;
}
the height of your .navbar will be 30px, with 20px less than before
Take a look at this link:
http://getbootstrap.com/customize/#navbar
There you can see the variables you can change. One of them is the height of the navbar. Change that variable and download the CSS and JS files at the bottom of the page. Use the new files instead of default Bootstrap files.
You can also try changing the CSS, but I find it way harder.
Related
How can I decrease the space between boxes in Shiny dashboard?
I have tried the following:
.box-body{
margin: 0 !important;
padding: 0 !important;}
But that seems to add a margin towards the inside of the box. What I want is to reduce the space between boxes such that these boxes are basically touching each other.
Use only this CSS:
[class*="col-lg-"],[class*="col-md-"],
[class*="col-sm-"],[class*="col-xs-"]{
padding-right:0 !important;
padding-left:0 !important;
}
Here are the css properties that cause your boxes to be separated the way the are. The col classes are found in bootstrap.css and .box can be found in AdminLTE.min.css.
.box { margin-bottom: 0; }
[class*="col-lg-"],[class*="col-md-"],
[class*="col-sm-"],[class*="col-xs-"]{
padding-right:0 !important;
padding-left:0 !important;
}
There ARE other questions regarding this issue. However, each one seems to have an individual answer, because the answers found do not work.
Just scroll right on my site and see the white space all through the site: http://highcatering.wpengine.com/
NOT nice!
Any ideas? I have tried the following:
body{width:100%;}
body{margins:0 0 0 0;}
Thanks!
The offending line is in style.css:
.post ol, .post ul { margin:0 0 30px 20px; padding:0;}
It is adding a margin to all ol and ul within your main body section. If you remove it, the white space will disappear. I'm not sure if it is needed somewhere else on your site.
it should be like:
body
{
width:100%;
margin:0;
}
That large white bar down there, is a place to insert some widgets, if you do not want to use this section, add this on your CSS file:
.footerWrap.footerStyleLight {
display: none;
}
If you want to have something on this section later but with a different background color, just change the background color like this for example:
.footerWrap.footerStyleLight {
background: #2c2c2c;
}
Although you probably have this class in your CSS file, search for it delete what's inside and add this display: none; or for changing background color background: #2c2c2c;
I want to make my navbar in BS3 to be of height 20px. How do I do this?
I've tried the following:
.tnav .navbar .container { height: 28px; }
Did nothing.
.navbar-fixed-top {
height: 25px; /* Whatever you want. */
}
Appears to be able to increase the size of the bar, but cannot decrease.
What is a good way to do this while preserving the container's alignment, etc.
bootstrap had 15px top padding and 15px bottom padding on .navbar-nav > li > a so you need to decrease it by overriding it in your css file and .navbar has min-height:50px; decrease it as much you want.
for example
.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;}
.navbar {min-height:32px !important}
add these classes to your css and then check.
Minder Saini's example above almost works, but the .navbar-brand needs to be reduced as well.
A working example (using it on my own site) with Bootstrap 3.3.4:
.navbar-nav > li > a, .navbar-brand {
padding-top:5px !important; padding-bottom:0 !important;
height: 30px;
}
.navbar {min-height:30px !important;}
Edit for Mobile...
To make this example work on mobile as well, you have to change the styling of the navbar toggle like so
.navbar-toggle {
padding: 0 0;
margin-top: 7px;
margin-bottom: 0;
}
Instead of <nav class="navbar ... use <nav class="navbar navbar-xs...
and add these 3 line of css
.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
Output :
For Bootstrap 4
Some of the previous answers are not working for Bootstrap 4. To reduce the size of the navigation bar in this version, I suggest eliminating the padding like this.
.navbar { padding-top: 0.25rem; padding-bottom: 0.25rem; }
You could try with other styles too.
The styles I found that define the total height of the navigation bar are:
padding-top and padding-bottom are set to 0.5rem for .navbar.
padding-top and padding-bottom are set to 0.5rem for .navbar-text.
besides a line-height of 1.5rem inherited from the body.
Thus, in total the navigation bar is 3.5 times the root font size.
In my case, which I was using big font sizes; I redefined the ".navbar" class in my CSS file like this:
.navbar {
padding-top: 0.25rem; /* 0px does not look good on small screens */
padding-bottom: 0.25rem;
font-size: smaller; /* Just because I am using big size font */
line-height: 1em;
}
Final comment, avoid using absolute values when playing with the previous styles. Use the units rem or em instead.
The answer above worked fine (MVC5 + Bootstrap 3.0), but the height returned to the default once the navbar button showed up (very small screen). Had to add the below in my .css to fix that as well.
.navbar-header .navbar-toggle {
margin-top:0px;
margin-bottom:0px;
padding-bottom:0px;
}
If you have only one nav and you want to change it, you should change your variables.less: #navbar-height (somewhere near line 265, I can't recall how many lines I added to mine).
This is referenced by the mixin .navbar-vertical-align, which is used for example to position the "toggle" element, anything with .navbar-form, .navbar-btn, and .navbar-text.
If you have two navbars and want them to be different heights, Minder Saini's answer may work well enough, when qualified further by an , e.g., #topnav.navbar but should be tested across multiple device widths.
.navbar-nav > li > a {padding-top:7px !important; padding-bottom:7px !important;}
.navbar {min-height:32px !important;}
.navbar-brand{padding-top:7px !important; max-height: 24px; }
.navbar .navbar-toggle { margin-top: 0px; margin-bottom: 0px; padding: 8px 9px; }
In Bootstrap 4
In my case I have just changed the .navbar min-height and the links font-size and it decreased the navbar.
For example:
.navbar{
min-height:12px;
}
.navbar a {
font-size: 11.2px;
}
And this also worked for increasing the navbar height.
This also helps to change the navbar size when scrolling down the browser.
Simply change the default 50px navbar-height by including this to your variable overrides.
You can find this default navbar-height on line 365 and 360 on bootstrap's SASS and LESS variables files respectively.
File location, SASS:
bootstrap/assets/stylesheets/bootstrap/_variables.scss
File location, LESS:
bootstrap/less/variable.less
I've seen a number of questions and answers about changing the background color of the default Twitter Bootstrap Primary Navbar, but they seem to deal with the top-most layer (the navbar-inner class), masking a number of other colors and options underneath.
I'm looking to create a transparent navbar, and after adding "background-color:transparent;" to each layer I can find, I still have a stock white bar across the top of my screen. Currently my app.css has these few lines:
.navbar-inner{
background-color:transparent;
}
.navbar-inner container{
background-color:transparent;
}
.navbar{
background-color:transparent;
}
#nav-main{
background-color:transparent;
}
#banner{
background-color:transparent;
}
I'm running out of guesses here, and my scatter-shot method seems to be failing me. Is there a rule I just haven't seen (and modified) yet, or am I going about this the wrong way altogether?
The problem is they are using an image on the background. So by setting the background-color, you are only setting the color behind the image. Try something along these lines:
.navbar-inner{
background:transparent !important;
}
.navbar-inner container{
background:transparent !important;
}
.navbar{
background:transparent !important;
}
#nav-main{
background:transparent !important;
}
#banner{
background:transparent !important;
}
Got this result in Bootstrap 3 using:
body { background: transparent }
This is my CSS/LESS CSS code so far:
//make navbar taller
#navbarHeight: 60px;
//make navbar link text 18px
.navbar-inner {
font-size: 18px;
}
//make navbar brand text 36px
.navbar .brand {
font-size: 36px;
}
Which produces this:
FYI I'm using the Twitter Bootstrap demo code, I haven't altered the html (aside from changing the brand name).
As you can see, the brand name is centered vertically within the navbar like it should be, but the navigation links are not (they're bit higher towards the top). The problem only became apparent once I altered the height of the navbar. How can I get them to be centred vertically (like this website, for example)?
If it's any help, highlighting the elements in Chrome shows this:
The .brand class uses a different line-height than the base text that is used throughout Bootstrap, as well as a few other key differences.
Relevant parts from the original bootstrap navbar LESS -
For .brand:
.brand {
// Vertically center the text given $navbarHeight
#elementHeight: 20px;
padding: ((#navbarHeight - #elementHeight) / 2 - 2) 20px ((#navbarHeight - #elementHeight) / 2 + 2);
font-size: 20px;
line-height: 1;
}
For links in the navbar:
.navbar .nav > li > a {
#elementHeight: 20px;
padding: ((#navbarHeight - #elementHeight) / 2 - 1) 10px ((#navbarHeight - #elementHeight) / 2 + 1);
line-height: 19px;
}
You'll probably need to play around with the values of #elementHeight, line-height, and maybe padding for the .navbar .nav > li > a selector to reflect the bigger 60px #navbarHeight (these default values are meant for a 40px #navbarHeight). Maybe try a 40px #elementHeight and/or a 29px line-height to start.
If the above answer doesn't help, and you haven't touch the html, the only thing I can think of is the css. You might want to look at the css which the bootstrap example used and modify the sizes of .navbar-inner and .navbar .brand accordingly.
You can try this:
display: table-cell;
I've just had a similar issue with Bootstrap 3 but with the brand eliment. In the end I used the following css:
.navbar-brand {
font-size: 3em;
line-height: 1em;
}
My nav bar has increased in size due to a 50px image, with top and bottom margins of 10px. Not sure if that is of any help.