Fiddle.
This is literally the 'Off Canvas Reveal' demo from Jasny located here. All I did was extend the page content so that it needed a scrollbar.
After clicking the hamburger menu, the page contents become frozen/unscrollable. How do I fix this behavior? I want to be able to continue scrolling the page while the menu is out.
CSS:
html, body {
height: 100%;
}
.navbar-toggle {
float: left;
margin-left: 15px;
}
.navmenu {
z-index: 1;
}
.canvas {
position: relative;
left: 0;
z-index: 2;
min-height: 100%;
padding: 50px 0 0 0;
background: #fff;
}
#media (min-width: 0) {
.navbar-toggle {
display: block; /* force showing the toggle */
}
}
#media (min-width: 992px) {
body {
padding: 0;
}
.navbar {
right: auto;
background: none;
border: none;
}
.canvas {
padding: 0;
}
}
You just need to add
html,
body{
overflow-y:scroll!important;
}
By default jasney adds overflow:hidden; to the body
Jsfiddle http://jsfiddle.net/z3wfct19/1/
Related
i have an example (JSFiddle Example), where i want the content of the nav bar to be scrollable, if it is cut off by the screen size of the browser.
See Normal Size and Small Size for current problems.
A requirement is that the left part of the screen (250px) is covered by the navigation bar (or any parent) if the screen size is > 768px.
I did not achieve any satisfying result so far, therefore i'm aksing for help!
Thanks in advance!
CSS
#media (min-width: 768px)
{
.sidebar-main.expanded {
width: 250px;
}
.sidebar-main {
position: fixed;
height: 100%;
}
.sidebar-main .navbar {
height: 100%;
}
.sidebar-main .navbar .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.sidebar-main .navbar-header {
float: none !important;
}
.sidebar-main .navbar-collapse {
padding: 0px;
max-height: none;
}
.sidebar-main ul {
float: none;
&: not {
display: block;
}
}
.sidebar-main li {
float: none;
display: block;
}
}
Fixed this problem by setting the height manually to a certain PX value in Javascript, although i wanted to avoid this, it seems to me as the only solution.
I am creating a responsive header. I got two columns and want the button in the right column to be vertical centered.
I know I can center items using top: 50%; margin-top: -xy px, and my button although got a fixed height: 40px.
To use this method I wrapped my button inside a div {position: relative}. This does not work, as the div does not stretch its own height.
How can I solve this with css? First I thought about Flexbox, but it has quite some lack of browser compatibility.
JSFIDDLE DEMO
You can greatly simplify your code - remove floats, (use display: inline-block instead), remove the .relative div, etc.
Working Fiddle
html, body {
margin: 0;
padding: 0;
font-size: 16px;
}
header {
background: red;
color: #fff;
padding: 0.5em;
}
header h1 {
font-size: 2em;
margin: 0 0 0.2em;
}
header p {
margin: 0;
}
header button {
height: 40px;
width: 70px;
}
.column-left {
display:inline-block;
width: 70%;
vertical-align: middle;
}
.column-right {
width: 29%;
text-align: right;
display: inline-block;
vertical-align: middle;
height: 100%;
}
/* responsive */
#media (min-width: 200px) {
header {
padding: 1em;
}
}
#media (min-width: 300px) {
header {
padding: 1.5em;
}
}
#media (min-width: 400px) {
header {
padding: 2em;
}
}
#media (min-width: 500px) {
header {
padding: 2.5em;
}
}
#media (min-width: 600px) {
header {
padding: 3em;
}
}
/* helpers */
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
Remove this div with position: relative and add position: relative to your header tag. You can even delete your column-right div.
Another solution:
header button {
top: 50%;
transform: translateY(-50%); // instead of negative margin-top (it is useful when your button has dynamic height, supports IE9+ with -ms- prefix)
}
JSFIDDLE
I'm trying to prove a wireframe can work responsively, whereby list items 1-4 display:block on mobile, and on desktop 1,3,5 display inline next to each other.
I've encountered a weird bug only in Chrome, whereby the elements 1,3,5 don't re-render inline after a resize down to the small breakpoint and up again.
Demo:
http://jsfiddle.net/n0ocqf2w/3/
Full Screen:
https://jsfiddle.net/n0ocqf2w/3/embedded/result/
stackoverflow is making me post the code with the jsfiddle link, so here are the styles we have in play:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
ul {
margin: 50px 0 0 0;
padding: 0;
font-size: 0;
white-space: nowrap;
}
li {
display: block;
margin: 0;
padding: 10px 50px;
height: 40px;
background: red;
font-size: 12px;
position: relative;
z-index: 2;
display: block;
width: 100%;
}
li:nth-child(1) {
background: red;
}
li:nth-child(2) {
background: pink;
}
li:nth-child(3) {
background: blue;
}
li:nth-child(4) {
background: lightBlue;
}
li:nth-child(5) {
background: green;
position: fixed;
top: 0;
right: 0;
width: 50%;
}
#media screen and (min-width:400px) {
body {
background: black;
}
ul {
margin: 0;
}
li {
display: inline-block;
width: 20%;
vertical-align: top;
}
li:nth-child(2) {
background: pink;
position: fixed;
top: 35px;
left: 0;
width: 100%;
z-index: 1;
opacity: .5;
}
li:nth-child(4) {
background: lightBlue;
position: fixed;
top: 45px;
left: 20px;
width: 100%;
z-index: 1;
opacity: .5;
}
li:nth-child(5) {
background: green;
position: relative;
width: 20%;
}
}
Steps to replicate in Chrome:
Open at wide breakpoint, so body background is black. Observe items 1,3,5 rendering inline.
Resize browser down to < 400px, so body background is white. Observe items 1-4 switching to display:block.
Resize browser up again, so body background is black. Observe items 1,3,5 NOT lining up again.
After a bit of digging, I found this very old bug which hasn't been fixed in over 4 years:
https://bugs.webkit.org/show_bug.cgi?id=53166
Could anyone please confirm if this is fixable? I'm really hoping the open bug in the above link isn't present here, but the criteria of not applying the display property in a media query after a resize matches exactly :-(
Cheers
Hope this helps.
http://jsbin.com/bakujusaxu/1/edit?css,output
/*
SOLUTION HERE
The following elements are being treated as a "clearfix" type of thing, so when you re-size from "mobile" to "desktop" the fixed position elements are being treated as "block", as they happen to be intersected elements, it gives the stacked result...
*/
#media screen and (min-width:400px) {
li:nth-child(2),
li:nth-child(4) {
/*
The bug is a re-drawing bug. Not your fault, but the browser's.
The ideal solution, would be to set this to inline, but that doesn't work.
So you can set it to the following values:
none
flex
table
list-item
*/
display: flex;
}
}
I've been playing with the CSS of my site and have now noticed that when you scroll down or up on this page: http://famigami.com/Testsite/?p=1 the whole page bounces or shakes.
Essentially, the site is made up of four large sections: Header, Image, Content and Footer. All sections are fixed position except for the content, which scrolls.
Can someone help me pin down why the site (all areas with position: fixed) bounces?
The main CSS file can be downloaded here: http://famigami.com/Testsite/wp-content/themes/customizr/inc/assets/css/blue.min.css
(The above file doesn't format correctly here and is way too long to manually fix)
The following is my child theme CSS file:
.navbar-inner .social-block {
float: right;
}
.navbar-wrapper .navbar h2 {
text-align: right;
float: left;
}
div.brand.span3 {
position: absolute;
}
div.navbar-wrapper.clearfix.span9 {
float: right;
}
.carousel-caption {
background: rgba(0,0,0,.7);
max-width: 40%; /* was 60% */
margin-left: 2%; /* was 11% */
padding: 1%; /* was 5% */
position: absolute;
left: 17%;
bottom:0px; /* hugs the bottom of the slider */
}
/* shrink the Title field */
.carousel-caption h1 {
font-size: 24px; /* was inherited from h1 (38.5px) */
line-height: 1; /*was 1.25 */
}
/* shrink the description field */
.carousel-caption .lead {
font-size: 16px; /* was inherited from lead (21 px) */
line-height: 1; /* was 1.25 */
}
.carousel {
width: 42%;
float: left;
position: fixed;
top: 125px;
}
.carousel .item {
height: 699px;
}
#main-wrapper {
width: 57%;
margin:0;
padding: 5px 0 10px 5px;
overflow: auto;
height: 100%;
float: right;
top: 125px;
position: relative;
}
.container, .navbar-fixed-bottom .container, .navbar-fixed-top .container, .navbar-static-top .container, .span12 {
width: auto;
}
#footer {
bottom:0;
width:100%;
float: left;
position: fixed;
z-index: 100;
}
body {
min-height:100%;
position:relative;
}
footer#footer .colophon .social-block a {
float: left;
}
.row {
margin-left: auto;
}
.tc-header {
position: fixed;
}
.carousel-caption {
max-width: 100%;
margin-left: 0;
padding: 1%;
left: 0;
}
#content.span9 {
width: 695px !important;
}
For those with wordpress, you can run Customizr theme at default and paste my child theme's CSS. Just be sure to disable Featured Pages (Customize -> Front Page -> Featured Pages Options) and enable the right sidebar (Customize -> Pages & Posts Layout -> global default layout).
I'm using Bootstrap and I have a carousel under my navbar.
It works OK on normal computers, check this link.
However, I'm having trouble on smaller screens, e.g. iPhone. Just resize your browser screen to see what I mean.
I'm figuring maybe it isn't necessary the responsive CSS but something else I' doing wrong. Maybe their are better ways to get the carousel image with resized on every screen.
Also, I would like the carousel to have a 100% height of the screen, so the carousel spans the entire screen, and the rest of the content shows only when you scroll.
CSS I'm using:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-top: -80px;
position: fixed;
width: 100%;
}
.carousel .container {
position:relative;
z-index: 9;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
min-height: 800px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: auto;
margin-top: -200px;
}
.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption2 {
background-color: transparent;
position: static;
max-width: 380px;
padding: 200px 20px;
}
.carousel-caption h1,
.carousel-caption .lead,
.carousel-caption2 h1,
.carousel-caption2 .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn,
.carousel-caption2 .btn {
margin-top: 10px;
}
#wrapper-container {
margin-bottom: -80px;
padding-bottom: 80px;
position: relative;
background: inherit;
top: 60%;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
.featurette {
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (max-width: 979px) {
.container.navbar-wrapper {
margin-bottom: 0;
width: auto;
}
.navbar-inner {
border-radius: 0;
}
.carousel .item {
min-height: 500px;
}
.carousel img {
min-width: 100%;
height: auto;
}
.featurette {
height: auto;
padding: 0;
}
.featurette-image.pull-left,
.featurette-image.pull-right {
display: block;
float: none;
max-width: 40%;
margin: 0 auto 20px;
}
}
#media (max-width: 767px) {
.navbar-inner {
margin: -20px;
}
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {
}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
font-size: 18px;
}
.marketing .span4 + .span4 {
margin-top: 40px;
}
.featurette-heading {
font-size: 30px;
}
.featurette .lead {
font-size: 18px;
line-height: 1.5;
}
}
There's a lot you would need to do to clean it up... The following will get you started, but there would definitely be a bit more tweaking to do.
I didn't look at the CSS to fill the screen with an image as per your last request. I think you will have to look at adding a different carousel with other cropped images with a portrait aspect ratio if you want that, so you show the specific part of the image you want.
Firstly under #media (max-width: 767px), remove:
.navbar-inner {
margin: -20px;
}
It's causing your menu bar at the top to shift up out of sight.
From #media... .carousel, remove:
margin-left: -20px;
margin-right: -20px;
This is messy, and is there because of the padding added to body (see below).
Add the following to #media (max-width... .carousel:
position: relative;
margin-top: 0px;
Because you want the carousel to sit neatly under the navbar.
Remove the following from #media... body
padding-right: 20px;
padding-left: 20px;
This is causing problems for the carousel, and you can add this padding for specific divs like wrapper-container if you want.
From .carousel img, remove:
margin-top: -200px;
Next, you have to fix the fact that the text under the carousel is moved way down:
Add the following to #media... #wrapper-container
top: 0;
Remove the following from #media (max-width: 979px)
.carousel .item {
min-height: 500px;
}
and the following from #media (max-width: 767px)
.carousel img {
height: 300px;
}
because the carousel is nowhere near that height at smartphone sizes.
You will also have to play around with the positioning of the caption text in the #media CSS. You may want to decide to lose some caption text as the carousel shrinks.
This will get you started, and you can go from there...
For starters, get rid of the margin-top: -200px; on your .corousel img style.
With a small screen, your image height is less than 200px and this causes it to go off of the screen.