I am trying to increase bootstrap 3.0 navbar height which is used with fixed top behavior.
How can I do it?
Without seeing your code it is hard to help but in Bootstrap 3 typically,
This is the less variable #navber-height and #navbar-padding-vertical will adjust the height of the navbar.
But in my current Bootstrap app I have it set up different using
header.navbar {
height: 54px;
}
The easiest thing to do would be to inspect element on the navigation bar then look at the css to see where the height value is. Adjust it to the desired height.
Then create a rule in your css with !important to override the existing Bootstrap css.
This is another example without less.
.navbar-fixed-top {
height: 70px !important; /* Whatever you want. */
}
Create new css file and put your overrides in it.
<link rel='stylesheet' href='/stylesheets/bootstrap.css'/>
<link rel='stylesheet' href='/stylesheets/overrides.css'/>
inside overrides.css
If this css rule exists inside Bootstrap when you inspect element then override it in the overrides css file you have added now.
remember use !important
.navbar-fixed-top {
height: 70px !important; /* Whatever you want. */
}
If you are using the .less or .scss version, you can edit the following $navbar-height variable in code:
https://github.com/twbs/bootstrap/blob/master/less/variables.less#L360
If not, you need to override it with a rule by statiing:
.navbar {
height: {new height};
}
Related
I need to surcharge Bootstrap CSS and for that i have created a new overwrite.css file.
In my different test I need to display a black background (It's only for test) but nothing.
<div id="myBackground"> </div>
CSS:
#myBackground { background-color: black; width: 100px; height: 100px; }
so i don't know where exactly you need change the bg color use these after bootstrap or in <style></style> inside <head></head>
if you want change the page background
body {
background-color: black !important;
}
if as container or column
col-md-5 {
background-color: black;
width: 100px;
height: 100px;
}
Make sure you are selecting your element with more specificity than the bootstrap css.
Load your overwrite.css file after bootstrap.
Try selecting a parent element before your #myBackground div. For example,
.main-content #myBackground {}
Find the attributes bootstrap is using that you want to override... for example if in bootstrap.css there is .navbar-nav {background:#000;} then you need to make sure your overwrite has a background attribute declared, such as #myNavbar {background:#555;}
overwrite.css : "It means what it means"! You can't create your own id or class if bootstrap doesn't know what is this...
So, you must create a third css file (style.css for example) and load this after bootstrap.css and overwrite.css !
After this, all is working!
Thanks
I want to have my table not take all available space. In my bootstrap.css, I have:
.table {
width: 100%
...
In Chrome Dev Tools, I cancel it and the table shrinks.
How can I override this in my CSS files without modifying the bootstrap file.
Thanks
Ensure your own stylesheet is included after Bootstrap in your HTML.
Override Bootstrap's 100% width style declaration by setting the .table's width to 'auto' in your stylesheet:
.table {
width: auto;
}
Option 1
If it's possible to add your CSS file AFTER your Bootstrap file, this is really all it takes :
.table {
width: auto;
}
Option 2
If it's not possible to add your CSS file AFTER your Bootstrap file, you could increase the specificity like this :
table.table {
width: auto;
}
Note that this would also work if you put this code after your Bootstrap file. Option 1 is just slightly simpler.
Option 3 (not recommended)
You could also add an !important declaration to your rule, which means your rule will override the Bootstrap style no matter (1) whether it's before or after your Bootstrap file, and (2) regardless of specificity :
.table {
width: auto !important;
}
Because CSS rules with !important declarations can override any rule without !important declarations no matter where they're defined or what's their specificity, styles with lots of !important declarations are difficult to maintain and debug. Therefore, it is recommended to avoid using !important, so you should use either option 1 or option 2, depending on whether your CSS comes before or after your Bootstrap file.
.table {
width: initial;
}
or
.table {
width: unset;
}
does the trick.
.table{Width :100% !important;}
For all the images by default the below style class is being set.
.figure {
display: inline-block;
vertical-align: top;
position: relative;
max-width: 100%;
}
I am trying to change display: inline-block to display:inherit only on a particular page. I added the image via visual composer in WP,and tried adding a new class for the image div by adding the style needed, but still the display:inline-block remained the same.Any solutions will be appreciated.Thanks.
please add inline css and check its working or not?
If its working then add new class and add that class end of the css and try it will work
Like add inline-img this is the new class then add following css to end of your css file
.figure.inline-img{
display:inherit;
}
If you've added a custom style to the figure (you mentioned a .pax class), then you simply need to specify the following in the CSS:
.figure.pax{
display:inherit;
}
If that doesnt work, you can either add specificity to the selector (my preference) or add !important as follows:
.figure.pax{
display:inherit !important;
}
(Alternatively, if you'd like the image to be display:block which is what it looks like you'd like, use display:block instead of display:inherit)
It seems impossible to override the CSS of the <body> tag of an EmberJS application.
It inherits the ember-application class, and this has many of the browsers default values, including a margin of 8px.
I want to get rid of this margin around <body>, but none of these two methods worked:
body {
margin: 0;
}
body.ember-application {
margin: 0;
}
!important does not help either.
Any idea of what I could do? Removing the body tag itself do not work, as Ember will add one.
The ember-application class has no css associated with it and just putting in
body {
margin: 0;
}
is enough to handle it. It's likely you have another CSS element winning the CSS war, or you have an inside element pushing the padding making it appear so.
Example of margin 0 working: http://emberjs.jsbin.com/vaquhuwo/1/edit
I am using a child theme (of twentyfourteen) and am trying to remove the padding of a particular element. The code in-question appears as such in the parent style.css:
#media screen and (min-width: 846px) {
.content-area,
.content-sidebar {
padding-top: 72px;
}
}
When modify the padding to 0px thusly:
#media screen and (min-width: 846px) {
.content-area,
.content-sidebar {
padding-top: 0px;
}
}
and insert at the end of the PARENT style.css, I achieve my desired results (padding changes to 0px). However when I insert the identical code at the end of the CHILD style.css, it does nothing (the padding remains at 72px). Anyone know why this happening?
CSS rules are parsed in order, with the rules at the end taking precedence over the rules at the beginning. In other words, if the same selector appears twice (even in different files), the second copy will overwrite the first. If your custom CSS is loaded before the theme's CSS, the theme CSS will take precedence. You can see this happening if you use the inspector (F12 in Chrome) to see which copy of the selector the browser is actually referencing.
CSS also respects specificity moreso than order, so you can also try making your selector more specific than the theme's. For example, imagine .content-area and .content-sidebar are inside a wrapper called .content-wrapper. If you do something like this, it will override the original selector:
.content-wrapper .content-area,
.content-wrapper .content-sidebar {
padding-top: 0px;
}