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><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
<li><a href="doctors.php"><i class="fa fa-users"></i> Doctors</a></li>
<li><a href="nurses.php"><i class="fa fa-users"></i> Nurses</a></li>
<li><a href="patients.php"><i class="fa fa-users"></i> Patients</a></li>
<li><a href="#"><i class="fa fa-address-book-o"></i> Appointments</a></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>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Doctors</a>
</li>
<li>
<a href="#">Nurses</a>
</li>
<li>
<a href="#">Patients</a>
</li>
<li>
<a href="#">Appointments</a>
</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>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
</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!