I'm sure this is relatively simple problem but after some fiddling I'm not finding much luck, will fix one thing then another problem arises. As you can see below (this is on desktop, mobile works perfect) the text boxes are way too big, leaving loads of white space below texts, some images are a good size, some are too big, the top one looks the best. The idea being the image spans across one side then the text box is the same height next to it.
Here is a picture of the mobile for reference
I wont link all the HTML and CSS, just the relevant stuff. Any advice is welcome and appreciated.
<html lang="en" dir="ltr">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;600&family=Poppins:wght#300;400;500;700&display=swap" rel="stylesheet">
<meta charset="utf-8" >
<meta name="description" content="Jordan Squres, mixed martial arts trainer, working out of Oxfordshire">
<meta name="keywords" content="MMA, martial arts, personal trainer, self defence, exercise">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="autor" content="Descisive Development">
<link rel="stylesheet" href="styles.css">
<title>Jordan Squires, Home</title>
</head>
<body >
<nav class="navbar">
Jordan Squires
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li class="navitem"> Home</li>
<li class="navitem"> About</li>
<li class="navitem"> Clients</li>
<li class="navitem"> Blog</li>
<li class="navitem"> Contact</li>
</ul>
</div>
</nav>
<section class="home-hero">
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio1.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container" id="even">
<div class="img-hero">
<img src="images/portfolio2.jpg" alt="">
</div>
<div class="info-hero">
<h1>Shotokan Karate</h1>
<h2>Black Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio3.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jeet Kune Do</h1>
<h2>Black Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="flex-container"id="even">
<div class="img-hero">
<img src="images/portfolio4.jpg" alt="">
</div>
<div class="info-hero">
<h1>Brazilian Jiu Jitsu</h1>
<h2>Purple Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio5.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
</body>
</html>
and the css
box-sizing: inherit;
margin: 0 auto;
padding: 0;
}
html{
font-size: 10px;
max-width: 1300px;
box-sizing: border-box;
}
body{
background: var(--white);
}
a{
color: var(--main-txt);
text-decoration: none;
}
:root{
--white: #F1FAEE;
--outline-color: #000000;
--bg-color: #1D3557;
--main-txt: #457B9D;
--alt-txt: #A8DADC;
--red: #E63946;
--ff: 'Montserrat', sans-serif;
--ff2: 'Poppins', sans-serif;
--fw-l: 300;
--fw-n: 400;
--fw-m: 600;
--fw-b: 700;
--fs-1: ;
--fs-2: ;
--fs-3: ;
--fs-p: ;
--shadow: 0px 7px 10px 0px rgba(0,0,0,.3);
}
/*global style container*/
.container{
max-width: 1360px;
}
/*Navbar styles*/
.navbar{
box-shadow: 0px 3px 3px -3px rgb(0, 0, 0);
width: 100%;
font-size: 1.8rem;
font-family: var(--ff2);
}
.navbar ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.navbar ul a{
display: block;
padding: 2rem;
text-align: center;
text-transform: uppercase;
font-weight: var(--fw-n)
}
.navbar ul a:hover{
background-color: var(--bg-color);
color: var(--white);
}
.navbar .logo{
float: left;
display: block;
font-size: 2rem;
padding: 1.5rem;
text-decoration: underline;
text-decoration-thickness: 0.2rem;
text-underline-offset: 0.5rem;
}
.navbar .menu{
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.navbar .menu-icon{
padding: 2.8rem 2rem;
position: relative;
float: right;
cursor: pointer;
}
.navbar .menu-icon .nav-icon{
background: var(--bg-color);
display: block;
height: .2rem;
width: 1.8rem;
position: relative;
transition: background .2s ease-out;
}
.navbar .menu-icon .nav-icon:before{
background: var(--bg-color);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: .5rem;
}
.navbar .menu-icon .nav-icon:after{
background: var(--bg-color);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -.5rem;
}
.navbar .menu-btn{
display: none;
}
.navbar .menu-btn:checked ~ .menu{
max-height: 36rem;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon{
background: transparent;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon:before{
transform: rotate(-45deg);
top: 0;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon:after{
transform: rotate(45deg);
top: 0;
}
/*Homepage main section*/
.home-hero{
margin: 1rem auto;
}
.flex-container{
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
}
.img-hero{
width: 90%;
margin-top: 2rem;
margin-bottom: 2rem;
padding-bottom: -3px;
}
.info-hero{
width: 90%;
font-family: var(--ff);
border: 1px solid var(--outline-color);
padding: 3rem;
background-color: var(--bg-color);
}
/*Image styles*/
.img-hero img{
max-width: 100%;
object-fit: contain;
max-height: 100%;
margin-bottom: -3px;
border: 1px solid var(--outline-color);
}
/*Info styles*/
.info-hero h1{
font-size: 3rem;
color: var(--white);
}
.info-hero h2{
font-size: 2rem;
font-style: italic;
color: var(--red);
}
.info-hero h1 h2{
font-family: var(--ff2);
}
.info-hero p{
font-size: 1.2rem;
text-align: justify;
color: var(--alt-txt);
}
/*Media for Navbar*/
#media (min-width: 760px) {
.navbar{
height: 6.7rem;
}
.navbar li{
float: left;
}
.navbar li a{
padding: 2rem 2.5rem;
}
.navbar .menu{
clear: none;
float: right;
max-height: none;
}
.navbar .menu-icon{
display: none;
}
.navbar .logo{
padding: 2rem;
}
.flex-container{
flex-direction: row;
margin: 2rem auto;
}
.img-hero{
width: 50%;
margin: inherit;
}
.info-hero{
width: 45%;
padding: 2rem;
}
#even{
flex-direction: row-reverse;
}
}
Here is a simple example I just wrote for you, you may adjust it according to your needs.
.flex-container {
display: flex;
margin-bottom: 1rem;
}
.img-hero, .info-hero {
max-width: 50%;
}
.img-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.info-hero {
background: violet;
color: white;
}
.info-hero > * {
padding: 0.5rem 1rem;
}
<div class="flex-container">
<div class="img-hero">
<img src="https://picsum.photos/900/700" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container">
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="img-hero">
<img src="https://picsum.photos/800/600" alt="">
</div>
</div>
Related
So I've been refering to an open source code of a decent sidebar and decided to learn to modify it.
I'm a beginner and figured this is the best place to ask doubts.
So my main problems are as follows:
Sidebar will be open as soon as I load the page(I don't know how to close it)
I want to shift it to the right completely, how can I do this(I try to not use frameworks whenever possible, but don't mind if there's no other option)
The code is here https://codepen.io/nkrao03/pen/BaKYZdr
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none!important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0px;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#media(max-width:768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0px;
}
#sidebarCollapse span {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>bootstrap 4 sidebar</title>
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<h3>SIDEBAR</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
home1
</li>
<li>
home2
</li>
<li>
home3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Page
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
page1
</li>
<li>
page2
</li>
<li>
page3
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact Us
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
</li>
<li>
</li>
</ul>
</nav>
<div class="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fa fa-align-justify"></i> <span></span>
</button>
<!--<a class="navbar-brand" href="#">Navbar</a> -->
</nav>
<h2>Collapsible Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
ANY suggestion/help would be really appreciated.
This is probably a basic question for you all, but do bear with me. Thanks!
I made a couple of changes to put the sidebar on the right and to make it be retracted initially.
I moved the <nav> div in your Html to be after the content which moved the sidebar to the right. Then I swapped the positive and negative margins in css #sidebar and #sidebar.active. I believe this is the desired result.
EDIT: Moved sidebar trigger to the right side.
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none!important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
}
.wrapper {
display: flex;
align-items: stretch;
width: 100%;
overflow-x: hidden;
/*perspective: 1500px; */
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
margin-right: 0px;
transition: all 0.3s;
}
#sidebar.active {
margin-right: 0px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0px;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
left: 20px;
transform: translateY(50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#sidebarCollapse {
display: none;
position: absolute;
right: 1rem;
top: 1.5rem;
}
#media(max-width:768px) {
#sidebar {
margin-right: -250px;
}
#sidebar.active {
margin-right: 0px;
}
#sidebarCollapse {
display: block;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>bootstrap 4 sidebar</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fa fa-align-justify"></i> <span></span>
</button>
<!--<a class="navbar-brand" href="#">Navbar</a> -->
</nav>
<h2>Collapsible Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
</div>
<nav id="sidebar">
<div class="sidebar-header">
<h3>SIDEBAR</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
home1
</li>
<li>
home2
</li>
<li>
home3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Page
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
page1
</li>
<li>
page2
</li>
<li>
page3
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact Us
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
</li>
<li>
</li>
</ul>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
Here is another version that has the sidebar showing when above 768px viewport width which is standard for sidebars:
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none!important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
}
.wrapper {
display: flex;
align-items: stretch;
width: 100%;
overflow-x: hidden;
/*perspective: 1500px; */
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
margin-right: 0px;
transition: all 0.3s;
}
#sidebar.active {
margin-right: 0px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0px;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
left: 20px;
transform: translateY(50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#sidebarCollapse {
display: none;
position: absolute;
right: 1rem;
top: 1.5rem;
}
#media(max-width:768px) {
#sidebar {
margin-right: -250px;
}
#sidebar.active {
margin-right: 0px;
}
#sidebarCollapse {
display: block;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>bootstrap 4 sidebar</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fa fa-align-justify"></i> <span></span>
</button>
<!--<a class="navbar-brand" href="#">Navbar</a> -->
</nav>
<h2>Collapsible Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
</div>
<nav id="sidebar">
<div class="sidebar-header">
<h3>SIDEBAR</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
home1
</li>
<li>
home2
</li>
<li>
home3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Page
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
page1
</li>
<li>
page2
</li>
<li>
page3
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact Us
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
</li>
<li>
</li>
</ul>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
move the #sidebar to after the content to move the sidebar to the right. Alternatively use the order property in flex.
for #sidebar add display:none to the css to prevent it from showing when first going to the page
you'll need to modify click event
$(document).ready(function() {
$('body').on('click', function() {
$('#sidebar').show();
});
});
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none!important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
display:none;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0px;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#media(max-width:768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0px;
}
#sidebarCollapse span {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>bootstrap 4 sidebar</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fa fa-align-justify"></i> <span></span>
</button>
<!--<a class="navbar-brand" href="#">Navbar</a> -->
</nav>
<h2>Collapsible Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
</div>
<nav id="sidebar">
<div class="sidebar-header">
<h3>SIDEBAR</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
home1
</li>
<li>
home2
</li>
<li>
home3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Page
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
page1
</li>
<li>
page2
</li>
<li>
page3
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact Us
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
</li>
<li>
</li>
</ul>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Here is the code i used. On pressing the navbar menu the content should move right with a delay of 0.7s same as the sidebar opens with a delay of 0.7s but it is not working.
Kindly review the code and suggest something.
is it because of some media query I am using or anything else.?
Kindly review the code and suggest something.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.header{
width: 100%;
height: 70px;
background-color: #2f3640;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
}
.header img{
width: 60px;
height: 60px;
margin-right: 15px;
}
.header h1 {
line-height: 70px;
color: #fff;
}
.Content{
margin-top: 80px;
width: 100;
padding: 20px;
float: right;
transition: all 0.7s;
}
.Content img{
width: 100%;
max-width: 700px;
display: block;
margin: auto;
}
.Content p{
text-align: justify;
}
.Sidebar{
width: 20%;
height: 100%;
position: fixed;
top: 70px;
background-color: #353b48;
left: -100%;
transition: .7s;
}
.Sidebar ul{
list-style: none;
}
.Sidebar ul li {
border-bottom: 2px solid rgba(255, 255, 255, .1);
}
.Sidebar ul li a{
display: block;
text-decoration none;
color: #fff;
font-size: 20px;
padding: 15px 25px;
transition: .4s;
}
span{
margin-left: 15px;
}
.Sidebar ul li a:hover {
border-left: 10px solid white;
}
.social{
margin-top: 200px;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 30px;
border-bottom: 2px solid rgba(255, 255, 255, .1);
border-top: 2px solid rgba(255, 255, 255, .1);
padding: 15px 25px;
}
i{
font-size: 30px;
color: #fff;
transition: .2s;
}
i:hover{
transform: scale(1.2);
color: green;
}
.show-btn, .hide-btn {
font-size: 35px;
color: #fff;
position: fixed;
top: 15px;
left: 50px;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -10;
}
.hide-btn{
opacity: 0;
}
#chk:checked ~ .Sidebar{
left: 0;
}
#chk:checked ~ .show-btn{
opacity: 0;
}
#chk:checked ~ .hide-btn{
opacity: 1;
}
#chk:checked ~ .Content{
width: 80%;
float: right;
transition: all 0.7s;
}
#media(max-width: 768px){
.Sidebar{
width: 100%;
text-align: center;
}
.Sidebar ul li a:hover {
border-left: 30px solid white;
}
.header h1{
display: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side-NavBar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="header">
<img src="../images/fullstackLogo.png" alt="logo-img">
<h1>FullStack</h1>
</div>
<input type="checkbox" name="" id="chk">
<label for="chk" class="show-btn">
<i class="fa fa-bars"></i>
</label>
<label for="chk" class="hide-btn">
<i class="fa fa-times"></i>
</label>
<div class="Sidebar">
<ul>
<li><i class="fa fa-home"><span>Home</span></i></li>
<li><i class="fa fa-user"><span>About</span></i></li>
<li><i class="fa fa-tasks"><span>Services</span></i></li>
<li><i class="fa fa-rss"><span>Blog</span></i></li>
<li><i class="fa fa-id-card"><span>Contact</span></i></li>
</ul>
<div class="social">
<i class="fa fa-facebook-square"></i>
<i class="fa fa-youtube-square"></i>
<i class="fa fa-instagram"></i>
</div>
</div>
<div class="Content">
<img src="../images/laptop1.jpg" alt="body-img">
<p>
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>
I corrected your code.
This CSS transitions is not working perfectly Because of you are using different CSS property of sidebar and content part to show this transitions.
Currently you are manipulating CSS property of sidebar is left -100% to 0 cause this issue.
Please manage CSS properties width:0% to 20% of sidebar which transact over a same period of time as content part.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.header {
width: 100%;
height: 70px;
background-color: #2f3640;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
}
.header img {
width: 60px;
height: 60px;
margin-right: 15px;
}
.header h1 {
line-height: 70px;
color: #fff;
}
.Content {
margin-top: 80px;
width: 100%;
padding: 20px;
float: right;
transition: all 0.7s;
}
.Content img {
width: 100%;
max-width: 700px;
display: block;
margin: auto;
}
.Content p {
text-align: justify;
}
.Sidebar {
width:0%;
height: 100%;
position: fixed;
top: 70px;
background-color: #353b48;
left:0;
transition: all 0.7s;
overflow: hidden;
}
.Sidebar ul {
list-style: none;
}
.Sidebar ul li {
border-bottom: 2px solid rgba(255, 255, 255, .1);
}
.Sidebar ul li a {
display: block;
text-decoration none;
color: #fff;
font-size: 20px;
padding: 15px 25px;
transition: .4s;
}
span {
margin-left: 15px;
}
.Sidebar ul li a:hover {
border-left: 10px solid white;
}
.social {
margin-top: 200px;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 30px;
border-bottom: 2px solid rgba(255, 255, 255, .1);
border-top: 2px solid rgba(255, 255, 255, .1);
padding: 15px 25px;
}
i {
font-size: 30px;
color: #fff;
transition: .2s;
}
i:hover {
transform: scale(1.2);
color: green;
}
.show-btn, .hide-btn {
font-size: 35px;
color: #fff;
position: fixed;
top: 15px;
left: 50px;
}
#chk {
position: absolute;
visibility: hidden;
z-index: -10;
}
.hide-btn {
opacity: 0;
}
#chk:checked ~ .Sidebar {
width: 20%;
}
#chk:checked ~ .show-btn {
opacity: 0;
}
#chk:checked ~ .hide-btn {
opacity: 1;
}
#chk:checked ~ .Content {
width: 80%;
}
#media(max-width: 768px) {
.Sidebar {
width: 100%;
text-align: center;
}
.Sidebar ul li a:hover {
border-left: 30px solid white;
}
.header h1 {
display: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side-NavBar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="header"> <img src="../images/fullstackLogo.png" alt="logo-img">
<h1>FullStack</h1>
</div>
<input type="checkbox" name="" id="chk">
<label for="chk" class="show-btn"> <i class="fa fa-bars"></i> </label>
<label for="chk" class="hide-btn"> <i class="fa fa-times"></i> </label>
<div class="Sidebar">
<ul>
<li><i class="fa fa-home"><span>Home</span></i>
<About/li>
<li><i class="fa fa-user"><span>About</span></i></li>
<li><i class="fa fa-tasks"><span>Services</span></i></li>
<li><i class="fa fa-rss"><span>Blog</span></i></li>
<li><i class="fa fa-id-card"><span>Contact</span></i></li>
</ul>
<div class="social"> <i class="fa fa-facebook-square"></i> <i class="fa fa-youtube-square"></i> <i class="fa fa-instagram"></i> </div>
</div>
<div class="Content"> <img src="../images/laptop1.jpg" alt="body-img">
<p> Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</body>
</html>
Please click on 'full page' to see correct output
I've made a diagonal scroll page but when I applied the plugin to make it scroll this way the navbar was not fixed anymore, plus my sections aren't centered, I mean they're displayed vertically instead of diagonally, I don't know how to display them that way, any solutions? My top priority is the navbar, but if I can fix both things in one question, even better. Thanks SO community!
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
body {
background-color: #900c3f;
font-family: Montserrat;
height: 100vh;
color: #F5F5F5;
overflow: hidden;
overflow-y: scroll;
scroll-behavior: smooth;
}
img {
width: 130px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}
nav {
width: 100%;
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #ff5733;
}
.nav-links li a {
display: inline-block;
padding-bottom: 4px;
background-image: linear-gradient(#F5F5F5, #F5F5F5);
background-position: 0 100%;
/*OR bottom left*/
background-size: 0% 5px;
border-radius: 5px;
background-repeat: no-repeat;
transition: background-size 0.3s, background-position 0s 0.3s;
/*change after the size immediately*/
}
.nav-links li a:hover {
background-position: 100% 100%;
/*OR bottom right*/
background-size: 100% 5px;
border-radius: 5px;
}
/*.nav-links li a{
display: inline-block;
}
.nav-links li a:after {
content: '';
width: 0;
height: 5px;
display: block;
background: #F5F5F5;
transition: 300ms;
border-radius: 5px;
} */
.nav-links li a:hover:after {
width: 100%;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
}
.nav-links li {
list-style: none;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 17vh;
background-color: #ff5733;
display: flex;
flex-direction: column;
font-size: 80%;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.nav-active {
transform: translateX(0%);
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100vh;
scroll-snap-align: center;
}
section h1 {
font-size: 4rem;
justify-content: center;
align-items: center;
}
section p {
font-size: 1.5rem;
justify-content: center;
align-items: center;
}
/* Section Images */
section#home {
background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;
}
section#portfolio {
background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;
}
section#submit {
background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;
}
section#contact {
background: url('https://source.unsplash.com/2aAHlfDOhJM/1600x900') no-repeat center center/cover;
}
section#about {
background: url('https://source.unsplash.com/user/erondu/1600x900') no-repeat center center/cover;
}
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght#900&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Subworld Productions</title>
<!-- <link rel="stylesheet" href="css/styles.css">-->
<body data-0="transform:translateX(0%)" data-4000="transform:translateX(-300%)">
<header>
<nav>
<img src="Graphic logo.png" alt="Subworld Productions">
<ul class="nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Submit</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section id="home">
<h1>HOME PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="portfolio">
<h1>PORTFOLIO PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="submit">
<h1>SUBMIT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="contact">
<h1>CONTACT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="about">
<h1>ABOUT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</header>
<!-- <script src="javascript/app.js"></script>
<script src="skrollr.js"></script>-->
<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js">
skrollr.init();
</script>
</body>
There were a few issues with your css. The first is that you had multiple declarations for nav link attributes. I grouped them and adjusted them (more later) I also tidied your css to put your css in order: nav links first then nav links li then nav links li a etc, because css is read in that order. You had display:flex; and position:absolute in one css class - these conflict, and i removed the absolute positioning.
What was really throwing out your ul however, making the links non-viewable, was the translateX - translating your links by 100% was moving your links out of sight. I commented this out. As-is (now) your links display, animate on hover, and scroll-to the appropriate section when clicked. One more note: you had two semi-colons after the urls in your sections. I corrected this both in your posted code and snippet code.
Hope this helps
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
body {
background-color: #900c3f;
font-family: Montserrat;
height: 100vh;
color: #F5F5F5;
overflow: hidden;
overflow-y: scroll;
scroll-behavior: smooth;
}
img {
width: 130px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}
nav {
width: 100%;
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #ff5733;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
/* position: absolute;
right: 0px;*/
height: 10vh;
top: 17vh;
background-color: #ff5733;
flex-direction: row;
font-size: 80%;
align-items: center;
/*transform: translateX(100%);*/
transition: transform 0.5s ease-in;
}
.nav-links li {
list-style: none;
color: #ffffff;
}
.nav-links li a {
display: inline-block;
color: #ffffff;
}
.nav-links li a:after {
content: '';
width: 0;
height: 5px;
display: block;
background: #F5F5F5;
transition: 300ms;
border-radius: 5px;
}
.nav-links li a:hover:after {
width: 100%;
}
.nav-links li {
opacity: 1;
}
.burger {
display: block;
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.nav-active {
transform: translateX(0%);
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100vh;
scroll-snap-align: center;
}
section h1 {
font-size: 4rem;
justify-content: center;
align-items: center;
}
section p {
font-size: 1.5rem;
justify-content: center;
align-items: center;
}
/* Section Images */
section#home {
background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;
}
section#portfolio {
background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;
}
section#submit {
background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;
}
section#contact {
background: url('https://source.unsplash.com/2aAHlfDOhJM/1600x900') no-repeat center center/cover;
}
section#about {
background: url('https://source.unsplash.com/user/erondu/1600x900') no-repeat center center/cover;
}
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght#900&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Subworld Productions</title>
<!-- <link rel="stylesheet" href="css/styles.css">-->
<body data-0="transform:translateX(0%)" data-4000="transform:translateX(-300%)">
<header>
<nav>
<img src="Graphic logo.png" alt="Subworld Productions">
<ul class="nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Submit</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section id="home">
<h1>HOME PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="portfolio">
<h1>PORTFOLIO PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="submit">
<h1>SUBMIT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="contact">
<h1>CONTACT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="about">
<h1>ABOUT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</header>
<!-- <script src="javascript/app.js"></script>
<script src="skrollr.js"></script>-->
<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js">
skrollr.init();
</script>
</body>
I have a problem with my responsive menu when I switch to a very small window I have my menu displayed but have seen the contents of the page suddenly impossible to click on the links.
So I can't find where I made a mistake.
Thank you...
$(document).ready(function() {
let menu = $('#menu');
let navegation = $('#navegation');
let scrollZero = 0;
$('#icon-menu').on('click', function() {
$(this).toggleClass('fa-times fa-bars');
$('body').toggleClass('no-scroll-y');
navegation.toggleClass('menu-active');
});
$('.submenu').on('click', function() {
$(this).siblings('.submenu').children('.children').slideUp();
$(this).siblings('.submenu').children('a').children('.caret').removeClass('rotate');
$(this).children('a').children('.caret').toggleClass('rotate');
$(this).children('.children').slideToggle();
});
$(window).on('click', function(e) {
if (menu.has(e.target).length == 0 && !menu.is(e.target)) {
$('.submenu').children('.children').slideUp();
$('.submenu').children('a').children('.caret').removeClass('rotate');
if ($(this).width() < 900 && navegation.hasClass('menu-active')) {
$('#icon-menu').trigger('click');
}
}
});
$(window).on('load scroll resize', function () {
let positionScrollY = $(window).scrollTop();
if (positionScrollY < scrollZero) {
menu.removeClass('scroll-down');
} else {
$('.submenu').children('.children').slideUp();
$('.submenu').children('a').children('.caret').removeClass('rotate');
menu.addClass('scroll-down');
}
scrollZero = positionScrollY;
if (positionScrollY == 0) {
menu.removeClass('scroll-down');
}
});
$(window).on('resize', function() {
$('body').removeClass('no-scroll-y');
if ($(this).width() > 900 && !navegation.hasClass('menu-active')) {
$('#icon-menu').addClass('fa-bars').removeClass('fa-times');
navegation.removeClass('menu-active');
} else if ($(this).width() < 900 && navegation.hasClass('menu-active')) {
$('body').addClass('no-scroll-y');
}
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*:focus {
outline: 0;
}
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
background-color: #fefefe;
}
a {
text-decoration: none;
}
/*------------------------------------*\
-------- Navigation
\*------------------------------------*/
.no-scroll-y {
overflow-y: hidden;
}
header {
background-color: #FFFFFF;
background-image: url("images/noise.png");
background-repeat: repeat;
width: 100%;
height: 54px;
}
.scroll-down,
.scroll-down .btn-menu {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.menu-bar {
display: none;
}
header nav::-webkit-scrollbar {
width: 7px;
}
header nav::-webkit-scrollbar-thumb {
background-color: rgba(77, 77, 77, 0.9);
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset,
0 -1px 0 rgba(255, 255, 255, 0.2) inset;
}
header nav {
max-width: 1270px;
height: 54px;
margin: 0 auto;
}
.menu-active {
opacity: 1;
-webkit-transform: perspective(500px) rotateY(0deg);
transform: perspective(500px) rotateY(0deg);
}
header nav ul {
/*display: flex;
justify-content: space-around;*/
list-style: none;
}
header nav ul li {
display: inline-block;
position: relative;
}
header nav ul li a {
color: #1D3B6A;
display: block;
padding: 16px 10px;
font-family: 'Oswald';
font-size: 1.2rem;
}
header nav ul li a:hover {
color: #FC5342;
}
header nav ul li a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
header nav ul li a:hover:before {
visibility: visible;
background-color: #1D3B6A;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
header nav ul li a span {
margin-right: 10px;
}
header nav ul li .caret {
margin: 0 0 0 10px;
position: relative;
-webkit-transition: 0.3s ease all;
transition: 0.3s ease all;
}
header nav ul li .caret.rotate {
-webkit-transform: rotateZ(-180deg);
transform: rotateZ(-180deg);
}
header nav ul li .children {
background-color: #FFFFFF;
padding: 10px;
border-radius: 5px;
position: absolute;
min-width: 280px;
right: 0;
top: 70px;
box-shadow: 0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);
display: none;
-webkit-animation: children .4s cubic-bezier(.7,.006,.2,1);
animation: children .4s cubic-bezier(.7,.006,.2,1);
-webkit-transform-origin: top right;
transform-origin: top right;
z-index: 10000;
}
#-webkit-keyframes children {
from {
-webkit-transform: translateY(-1rem) scale(.9);
transform: translateY(-1rem) scale(.9);
opacity: 0;
}
to {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1;
}
}
#keyframes children {
from {
-webkit-transform: translateY(-1rem) scale(.9);
transform: translateY(-1rem) scale(.9);
opacity: 0;
}
to {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1;
}
}
/*
header nav ul li:hover .children,
header nav ul li:focus .children,
header nav ul li:active .children {
display: block;
}
*/
header nav ul li .children li {
display: block;
overflow: hidden;
}
header nav .right {
float: right;
}
header nav ul li .children li a {
display: block;
color: #828282;
font-size: 15px;
padding: 10px;
font-weight: 500;
font-family: Roboto;
}
header nav ul li .children li a:hover {
color: #AAB74E;
font-size: 15px;
}
header nav ul li .children li a span {
float: right;
font-size: 0.5em;
margin: 0 0 0 10px;
position: relative;
top: 5px;
}
/*------------------------------------*\
-------- Content
\*------------------------------------*/
.hita-main {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 1270px;
}
#hita-top {
padding-top: 40px;
}
.hita-row {
margin-right: -15px;
margin-left: -15px;
}
.hita-m-1,
.hita-m-2,
.hita-m-3 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 25px;
}
/*------------------------------------*\
-------- Responsive ( Min )
\*------------------------------------*/
#media (min-width: 320px) {
.hita-main {
max-width: 460px;
}
}
#media (min-width: 576px) {
.hita-main {
max-width: 540px;
}
}
#media (min-width: 768px) {
.hita-main {
max-width: 720px;
}
}
#media (min-width: 992px) {
.hita-main {
max-width: 960px;
}
}
#media (min-width: 1280px) {
.hita-main {
max-width: 1270px;
}
.hita-m-1, .hita-m-2, .hita-m-3 {
float: left;
}
.hita-m-3 {
width: 100%;
}
.hita-m-2 {
width: 75%;
}
.hita-m-1 {
width: 25%;
}
}
/*------------------------------------*\
-------- Responsive ( Max )
\*------------------------------------*/
#media screen and (max-width: 900px) {
.menu-bar {
display: block;
width: 100%;
}
.menu-bar .btn-menu {
background-color: #FFFFFF;
background-image: url("images/noise.png");
background-repeat: repeat;
color: #193767;
cursor: auto;
display: block;
font: bold 25px 'Arial', sans-serif;
left: 0;
padding: 16px;
position: relative;
top: 0;
-webkit-transition: 0.3s ease all;
transition: 0.3s ease all;
width: 100%;
z-index: 1;
}
.menu-bar .btn-menu span {
cursor: pointer;
float: right;
font-size: 25px;
}
header nav {
height: calc(100% - 69px);
left: 0;
margin: 0;
opacity: 0;
overflow: auto;
position: fixed;
top: calc(70px - 1px);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: perspective(500px) rotateY(90deg);
transform: perspective(500px) rotateY(90deg);
-webkit-transition: 0.3s ease all;
transition: 0.3s ease all;
width: 80%;
background-color: #012345;
background-image: url("images/noise.png");
background-repeat: repeat;
}
header nav ul {
/*flex-direction: column;*/
}
header nav ul li {
border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
display: block;
}
header nav ul li .caret {
float: right;
}
header nav ul li .children {
display: none;
position: relative;
width: 100%;
top: 0;
border-radius: 0px;
background-color: #FFFFFF;
background-image: url("images/noise.png");
background-repeat: repeat;
}
header nav ul li:hover .children,
header nav ul li:focus .children,
header nav ul li:active .children {
display: none;
}
header nav ul li .children li a {
margin-left: 20px;
}
header nav .right {
float: left;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Menu dropdown</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/v4-shims.css">
</head>
<body>
<header id="menu">
<div class="menu-bar">
<a href="javascript:void(0);" class="btn-menu">
<span id="icon-menu" class="fa fa-bars"></span>
</a>
</div>
<nav id="navegation">
<ul>
<li><i class="fas fa-home"></i></li>
<li>Lorem</li>
<li>Lorem</li>
<li class="submenu">Lorem
<ul class="children">
<li>Lorem #1</li>
<li>Lorem #2</li>
<li>Lorem #3</li>
<li>Lorem #4</li>
<li>Lorem #5</li>
</ul>
</li>
<li class="submenu">Lorem
<ul class="children">
<li>Lorem #1</li>
<li>Lorem #2</li>
<li>Lorem #3</li>
<li>Lorem #4</li>
<li>Lorem #5</li>
</ul>
</li>
<li class="submenu">Lorem
<ul class="children">
<li>Lorem #1</li>
<li>Lorem #2</li>
<li>Lorem #3</li>
<li>Lorem #4</li>
<li>Lorem #5</li>
</ul>
</li>
<li class="right">Lorem</li>
</ul>
</nav>
</header>
<!-- +++++ Section - Content +++++ -->
<div class="hita-main" id="hita-top">
<div class="hita-row">
<div class="hita-m-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<!-- Menu Right -->
<div class="hita-m-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
</body>
</html>
This is if someone could help me explain or I made a mistake thank you ...
Try to add z-index to the nav link in order to bring it to cover the div.
header nav ul li a {
color: #1D3B6A;
display: block;
padding: 16px 10px;
font-family: 'Oswald';
font-size: 1.2rem;
z-index: 1;
See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Thank you very much for your help I found my error I forgot the z-index but not where you told me but I found thank you...
header nav {
height: calc(100% - 69px);
left: 0;
margin: 0;
opacity: 0;
overflow: auto;
position: fixed;
top: calc(70px - 1px);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: perspective(500px) rotateY(90deg);
transform: perspective(500px) rotateY(90deg);
-webkit-transition: 0.3s ease all;
transition: 0.3s ease all;
width: 80%;
background-color: #012345;
background-image: url("images/noise.png");
background-repeat: repeat;
z-index: 1;
}
I am trying to make a newspaper type footer.
I've got all the things fine.
The problem is that i have 2 <div>s inside the newspaper <div class = "newspaper" , each having 1 <p> .
But, the first <p> is split across the two sides of the vertical line.
U can see it here, but if U dont, then:
Copy the code and paste it in notepad.
And open it with a browser.
Hover on "FeedBack".
It would be outlined
Now U should see a part pf the outline box on the other side of the vertical line.
If U dont, then try changing the size of the browser.
Is there any way to avoid this??
p {
font-size: 20px;
font-family: Comic Sans MS;
}
footer {
position: relative;
top: 10px;
background-color: #316441;
border: solid black 2px;
}
.con {
text-align: left;
margin-left: 10px;
margin-right: 10px;
}
.contact {
color: white;
font-weight: 5px;
font-size: 40px;
}
.fol {
margin-left: 10px;
margin-right: 10px;
text-align: left;
}
.follow {
color: white;
font-weight: 5px;
font-size: 40px;
}
a.email {
position: relative;
top: 5px;
padding: 5px;
color: white;
text-decoration: none;
}
a.feedback {
position: relative;
top: 17px;
padding: 5px;
color: white;
text-decoration: none;
}
a.feedback:hover,
a.email:hover {
outline: 2px white solid;
padding: 5px;
}
.sm {
padding: 8px;
font-size: 30px !important;
text-align: center;
text-decoration: none;
border: white 2px solid;
border-radius: 5px;
background-color: black;
color: white;
}
.newspaper {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-rule: 2px #d3d3d3 solid;
-moz-column-rule: 2px #d3d3d3 solid;
column-rule: 2px #d3d3d3 solid;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>
<div class="newspaper">
<div class="con">
<p><span class="contact">Contact Us: </span><br><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: HyperMathsMail<span style="font-family: 'New Times Roman'">#</span>gmail.com<br>
<i class="fa fa-comments-o" aria-hidden="true"></i> FeedBack</p>
</div>
<div class="fol">
<p><span class="follow">Follow Us: </span><span style="position: relative;left: 5px;"><br> <a href = "javascript:void(0)" class="fa fa-youtube-play sm fa-fw" ></a></span></p>
</div>
</div>
</footer>
</body>
</html>
Replacing column-count with display: flex appears to give you the same result and fixes the issue?
p {
font-size: 20px;
font-family: Comic Sans MS;
}
footer {
position: relative;
top: 10px;
background-color: #316441;
border: solid black 2px;
}
.con {
text-align: left;
margin-left: 10px;
margin-right: 10px;
border-right: 3px solid white;
}
.contact {
color: white;
font-weight: 5px;
font-size: 40px;
}
.fol {
margin-left: 10px;
margin-right: 10px;
text-align: left;
}
.follow {
color: white;
font-weight: 5px;
font-size: 40px;
}
a.email {
position: relative;
top: 5px;
padding: 5px;
color: white;
text-decoration: none;
}
a.feedback {
position: relative;
top: 17px;
padding: 5px;
color: white;
text-decoration: none;
}
a.feedback:hover,
a.email:hover {
outline: 2px white solid;
padding: 5px;
}
.sm {
padding: 8px;
font-size: 30px !important;
text-align: center;
text-decoration: none;
border: white 2px solid;
border-radius: 5px;
background-color: black;
color: white;
}
.newspaper {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>
<div class="newspaper">
<div class="con">
<p><span class="contact">Contact Us: </span><br><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: HyperMathsMail<span style="font-family: 'New Times Roman'">#</span>gmail.com<br>
<i class="fa fa-comments-o" aria-hidden="true"></i> FeedBack</p>
</div>
<div class="fol">
<p><span class="follow">Follow Us: </span><span style="position: relative;left: 5px;"><br> <a href = "javascript:void(0)" class="fa fa-youtube-play sm fa-fw" ></a></span></p>
</div>
</div>
</footer>
</body>
</html>
You don't have to use column-count as you know exactly what there is in each column. column-count is usefull for large text, but is not what you need here i think. You can use display:table instead.
p {
font-size: 20px;
font-family: Comic Sans MS;
}
footer {
position: relative;
top: 10px;
background-color: #316441;
border: solid black 2px;
display:table ;
width:100% ;
}
.newspaper {
display:table-row ;
}
.newspaper>div {
display:table-cell ;
padding: 0 10px;
}
.newspaper>div.con {
border-right:3px solid white ;
}
.contact {
color: white;
font-weight: 5px;
font-size: 40px;
}
.follow {
color: white;
font-weight: 5px;
font-size: 40px;
}
a.email {
position: relative;
top: 5px;
padding: 5px;
color: white;
text-decoration: none;
}
a.feedback {
position: relative;
top: 17px;
padding: 5px;
color: white;
text-decoration: none;
}
a.feedback:hover,
a.email:hover {
outline: 2px white solid;
padding: 5px;
}
.sm {
padding: 8px;
font-size: 30px !important;
text-align: center;
text-decoration: none;
border: white 2px solid;
border-radius: 5px;
background-color: black;
color: white;
}
.newspaper div:first-child() {
border-right:1px solid white ;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>
<div class="newspaper">
<div class="con">
<p><span class="contact">Contact Us: </span><br><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: HyperMathsMail<span style="font-family: 'New Times Roman'">#</span>gmail.com<br>
<i class="fa fa-comments-o" aria-hidden="true"></i> FeedBack</p>
</div>
<div class="fol">
<p><span class="follow">Follow Us: </span><span style="position: relative;left: 5px;"><br> <a href = "javascript:void(0)" class="fa fa-youtube-play sm fa-fw" ></a></span></p>
</div>
</div>
</footer>
</body>
</html>
I suggest that you do not use the top property on your a.email and a.feedback CSS selectors. Elements positioned like this become difficult to maintain, and leads to weird issues, like the issue you're currently having.
Remove the top and position: relative CSS properties, add display: block to both elements and, finally, you can use padding as appropriate to create spacing:
a.email {
padding: 10px 5px;
display: block;
color: white;
text-decoration: none;
}
a.feedback {
padding: 10px 5px;
display: block;
color: white;
text-decoration: none;
}
This answer provides more info on why to avoid position: relative top.