This question already has answers here:
Using Sass Variables with CSS3 Media Queries
(8 answers)
Closed 7 years ago.
I am using the official Sass port of Twitter Bootstrap 3.3.3.
What I am trying to do is shrink the height of the navbar when the window is resized. Below is my media queries, however they don't work as I expect them to.
$navbar-height: 60px !default;
body {
padding-top: 70px !important;
}
#media(min-width: 768px) {
$navbar-height: 70px;
body {
padding-top: 80px !important;
}
}
#media(min-width: 992px) {
$navbar-height: 80px;
body {
padding-top: 90px !important;
}
}
#media(min-width: 1200px) {
$navbar-height: 90px;
body {
padding-top: 100px !important;
}
}
To make it work modify the element inside the #media query not the variable. So for example...
$navbar-height: 60px !default;
body {
padding-top: 70px !important;
}
#media(min-width: 768px) {
.nav-bar: $navbar-height + 10px;
body {
padding-top: 80px !important;
}
}
#media(min-width: 992px) {
.nav-bar: $navbar-height + 20px;
body {
padding-top: 90px !important;
}
}
#media(min-width: 1200px) {
.nav-bar: $navbar-height + 30px;
body {
padding-top: 100px !important;
}
}
How to change text in nav menu when user change width of screen?
I try:
<li>
<p class="navbar-text visible-lg underline">Contacts & Delivery</p>
<p class="navbar-text hidden-lg underline">Contacts</p>
</li>
It's work, but text start text moves up. I can fix it using tag 'a' instead 'p', but i don't wont link in nav menu.
If i understand your problem well, it should be fixed when appending the following CSS code after Bootstrap's CSS:
.navbar-text { margin-left: 15px; margin-right: 15px; }
When you are using Less:
.navbar-text {
margin-left: #navbar-padding-horizontal;
margin-right: #navbar-padding-horizontal;
}
Also see: https://github.com/twbs/bootstrap/pull/15239
update
From https://github.com/twbs/bootstrap/pull/15239 follows that you should not use the .navbar-text inside a li or any other tag. An alternative for the above solution, which keep the .navbar-text as intended, will be to create a new class for texts inside the li 's
less
.navbar-nav-text {
&:extend(.nav > li > a);
&:extend(.navbar-nav > li > a);
p& {
margin: 0;
}
}
.navbar-default {
.navbar-nav-text {
color: #navbar-default-color;
}
}
.navbar-inverse {
.navbar-nav-text {
color: #navbar-inverse-color;
}
}
or css
.navbar-nav-text {
position: relative;
display: block;
padding: 10px 15px;
line-height: 20px;
}
#media (min-width: 768px) {
.navbar-nav-text {
padding-top: 15px;
padding-bottom: 15px;
}
}
p.navbar-nav-text {
margin: 0;
}
.navbar-default .navbar-nav-text {
color: #777777;
}
.navbar-inverse .navbar-nav-text {
color: #9d9d9d;
}
I'm building a site in Bootstrap 3.
Is there anyway to make a element use the class pull-left on smaller devices and use pull-right on larger ones?
Something like: pull-left-sm pull-right-lg.
I've managed to do it with jquery, catching the resize of the window. Is there any other way? Pref without duplicating the code in a hidden-x pull-left. Or is it considered more ok to duplicate code/content now when going responsive?
Just add this to your SASS file:
#media (max-width: $screen-xs-max) {
.pull-xs-left {
float: left;
}
.pull-xs-right {
float: right;
}
}
#media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.pull-sm-left {
float: left;
}
.pull-sm-right {
float: right;
}
}
#media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
.pull-md-left {
float: left;
}
.pull-md-right {
float: right;
}
}
#media (min-width: $screen-lg-min) {
.pull-lg-left {
float: left;
}
.pull-lg-right {
float: right;
}
}
Insert actual px values for $screen-* if you use plain CSS of course.
HTML:
<div class="pull-md-left pull-lg-left">
this div is only floated on screen-md and screen-lg
</div>
You can use CSS Media Queries
basic usage will be like this; if you want to float left below devices of width 500px, then
#media (max-width: 500px) {
.your_class {
float: left;
}
}
#media (min-width: 501px) {
.your_class {
float: right;
}
}
There is no need to create your own class with media queries. Bootstrap 3 already has float ordering for media breakpoints under Column Ordering.
The syntax for the class is col-<#grid-size>-(push|pull)-<#cols> where <#grid-size> is xs, sm, md or lg and <#cols> is how far you want the column to move for that grid size. Push or pull is left or right of course.
I use it all the time so I know it works well.
Possibly you can use column ordering.
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
Looks like floating columns will be getting added to version 4 by like #Alex has done - https://github.com/twbs/bootstrap/issues/13690
Yes. Create your own style. I don’t know what element you’re trying to float left/right, but create an application.css file and create a CSS class for it:
/* default, mobile-first styles */
.logo {
float: left;
}
/* tablets and upwards */
#media (min-width: 768px) {
.logo {
float: right;
}
}
Don’t be afraid to write custom CSS. Bootstrap is meant to be exactly that: a bootstrap, a starter point.
This is what i am using . change #screen-xs-max for other sizes
/* Pull left in mobile resolutions */
#media (max-width: #screen-xs-max) {
.pull-xs-right {
float: right !important;
}
.pull-xs-left {
float: left !important;
}
.radio-inline.pull-xs-left + .radio-inline.pull-xs-left ,
.checkbox-inline.pull-xs-left + .checkbox-inline.pull-xs-left {
margin-left: 0;
}
.radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
margin-right: 10px;
}
}
LESS version of #Alex's answer
#media (max-width: #screen-xs-max) {
.pull-xs-left {
.pull-left();
}
.pull-xs-right {
.pull-right();
}
}
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) {
.pull-sm-left {
.pull-left();
}
.pull-sm-right {
.pull-right();
}
}
#media (min-width: #screen-md-min) and (max-width: #screen-md-max) {
.pull-md-left {
.pull-left();
}
.pull-md-right {
.pull-right();
}
}
#media (min-width: #screen-lg-min) {
.pull-lg-left {
.pull-left();
}
.pull-lg-right {
.pull-right();
}
}
In Sass is there a way to split up a list of variables / classes with hyphens?
It's a fuzzy question title so it's probably best I show what I'm trying to achieve.
In the below example I'm trying to create some utility classes that I can apply to HTML elements to help with vertical rhythm.
For example I may want to give an element a small margin that is consistent with my vertical rhythm strategy and so I'll add the class .m-t-s (which stands for margin-top-small).
I then want to output versions of those utility classes against for each media query I have for fine grain control e.g. I may want a class .m-t-s-768 which will add a small top margin when there is a minimum viewport width of 768px.
I have achieved this below, but it is a very long-winded and repetitive way of doing it. Can anyone suggest a more concise way?
Variables
––––––––––
$mediaQueries-px:
640,
768,
1024
;
$s: 20px; /* FYI I've simplified these examples for the sake of demonstration, normally I use something like ($baseLineHeight / 1.5) + rem */
$m: 50px;
$l: 60px;
Creating the classes
–––––––––––––––––––––
.m-t-s {
margin-top: $s;
}
/* Create versions for each defined media query */
#each $mediaQuery in $mediaQueries-px {
#media screen and (min-width: ($mediaQuery / 16px)) {
.m-t-s-#{$mediaQuery} {
margin-top: $s;
}
}
}
.m-t-m {
margin-top: $m;
}
/* Create versions for each defined media query */
#each $mediaQuery in $mediaQueries-px {
#media screen and (min-width: ($mediaQuery / 16px)) {
.m-t-m-#{$mediaQuery} {
margin-top: $m;
}
}
}
This repeats for .m-t-l too (margin top large), and then it continues for padding classes (e.g. .p-t-s and so on), so it gets to be a pretty long list of utility classes.
To programatically generate that output, you need another list and an inner loop:
$mediaQueries-px:
640,
768,
1024
;
$s: 20px;
$m: 50px;
$l: 60px;
$sizes: s $s, m $m, l $l;
#each $size in $sizes {
.m-t-#{nth($size, 1)} {
margin-top: nth($size, 2);
}
}
#each $mediaQuery in $mediaQueries-px {
#media screen and (min-width: ($mediaQuery / 16 * 1em)) { // modified for compilation purposes
#each $size in $sizes {
.m-t-#{nth($size, 1)}-#{$mediaQuery} {
margin-top: nth($size, 2);
}
}
}
}
Output:
.m-t-s {
margin-top: 20px;
}
.m-t-m {
margin-top: 50px;
}
.m-t-l {
margin-top: 60px;
}
#media screen and (min-width: 40em) {
.m-t-s-640 {
margin-top: 20px;
}
.m-t-m-640 {
margin-top: 50px;
}
.m-t-l-640 {
margin-top: 60px;
}
}
#media screen and (min-width: 48em) {
.m-t-s-768 {
margin-top: 20px;
}
.m-t-m-768 {
margin-top: 50px;
}
.m-t-l-768 {
margin-top: 60px;
}
}
#media screen and (min-width: 64em) {
.m-t-s-1024 {
margin-top: 20px;
}
.m-t-m-1024 {
margin-top: 50px;
}
.m-t-l-1024 {
margin-top: 60px;
}
}
I copied the code from dev7 studio's example of how to insert two nivo sliders on one web page, but I am unsure how to tweak the individual settings of each slider, such as how to get the first slider to just use arrows, while the second slider only uses bullets. Also how would I adjust the height & width of each slider in terms of location of arrows & bullets.
Here is the style.css:
/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/
/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
body {
line-height:1;
color:black;
background:white;
}
table {
border-collapse:separate;
border-spacing:0;
}
caption, th, td {
text-align:left;
font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}
/*===================*/
/*=== Main Styles ===*/
/*===================*/
body {
font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
color:#333;
background:#eee;
}
a, a:visited {
color:blue;
text-decoration:none;
}
a:hover, a:active {
color:#000;
text-decoration:none;
}
#dev7link {
position:absolute;
top:0;
left:50px;
background:url(images/dev7logo.png) no-repeat;
width:60px;
height:67px;
border:0;
display:block;
text-indent:-9999px;
}
.default #slider {
margin:100px auto 0 auto;
width:960px; /* Make sure your images are the same size */
height:310px; /* Make sure your images are the same size */
}
.default #slider2 {
margin:100px auto 0 auto;
width:280px; /* Make sure your images are the same size */
height:65px; /* Make sure your images are the same size */
}
slider-wrapper,
lider-wrapper {
margin-top:150px;
}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
clear:both;
}
Here is the default.css:
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/
.default .nivoSlider {
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
margin-bottom:50px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.default .nivoSlider a {
border:0;
display:block;
}
.default .nivo-controlNav {
position:absolute;
left:70px;
bottom:25px;
margin-left:-40px; /* Tweak this to center bullets */
z-index:300;
}
.default .nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:1px;
float:left;
}
.default .nivo-controlNav a.active {
background-position:0 -22px;
}
.default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
.default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.default a.nivo-prevNav {
left:15px;
}
.default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.default .nivo-caption a:hover {
color:#fff;
}
To use more than one slider on your webpage, you will firstly want to change the #ID elements to .CLASSES, both in the HTML and in the CSS, as we're creating more than one slider now...
If you are looking at changing each one of your slider's appearances, this would relate to your HTML inline-styling and how the skin (default, light, dark etc.) is being output. Simply change this to the desired skin in your demo.html file. It should look something like this:
div class="slider-wrapper theme-default"
Now replace "theme-default" with for example, theme-light.
To modify the bullets in the default skin slider, you're wanting to play with:
.default .nivo-controlNav` and .default .nivo-controlNav a {
To modify the arrows in the default skin slider, you're wanting to play with:
.default .nivo-directionNav a {
ID of each slider should be different and then initialization and settings can be written individually for each one.
<div id="slider" class="nivoSlider">
<img src="slide1.jpg" alt="" />
<img src="slide2.jpg" alt="" />
<img src="slide3.jpg" alt="" />
<img src="slide4.jpg" alt="" />
</div>
<script type="text/javascript">
$('#slider').nivoSlider({
effect: 'slideInLeft', // Specify sets like: 'fold,fade,sliceDown'
slices: 1, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
</script>
The ID part in each jQuery function should be different following the two different IDs you used to identify each slider in the HTML.
$('#slider').nivoSlider({
Meaning you will have two copies of this code, one per each slider.
Different CSS styles per slider can be attained via these IDs referenced in a CSS file.
Note the .nivoSlider class of the slider container is common in both instances, since it's connected to general styles needed for the slider to work.