Using Zurb's Foundation, I'm attempting to add my own styles to the navbar, which is working great. Unfortunately, Zurb's responsive navbar changes its look when the viewing container becomes smaller. When it does this, it adds a second class to the nav element.
Before responsive change:
<nav class="top-bar">
After responsive change:
<nav class="top-bar expanded">
My custom styles look terrible for this expanded navbar, and I was wondering if there was a way to only apply styles when an element contained solely 1 class and not multiple. I know it's very easy to only apply styles when an element has two or more classes, but can you exclude one?
Thanks!
You can use this selector for your style in css:
.top-bar:not(.expanded){
//your style
}
One option is to apply those styles for top-bar within an #media rule that only applies them down to a minimum screen width. That minimum width would, of course, be the width at which the expanded styles kick in.
Related
Is it possible to make a :hover on the :before element so that something shows over it?
Yes it can be done like..
.selector:hover:before {/* css rule goes here */}
It is impossible to add a :hover style (or :active, or :focus) to any elements like :before or :after. They would have to be applied to an actual HTML element, not a pseudo-element.
From your screenshot, it appears you're trying to create a hover menu. Depending on your styles, you may be able to apply the :hover styles to the ul itself. However, you'll only be able to control ul styles with CSS - you cannot control li styles based on the hover state of their parent without JS.
If JS is an option, use it - it should be pretty simple in this case, and would make the code a lot easier. If css-only is a requirement, you might be able to get around this by setting the <ul> to a specific height (large enough to show the hover item but nothing else), and give ul:hover a larger height, or height: auto;, etc.
Its called offcanvas
Refer https://www.w3schools.com/howto/howto_js_off-canvas.asp
AND https://v4-alpha.getbootstrap.com/examples/offcanvas/
Let me know if you require any further help
I'm using bootstrap for most of the page, but I'd like to use custom css in a div.col to get a nicer looking table, but the bootstrap css is affecting some of the styles.
I'd like to reset all the styles for a specific div and it's children.
Are there any ways of dealing with this other than explicitly overloading every style bootstrap uses?
To reset all the styles for a specific div, you can add the 'all: unset;' CSS property.
<div style="all: unset;">...</div>
This will undo ("unset") all the styles currently applied to that div (but not it's children), leaving you to add which ever ones you desire.
See it in action here (including how to apply to all child elements):
http://codepen.io/esr360/pen/kkogwm?editors=1100#0
This is a bootstrap accordion that has been "unstyled".
View browser support here: http://caniuse.com/#feat=css-unset-value
Unsurprisingly this doesn't work in IE.
I have a site utilizing the bootstrap framework and I want to change the outside margins that are default for Bootstrap's '.container' class.
I want the margins narrower on the outsides, and I want to not have it jump to different sizes based on screen/resolution (For those who use Bootstrap, when the screen gets to a certain size .container class automatically jumps to a different set of margins.)
I just want a consistent margin throughout that I can set.
You can simply override the CSS. However, you should avoid modifying the Bootstrap files directly, as that limits your ability to update the library. Place your own, custom CSS after Bootstrap, and modify it however you choose.
Further, try using SASS or LESS and creating a variable for your margins/padding. Then you can reuse the variable for various breakpoints or custom containers, and have a single point to edit the margins/padding later.
Another good idea is to modify your containers with a custom class, so that the original styles are preserved. For example:
<style type="text/css">
.container.custom-container {
padding: 0 50px;
}
</style>
<div class="container">
Here's a normal container
</div>
<div class="custom-container container">
Here's a custom container
</div>
In bootstrap 4, container-fluid gives a full-width container
Create a css file of your own and attach it after boostrap.css (dont override the default css), and change whatever you want (include !important to your attribute if needed).
About narrow the outside, change 'padding-left' and 'padding-right' of class container (or container-fluid) to fit your will (default to both padding is 15px)
To fix the width of the web, you can include 'width: 1000px' (or whtever number (percent) you want) to 'container' class
I have a page in Bootstrap but I want the .container to be wider. Can I change the width of this .container?
There are several possibilities:
custom css
As it has already been suggested, you can just overwrite the default in your own css. Keep in mind, that you'll probably have to use media queries define several of these for different screen sizes
customizing bootstrap
On bootstrap's own customization page you can change practically any definition and generate a customized version of bootstrap. Look for the section called Container sizes
fluid container
If you just want a container that spans the entire width of your screen, use .container-fluid instead of .container
<div class="container-fluid">
...
</div>
You can easily override the default presentation of Bootstrap, just include your own CSS file, and do the following:
.container {
/* Write your custom width here! */
}
I do want my website to stay responsive, the sidebar should still go under the content when the screen is too small, but there's a few span* classes I'm using that I don't want going to 100% width when the screen is too small. Is there a way I can still use the span* class (it's a really easy way to position things) but explicitly say that they should not be responsive; either on the container, or row, or each span, whatever works.
a bit short for explanation, code is missing.
have you tried using selector: span[class*="span"]{} to filter the class you want ?
I don't think you can have it both ways.
Either your bootstrap grid is responsive or it isn't.
This is because all bootstrap knows is whether or not the responsive initialization snippet has been called. If it has, then it changes the spans to make them responsive.
If you want a way around this, I would copy the styles from the span class that you want applied to your unresponsive sections and then make a new class with those styles.
So, if you wanted to make an additional unresponsive .span3 you could just copy the relevant styles and make your own classes. You would need to set the width, float, and margins. In this case width: 220px;, float: left; , and add a .margin-right: 20px;. The widths can be found in bootstrap.css file.
I also attached a fiddle for reference -- http://jsfiddle.net/c86kE/