I want whenever my screen-size reaches 1512 x 473 for the content inside content.php to not overlap onto the left sidebar. As this makes the sidebar links unreadable. Would really appreciate the help guys :)
content.php
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Dashboard
</h1>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-xs-3 col-xs-3">
<div class="panel panel-default">
<div class="panel-heading text-center">Panel heading without title</div>
<div class="panel-body text-center">
Panel content
</div>
</div>
</div>
<div class="col-xs-3 col-xs-3">
<div class="panel panel-default">
<div class="panel-heading text-center">Appointments</div>
<div class="panel-body text-center">
Panel content
</div>
</div>
</div>
<div class="col-xs-3 col-xs-3">
<div class="panel panel-default">
<div class="panel-heading text-center">Panel heading without title</div>
<div class="panel-body text-center">
Panel content
</div>
</div>
</div>
<div class="col-xs-3 col-xs-3">
<div class="panel panel-default text-center">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body text-center">
Panel content
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
sidebar.php
<aside class="sidebar">
<ul class="menu" id="menu">
<li><i class="fa fa-dashboard"></i> Dashboard</li>
<li><i class="fa fa-users"></i> Doctors</li>
<li><i class="fa fa-users"></i> Nurses</li>
<li><i class="fa fa-users"></i> Patients</li>
<li><i class="fa fa-address-book-o"></i> Appointments</li>
</ul>
</aside>
CSS:
.sidebar
{
float:left;
position: absolute;
top:0px;
left:0px;
background-color: #E0E0E0;
width:200px;
height: 100%;
}
First of all, most screen-sizes I used (not only 1512 x 473) had overlapping text on the sidebar. So I'm not sure that I have enough info to help you.
I took a bootstrap example
and changed the content to what you asked for. I also included a toggle button for the sidebar.
Here's the HTML:
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Sidebar Title
</a>
</li>
<li>
Dashboard
</li>
<li>
Doctors
</li>
<li>
Nurses
</li>
<li>
Patients
</li>
<li>
Appointments
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-xs-3 col-xs-3">
<div class="panel panel-default">
<div class="panel-heading text-center">Panel heading without title</div>
<div class="panel-body text-center">
Panel content
</div>
</div>
</div>
<div class="col-xs-3 col-xs-3">
<div class="panel panel-default">
<div class="panel-heading text-center">Appointments</div>
<div class="panel-body text-center">
Panel content
</div>
</div>
</div>
<div class="col-xs-3 col-xs-3">
<div class="panel panel-default">
<div class="panel-heading text-center">Panel heading without title</div>
<div class="panel-body text-center">
Panel content
</div>
</div>
</div>
<div class="col-xs-3 col-xs-3">
<div class="panel panel-default text-center">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body text-center">
Panel content
</div>
</div>
</div>
</div>
Toggle Menu
</div>
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Here's the CSS:
body {
overflow-x: hidden;
}
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #eee;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
background-color: #eee;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #555;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #666;
background: rgba(0, 0, 0, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #777;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #000;
background: none;
}
/* When the screen size is small, the sidebar will automatically collapse. */
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
And the Javascript (for the collapsible sidebar)
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
I hope this helps your project!
Codepen: http://codepen.io/penguoir/pen/YNMoyW
You can use #media query just add div tag in the sidebar.php and put the content.php to the div tag and display:none the div. when it reach the size 1512
cheer's
Related
With Bootstrap 4 I would like to have a row, which fills up the remaining height of the page, but the content of it should not extend the height over the place given. The content should be scrollable by buttons, the scrollbar at best should not be visible.
I tried to break down my layout to this. Please feel free to correct - this is really not my strong suit.
JSFiddle
HTML:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="/library/bootstrap-4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/library/fontawesome-5.0.10/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="/css/screen/presentation.css"/>
<title>Test</title>
</head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid d-flex h-100 flex-column">
<div class="row">
<div class="col">
<i class="fas fa-bars fa-3x"></i>
</div>
</div>
<div class="container h-100 flex-column d-flex">
<div class="row">
<div class="col headline-col bg-warning">
<h5 class="align-middle">Headline 1</h5>
</div>
</div>
<div class="section-div h-100 flex-column d-flex">
<div class="row bg-success">
<div class="col">
<h5>Subtitle 1</h5>
</div>
</div>
<div class="row flex-fill bg-danger d-flex">
<div class="col">
<h5>Subtitle 2</h5>
<p>
This should fill the remaining height, but the content should not use more space than available.
So it should be scrollable, best without scrollbar and scrolling by buttons
</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col last-col bg-success text-right">
This should always be at the bottom of the page.
<button class="btn btn-primary btn-scroll-up" type="button">Sroll Up</button>
<button class="btn btn-primary btn-scroll-down" type="button">Scroll Down</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/library/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="/library/bootstrap-4.1.0/js/bootstrap.bundle.min.js"></script>
<script src="/javascript/presentation.js"></script>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
overflow-x: hidden;
height: 100%;
}
.flex-fill {
flex: 1;
}
.startpage-col, .headline-col {
border-top-left-radius: 15px 15px;
border-top-right-radius: 15px 15px;
}
.headline-col {
height: 40px;
line-height: 40px;
}
.headline-col h5 {
vertical-align: middle;
display: inline-block;
}
.last-col {
border-bottom-left-radius: 15px 15px;
border-bottom-right-radius: 15px 15px;
height: 50px;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
height:100%;
}
#wrapper.toggled {
padding-left: 350px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 350px;
width: 0;
height: 100%;
margin-left: -350px;
overflow-y: auto;
background: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 350px;
}
#page-content-wrapper {
width: 100%;
height: 100%;
position: absolute;
padding: 15px;
background: #000;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -350px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 350px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li i {
text-indent: 0px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #666;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #000;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
color: #000;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 350px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 350px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
JS:
$('#menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
Thank you very much!
I had a similar issue: Flexbox height issue with nested flex-grow boxes in Bootstrap 4
Instead of using h-100. which will force the containers to be 100% of viewport height rather than remaining height, use the Bootstrap 4.1 flex grow utils...
flex-grow-1 to fill remaining height of flex container
flex-shrink-0 to make other rows shrink without squishing
Then set overflow:auto on the appropriate div so that it scrolls.
Demo: https://codeply.com/go/lk58xAjDc7
Template (using only Bootstrap classes):
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
...
</ul>
</div>
<div id="page-content-wrapper" class="min-vh-100 p-0 d-flex flex-column overflow-hidden">
<div class="container-fluid d-flex flex-column overflow-auto flex-fill">
<div class="row flex-shrink-1">
<div class="col">
<i class="fas fa-bars fa-2x"></i>
</div>
</div>
<div class="container flex-fill flex-column d-flex">
<div class="row flex-shrink-0">
<div class="col headline-col bg-warning">
<h5 class="align-middle">Headline 1</h5>
</div>
</div>
<div class="section-div flex-grow-1 flex-column d-flex">
<div class="row flex-shrink-0 bg-success">
<div class="col py-1">
<h5>Subtitle 1</h5>
</div>
</div>
<div class="row flex-fill bg-danger d-flex">
<div class="col overflow-auto flex-shrink-1 position-relative">
<div class="position-absolute">
<h5>Subtitle 2</h5>
<p> ... content </p>
</div>
</div>
</div>
</div>
</div>
<div class="container flex-shrink-1">
<div class="row">
<div class="col last-col bg-success text-right"> This should always be at the bottom of the page.
</div>
</div>
</div>
</div>
</div>
</div>
Zim's solution simplified:
<html class="h-100">
<body class="h-100">
<div class="h-100 d-flex flex-column">
<div style="background: lightblue;">
top
</div>
<div class="flex-grow-1 overflow-auto" style="background: lightgreen;">
bottom
</div>
</div>
</body>
</html>
I'm creating a webpage with a sidebar left. And Bootstrap 4 fixed size cards in the page content.
When it is toggled at view-port size - >768px to 100's of pixels, the page content is not act as responsively (overlapped and compressed all).
Why? look #media(min-width:768px){...}.
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
body {
overflow-x: hidden;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
width: 0;
height: 100%;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar {
left: 250px;
margin-left: -250px;
}
#wrapper.toggled .sidebar {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
}
#wrapper.toggled #page-content-wrapper {
margin-right: -250px;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#wrapper .sidebar {
width: 250px;
}
#wrapper.toggled .sidebar {
width: 0;
}
#page-content-wrapper {
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="wrapper">
<div id="sidebar-wrapper" class="sidebar">
<ul>
<li>Dashboard</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<h1>Simple Sidebar</h1>
<a class="btn btn-secondary" href="#menu-toggle-left" id="menu-toggle">Toggle Left</a>
<div class="row">
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
<div class="card bg-primary" style="width:10rem;height:10rem;">
<div class="card-header">
<div class="card-title">Title 1</div>
</div>
<div class="card-body text-center">
<p>This is a paragraph</p>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
<div class="card bg-primary" style="width:10rem;height:10rem;">
<div class="card-header">
<div class="card-title">Title 2</div>
</div>
<div class="card-body text-center">
<p>This is a paragraph</p>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
<div class="card bg-primary" style="width:10rem;height:10rem;">
<div class="card-header">
<div class="card-title">Title 3</div>
</div>
<div class="card-body text-center">
<p>This is a paragraph</p>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
<div class="card bg-primary" style="width:10rem;height:10rem;">
<div class="card-header">
<div class="card-title">Title 4</div>
</div>
<div class="card-body text-center">
<p>This is a paragraph</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How to correct it? Thanks.
Here's a simple solution, add style="width:100vw;" to <div class="row"></div>
<div id="wrapper">
<div id="sidebar-wrapper" class="sidebar">
...
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
...
<div class="row" style="width:100vw;">
...
</div>
</div>
</div>
I have set of images and when hovered the image will fade(whitish fade) its color. But what I want is for it to be pink (pinkish fade) with an opacity of 0.5. I can't make it change its color, what I did is just the fading (whitish fade) of image when hovered.
.img-overlay {
position: relative;
}
.img-overlay img {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.img-overlay:hover img {
opacity: 0.5;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.img-overlay:hover .middle {
opacity: 1;
}
<div class="wrappingimages">
<div class="row">
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
</div>
</div>
Since filters are not compatible with all the browsers, alternatively you might want to set up your image as a background and create an overlay layer, which will only display on hover. It would be something like this:
<div class="box overlay red" style="background-image: url('https://picsum.photos/200?image=187');">
<h1>Pasta</h1>
</div>
<div class="box overlay blue" style="background-image: url('https://picsum.photos/200?image=378');">
<h1>Pasta</h1>
</div>
<div class="box overlay green" style="background-image: url('https://picsum.photos/200?image=339');">
<h1>Pasta</h1>
</div>
<div class="box overlay orange" style="background-image: url('https://picsum.photos/200?image=329');">
<h1>Pasta</h1>
</div>
body {
text-align: center;
}
.box {
width:100px;
height:100px;
border:1px solid grey;
display: inline-block;
vertical-align: top;
margin-top: 10px;
background-image: url(http://lorempixel.com/output/food-q-c-100-100-10.jpg);
position: relative;
}
.overlay {
position: relative;
}
.overlay:before{
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: none;
z-index:0;
}
.overlay:hover:before{
display: block;
}
.red:before {
background-color: rgba(255,0,0,0.5);
}
.blue:before {
background-color: rgba(0,0,255,0.5);
}
.green:before{
background-color: rgba(0,255,0,0.5);
}
.orange:before {
background-color: rgba(255,153,0, 0.5);
}
.box * {
position: relative;
/* hack */
}
h1 {
color:white;
}
You can then play around with colors and opacity.
Check out how it would look on this codepen.
You can use a combination of different css filters to achieve the results you're looking for. I made an example by fiddling around and tweaking the numbers until it looked pinkish.
.img-overlay {
position: relative;
}
.img-overlay img {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.img-overlay:hover img {
-webkit-filter: sepia(1) hue-rotate(290deg) saturate(6) opacity(50%);
filter: sepia(1) hue-rotate(290deg) saturate(6) opacity(50%);
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.img-overlay:hover .middle {
opacity: 1;
}
<div class="wrappingimages">
<div class="row">
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
</div>
</div>
.img-overlay:hover:after img {background:pink; opacity:0.5;}
Hello I have a project I am working on. I am using a sidebar template from StartBootstrap and am having some issues with it on mobile. I have a button that triggers the sidebar and when on mobile the button disappears once the sidebar is toggled because it shifts everything over. How can I keep the button on the edge of the sidebar at all times (for easy open / close)?
You can test it Here on my live page. Set your window width to that of a mobile device and you will see the issue.
Sidebar CSS:
/*!
* Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
overflow-x: hidden;
}
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 300px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -300px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 300px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: white;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 300px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 300px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: -300px;
}
}
My HTML:
<head>
<!-- META TAGS -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Enable iOS web app formatting -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="translucent black">
<meta name="appl-mobile-web-app-title" content="Vamp Weather">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- FONT AWESOME -->
<script src="https://use.fontawesome.com/c60112b331.js"></script>
<!-- TAB TITLE -->
<title>Weather App</title>
<!-- CSS -->
<link href="weather.css" type="text/css" rel="stylesheet">
<link href="simple-sidebar.css" type="text/css" rel="stylesheet">
<!-- iOS web app icon -->
<link href="Images/ios10-weather-app-icon.png" rel="apple-touch-icon">
<!-- iOS web app splash screen -->
<link href="" rel="apple-touch-startup-image">
</head>
<body>
<div id="wrapper">
<!-- Sidebar courtesy of StartBootstrap.com -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav text-center sidebar-nav-fixed" style="color:white;">
<li class="sidebar-brand">
<a href="#">
Weather Display Options
</a>
</li>
<li>
<div class="row">
<div class="col-xs-8" style="margin-right: -50px">
Celsius
</div>
<div class="col-xs-4" style="margin-right: -20px">
<label class="switch">
<input id="Units_Switch" type="checkbox">
<div class="slider round"></div>
</label>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-8" style="margin-right: -50px">
Actual Temperature
</div>
<div class="col-xs-4" style="margin-right: -20px">
<label class="switch">
<input id="Actual_Switch" type="checkbox" checked="checked">
<div class="slider round"></div>
</label>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-8" style="margin-right: -50px">
Feels Like Temperature
</div>
<div class="col-xs-4" style="margin-right: -20px">
<label class="switch">
<input id="Feels_Like_Switch" type="checkbox">
<div class="slider round"></div>
</label>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-8 " style="margin-right: -50px">
Humidity
</div>
<div class="col-xs-4" style="margin-right: -20px">
<label class="switch">
<input id="Humidity_Switch" type="checkbox" checked="checked">
<div class="slider round"></div>
</label>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-8 " style="margin-right: -50px">
Cloud Coverage
</div>
<div class="col-xs-4" style="margin-right: -20px">
<label class="switch">
<input id="Cloud_Switch" type="checkbox" checked="checked">
<div class="slider round"></div>
</label>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-8 " style="margin-right: -50px">
Experimental Feature
</div>
<div class="col-xs-4" style="margin-right: -20px">
<label class="switch">
<input id="Experimental_Switch" type="checkbox">
<div class="slider round"></div>
</label>
</div>
</div>
</li>
<li>
</li>
<button id="apply_settings" class="btn btn-block btn-primary" style="margin-top: 20px">Apply Settings</button>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<!-- content -->
<div id="page-content-wrapper">
<!-- sidebar toggle button -->
<button id="sidebar_button"
style="margin: 10px 0px 0px 10px; border: none; outline: none; background: none; color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 1px 1px yellow, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">
<i id="button_icon" class="fa fa-caret-right fa-2x"></i>
</button>
<div class="container-fluid" style="margin-top: 50px">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div id="jumbotron" class="jumbotron" style="background-color: rgba(0,0,0,0.2)">
<div id="loading_div" class="text-center" style="align-content: center; justify-content: center"></div>
<div id="conditions_row" class="row text-center" style="color:white;">
<div id="location"></div>
<div>
<img id="condition_icon" src="" style="">
</div>
<div id="condition_text"></div>
<div id="temperature"></div>
<div id="feels_like_temperature"></div>
<div id="humidity"></div>
<div id="cloud_coverage"></div>
</div>
</div>
</div>
</div>
</div> <!-- // end main container -->
</div> <!-- // end page content -->
</div> <!-- // end wrapper -->
<!-- SCRIPT CODE BELOW THIS LINE -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- jQuery UI -->
<script
src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"
integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE="
crossorigin="anonymous">
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="weather.js"></script>
</body>
</html>
I finally fixed it myself.
Added the following media queries and padding-left changes to accommodate the button.
/* added media queries for smaller screens to display button properly on sidebar toggle */
#media(min-width:480px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 330px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 300px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: -300px;
}
}
#media(min-width:320px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 330px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 300px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: -300px;
}
}
So I built a menu and would like to be able to toggle it. I'm simply animation the width using CSS3.
-webkit-transition: width 1s;
transition: width 1s;
Now, when the menu is closed and you re-open it, the menu items "pop in", as shown here: https://gyazo.com/6dfee24687fff026e464323882770959
I think it's because the sentences are wrapping. I've tried everything to stop that from happening, to no avail.
This is my structure:
<div id="menu" class="col-md-2 col-xs-12 nopad closed">
<div id="togglemenu" class="col-xs-12 nopad">
<div class="hidden-xs hidden-sm col-md-3 menu-icon" onclick="document.querySelector('#menu').classList.toggle('closed')">
<div class="vertical">
<div>
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="nopad menu-header col-xs-12" onclick="document.querySelector('#menu').classList.toggle('closed')">
<div class="vertical">
<div class="pull-right menu-toggle">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div>MENU</div>
</div>
</div>
<div class="col-xs-12 nopad">
<div class="hidden-xs hidden-sm col-md-3 menu-icon">
<div class="vertical">
<div>
<i class="fa fa-usd" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-xs-12 col-md-9 menu-item active">
<div class="vertical">
<div>Menu item</div>
</div>
</div>
</div>
<div class="nopad menu-header btop col-xs-12">
<div class="vertical">
<div>Menu divider</div>
</div>
</div>
</div>
And the CSS that goes along with it:
#menu {
min-height: 65vh;
background: #1c2329;
-webkit-transition: width 1s;
transition: width 1s;
}
#menu div {
text-overflow: clip;
}
.togglemenu {
cursor: pointer;
}
.menu-header {
text-align: center;
color: white;
text-transform: uppercase;
background: #181d21;
}
.menu-header.btop {
border-top: 1px solid #3de66e;
}
.vertical {
display: table-cell;
vertical-align: middle;
}
.menu-icon {
background: #1c252a;
text-align: center;
font-size: 2.1vh;
color: #3de66e;
}
.menu-item {
background: #1c2329;
text-transform: uppercase;
cursor: pointer;
}
.menu-item.active {
border-right: 3px solid #3de66e;
}
.menu-icon, .menu-header, .menu-item {
height: 5vh;
display: table;
overflow: hidden;
}
#menu.closed .menu-item, #menu.closed .col-md-9, #menu.closed .menu-header {
display: none;
}
#menu.closed .menu-item div {
display: block;
}
#menu.closed {
width: 3vw;
}
#menu.closed .menu-part {
display: none;
}
#togglemenu {
display: none;
}
#menu.closed #togglemenu {
display: block;
}
I was hoping someone could help me. Thanks in advance!