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>
Related
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>
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>
https://jsfiddle.net/drqjmssy/
From the jsfiddle link, I am trying to have "div class='main_content'" be the same vertical height as the "div class='sidebar'". How does one accomplish that? If you can't load the fiddle or it's awful formatting, here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>My project</title>
<style>
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav > ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
</style>
</head>
<body>
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</article>
</div>
<footer>
© Yazen 2018.
</footer>
</div>
</body>
</html>
Sorry if any of this is confusing./////////////////////////////////////////////////////////////////////////////////
You could wrap the elements in a new tag (I've used section) and add display: flex.
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav>ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
section {
display: flex;
}
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<section>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</article>
</div>
</section>
<footer>
© Yazen 2018.
</footer>
</div>
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.
I'm creating a drop down menu, and having trouble with the :hover pseudoclass. When I hover on an a tag in the menu, the parent container's width stretches to meet...something. What's going on?
Note: the weird use of background-colors is just to give myself a better understanding of how the box model works.
HTML is:
<header>
<h1>test <span>test</span></h1>
<nav>
<ul class="menu">
<li>Menu
<ul class="submenu">
<li>Aaaaa Aaaaa Aaaa</li>
<li>Bbbbb Bbbbb Bbbbb</li>
<li>Ccccc Ccccc Ccccc</li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="content" id="one">
<h2>Aaaa</h2>
<h3>Aaaa</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 class="content" id="two">
<h2>Bbbb</h2>
<h3>Bbbb</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 class="content" id="three">
<h2>Cccc</h2>
<h3>Cccc</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<footer>
<ul class="social">
<li><span class="fa fa-twitter fa-2x"></span></li>
<li><span class="fa fa-github fa-2x"></span></li>
<li><span class="fa fa-envelope-o fa-2x"></span></li>
</ul>
</footer>
CSS is:
nav {
position: inherit;
left: 30px;
top: 78px;
}
.menu {
position: inherit;
background-color: yellow;
width: 90%;
}
.menu > li {
float: left;
list-style: none;
display: inline-block;
}
.menu li a {
display: inherit;
padding: 10px;
}
.menu li a:hover {
background-color: black;
color: white;
text-shadow: none;
}
ul.submenu {
display: none;
}
li:hover > ul {
position: inherit;
display: block;
background-color: blue;
}
.submenu li {
padding: 0;
margin: 0;
width: 100%;
}
.submenu li a {
display: inherit;
padding: 10px;
}
.submenu li a:hover:after {
content: "";
color: white;
text-shadow: none;
padding: 0 15px;
}
Here's a demo: http://jsfiddle.net/ur3dettv/
Add position: absolute to the inside ul element.
.menu li ul{
position: absolute;
}
Working Fiddle
In a normal layout, if the child element's height is increased then parent stretches to contain the child element. That is what happening with you in your above code.
The solution is to make the child element independent of its parent container which can be done by using position: absolute css property.
Because on this class
.submenu li a:hover:after {
content: "";
color: white;
text-shadow: none;
padding: 0 15px;
}
you have some padding set. Taking this off fixes your issue. DEMO