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
Related
I had this kendo treeview. When select a node or sub's-node I want the orange color at full line and same with others (refer to image below).
I to use script below, but when it come to sub's-group the align is not same. Appreciate your help.
.k-treeview span.k-in {
margin-left: -10%;
padding-left: 10%;
padding-right: 60%;
}
DEMO IN DOJO
The way the tree currently works is that the li.k-item have a left padding of 16px, so for the second level it's 32px and so on.
What you need to do is put the indenting mechanism somewhere else. Your li.k-item must have no left padding, but a div inside must. Depending on your item template, it will be something like:
.k-treeview li > div { padding-left: 16px }
.k-treeview li li > div { padding-left: 32px }
.k-treeview li li li > div { padding-left: 48px }
You can generate a dozen levels with less or sass.
When you have this, you can style the selected row:
li[aria-selected="true"] { border: 2px solid orange }
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.
I'm trying to remove ALL space around a <h2> element
I have this simple markup:
<div>
<h2>Count down</h2>
</div>
I tried to remove spacing with:
h2 {
margin: 0;
padding: 0;
line-height: 0;
}
But some white space remains. You can see it on this screen shot:
There's spacing both over and under (and it's not padding or margin). How can I get rid of that extra spacing?
EDIT: Here is a simple jsfiddle to illustrate. I want to remove the space colored light blue.
The inspector in the screenshot shows
.countdown h2 {
margin: 0 0 10px;
}
which equates to:
.countdown h2 {
margin-bottom: 10px;
}
That means you must have a styled h2 somewhere in your css.
Because the style is nested as .countdown h2, it will take precendent over just styling h2 by itself.
If you cannot delete it, and would rather not use !important to override it, you may be able to override the style like:
body .countdown h2 {
margin: 0;
}
This gives it three elements, making it more specific than the two in the inspector. See an example of how it works here: JS Fiddle
More on CSS precedence: W3 - The cascade
you have padding on your countdown class which surrounds your h2 of 40px as you made it global it will put padding on top bottom left and right at 40px to fix try this
.countdown { padding:0px 40px 0px 40px; }
if you mean the h2 has space at the bottom thats because you have a style on it putting margin of 10px at the bottom to remove just delete that style.
.countdown h2 { margin: 0 0 10px; }
if you dont want to delete it you can overide it by doing
h2 {
margin: 0px !Important;
padding: 0px;
line-height: 0;
}
you should not really use the !important unless really needed which in this case it is not.
This starts from a previous question that I asked but I think I know what needs to be done but not the How. I have this block of code that defines a pager in bootstrap and applies the bootstrap style to it:
<xp:pager partialRefresh="true" id="pager1" for="repeat1"
panelPosition="left" styleClass="bootstrapPager">
<xp:pagerControl type="Previous" id="pagerControl1"
styleClass="bootstrapPagerPrevious">
<xp:this.value><![CDATA[«]]></xp:this.value>
</xp:pagerControl>
<xp:pagerControl type="Group" id="pagerControl2"
styleClass="bootstrapPagerMiddle">
</xp:pagerControl>
<xp:pagerControl type="Next" id="pagerControl3"
styleClass="bootstrapPagerNext">
<xp:this.value><![CDATA[»]]></xp:this.value>
</xp:pagerControl>
</xp:pager>
then in a css that I load I have this to over-ride the bootstrap class bootstrapPager:
.bootstrapPager {
display: inline-block;
padding-left: 0;
border-radius: 4px;
margin-left: 10px;
margin-bottom: 2px;
margin-top: 2px;
line-height: 1.42857;
}
The default .bbotstrapPager has a top and bottom margin of 10px and I want to reduce it to 2px. I tried !important but that does not work. I have read a bit about css specificity and I think that is what is the problem is. So in this context how would I go about setting specificity in my .bootstrapPager class so that it ranks higher than the default class?
My css experience is not great but getting there.
Set your margins this way:
.pagination {
margin: 0px;
}
.bootstrapPager {
margin-left: 10px;
margin-bottom: 2px;
margin-top: 2px;
line-height: 14px;
}
The pager gets rendered to a <div> and an included <ul>.
The <ul> tag has a css class pagination with a margin of 20px on top and bottom.
So, first set those margin to 0px overwriting class pagination with your css resource.
Then you can set the margins you like in your css class bootstrapPager.
Alternatively, you can put all your changes into class pagination and omit your class bootstrapPager.
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.