Related
I am not very well versed in HTML and CSS. I am currently building a website and I integrated a sidebar into my web application using Bootstrap, but it has messed my layouts, and I can't seem to figure out how to move the content in a block to the left of side of my sidebar.
Please view the image on this link
[1]: https://i.stack.imgur.com/XFaVv.png
As seen in the picture above, my sidebar is located at the right and my content is located at the below of my sidebar. Below are my codes for my sidebar and the base template.
// Not bringing sidebar when active
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
// When the button is clicked the sidebar will be active in the following code
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Sidebar Section */
.app {
display: flex;
min-height: 100vh;
}
.sidebar {
flex: 1 1 0;
max-width: 300px;
padding: 20px;
background: linear-gradient(#ed7014, #fa5b3d);
/* With Scrollbar */
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
}
.sidebar h3 {
font-family: 'Bungee', cursive;
color: #fff;
}
.sidebar .menu {
margin: 0 -1rem;
}
.sidebar .menu .menu-item {
display: block;
padding: 1em;
color: #fff;
text-decoration: none;
transition: 0.2s linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
color: rgb(255, 238, 151);
;
border-right: 5px solid rgb(255, 238, 151);
}
/* Content Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #ffa500;
}
::-webkit-scrollbar-thumb:hover {
background-color: #d67229;
}
/* Content Section */
.content {
flex: 1 1 0;
padding: 2rem;
background: linear-gradient(#dd5713, #d67229);
}
.content img {
width: 100%;
max-width: 300px;
display: block;
margin: auto;
}
.content h1 {
font-family: 'Bungee', cursive;
color: #fff;
margin-bottom: 1rem;
}
.content strong {
font-family: 'Bungee', cursive;
color: #fff;
}
.content p {
text-align: justify;
color: #fff;
}
/* Sample Code Content */
.sample-code {
width: 65%;
background: rgb(255, 238, 151);
padding: 1em;
margin-bottom: 2em;
border-radius: 10px;
box-shadow: 15px 15px;
}
.sample-code p {
color: #000;
}
/* Button Sidebar section */
.menu-toggle {
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #ed7014;
cursor: pointer;
}
.button {
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.button>span,
.button>span::before,
.button>span::after {
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #fff;
transition-duration: .25s;
}
.button>span::before {
content: '';
top: -8px;
}
.button>span::after {
content: '';
top: 8px;
}
/* Button Animation */
.menu-toggle.is-active .button>span {
transform: rotate(45deg);
}
.menu-toggle.is-active .button>span::before {
top: 0;
transform: rotate(0deg);
}
.menu-toggle.menu-toggle.is-active .button>span::after {
top: 0;
transform: rotate(90deg);
}
/* Sidebar Footer */
.white-section {
text-align: center;
}
.p-white-sec {
color: #fff;
}
.container-fluid {
padding: 7px 15px;
}
.footer-icon {
margin: 20px 10px;
color: #fff;
}
.footer-icon:hover {
color: #ffa500;
transition: 0.2s linear;
}
/* Mobile Size */
#media (max-width: 1024px) {
/* Sidebar Section */
.sidebar {
max-width: 200px;
}
.sidebar img {
height: 6.5rem;
width: 10rem;
}
}
#media (max-width: 768px) {
/* Sidebar Section */
.menu-toggle {
display: block;
}
.sidebar {
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear;
}
.sidebar.is-active {
left: 0;
}
.sidebar img {
height: 6.5rem;
width: 10rem;
}
/* Content */
.content {
padding-top: 8rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Codin'up | HTML Course</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;900&family=Ubuntu:ital,wght#0,300;1,400;1,700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bungee&family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.png">
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/CSS/List of Course/HTML Course.css">
</head>
<body>
<section class="app">
<!-- Button for Sidebar -->
<div class="menu-toggle">
<div class="button">
<span></span>
</div>
</div>
<!-- Sidebar Section -->
<aside class="sidebar">
<a href="/HTML/List of Course/HTML Course.html">
<img src="/Logo/Codin'up Logo (1) White.png" alt="Codin'up">
</a>
<h3>HTML Course</h3>
<nav class="menu">
Home
Courses
</nav>
<hr>
<nav class="menu">
HTML Introduction
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
</nav>
<hr>
<!-- Sidebar Footer -->
<footer class="white-section" id="footer">
<div class="container-fluid">
<i class="fa-brands fa-twitter footer-icon"></i>
<i class="fa-brands fa-facebook-f footer-icon"></i>
<i class="fa-brands fa-instagram footer-icon"></i>
<i class="fa-solid fa-envelope footer-icon"></i>
<p class="p-white-sec">© 2022 ITMAWD21 Group 3</p>
</div>
</footer>
</aside>
<!-- Content Section -->
<main class="content">
<h1>Introduction To HTML</h1>
<img src="/Logo/HTML Logo.png" alt="Codin'up Logo">
<strong>Description</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ipsa, quod, placeat cupiditate enim hic natus maiores nobis sequi nisi odit voluptas earum quas perspiciatis qui explicabo recusandae ullam quibusdam? Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Dignissimos obcaecati exercitationem voluptatem accusamus, beatae sunt voluptatibus quam odio magnam, mollitia minima dicta distinctio, amet accusantium! Dolore debitis qui quis iusto. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Accusantium harum corrupti nisi ratione aperiam commodi rerum. Delectus illum suscipit distinctio unde iste veritatis voluptate nulla, enim rem harum ullam rerum. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut cumque totam ipsum, quia voluptate quam esse reprehenderit explicabo atque, molestiae doloribus earum repellendus architecto aperiam minima impedit dicta autem laboriosam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
corrupti adipisci. Itaque sint, nemo laborum a ratione corrupti laboriosam tenetur soluta pariatur nostrum fuga, earum voluptate ducimus iure ipsum saepe? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae recusandae
iste, molestiae modi ea numquam vero repellat. Doloremque iusto labore nobis placeat perspiciatis optio repellendus eius adipisci voluptas expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor doloremque rem debitis? Sed quod
eligendi inventore deleniti aliquid velit, magni perferendis, quaerat officiis in consequuntur tenetur ipsum animi tempore asperiores.</p>
<!-- Sample Code Content -->
<div class="sample-code">
<p><html></p>
<p><span style="padding-left: 20px;"><head></span></p>
<p><span style="padding-left: 40px;"><title>HTML Course</title></span></p>
<p><span style="padding-left: 20px;"></head></span></p>
<p><span style="padding-left: 20px;"><body></span></p>
<p><span style="padding-left: 40px;"><p>Hello World<p></span></p>
<p><span style="padding-left: 20px;"></body></span></p>
<p></html></p>
</div>
<strong>Code Description</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto, eveniet repudiandae ratione sint harum pariatur id numquam doloremque sequi eaque quo accusamus ab nihil aut alias inventore! Cumque, tempore.</p>
</main>
</section>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/c9df5e490e.js" crossorigin="anonymous"></script>
<!-- Bootstrap JS & External JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="/JS/List of Course/HTML Course.js"></script>
</body>
</html>
Can someone help me fit the content to the right beside my sidebar especially its layout? Thanks for the big help!
I would just apply position: sticky and height: 100vh on the sidebar:
position: sticky;
height: 100vh;
Giving it height: 100vh makes sure the sidebar always stretches to the entire height of the screen. position: sticky works in a similiar fashion to position: fixed but it doesn't affect the document flow in the same way. You can then apply positioning values such as top: 0 and left: 0, but those properties are already applied in your snippet.
// Not bringing sidebar when active
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
// When the button is clicked the sidebar will be active in the following code
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Sidebar Section */
.app {
display: flex;
min-height: 100vh;
}
.sidebar {
flex: 1 1 0;
max-width: 300px;
padding: 20px;
background: linear-gradient(#ed7014, #fa5b3d);
/* With Scrollbar */
/* Edit start */
position: sticky;
height: 100vh;
/* Edit end */
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
}
.sidebar h3 {
font-family: 'Bungee', cursive;
color: #fff;
}
.sidebar .menu {
margin: 0 -1rem;
}
.sidebar .menu .menu-item {
display: block;
padding: 1em;
color: #fff;
text-decoration: none;
transition: 0.2s linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
color: rgb(255, 238, 151);
;
border-right: 5px solid rgb(255, 238, 151);
}
/* Content Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #ffa500;
}
::-webkit-scrollbar-thumb:hover {
background-color: #d67229;
}
/* Content Section */
.content {
flex: 1 1 0;
padding: 2rem;
background: linear-gradient(#dd5713, #d67229);
}
.content img {
width: 100%;
max-width: 300px;
display: block;
margin: auto;
}
.content h1 {
font-family: 'Bungee', cursive;
color: #fff;
margin-bottom: 1rem;
}
.content strong {
font-family: 'Bungee', cursive;
color: #fff;
}
.content p {
text-align: justify;
color: #fff;
}
/* Sample Code Content */
.sample-code {
width: 65%;
background: rgb(255, 238, 151);
padding: 1em;
margin-bottom: 2em;
border-radius: 10px;
box-shadow: 15px 15px;
}
.sample-code p {
color: #000;
}
/* Button Sidebar section */
.menu-toggle {
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #ed7014;
cursor: pointer;
}
.button {
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.button>span,
.button>span::before,
.button>span::after {
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #fff;
transition-duration: .25s;
}
.button>span::before {
content: '';
top: -8px;
}
.button>span::after {
content: '';
top: 8px;
}
/* Button Animation */
.menu-toggle.is-active .button>span {
transform: rotate(45deg);
}
.menu-toggle.is-active .button>span::before {
top: 0;
transform: rotate(0deg);
}
.menu-toggle.menu-toggle.is-active .button>span::after {
top: 0;
transform: rotate(90deg);
}
/* Sidebar Footer */
.white-section {
text-align: center;
}
.p-white-sec {
color: #fff;
}
.container-fluid {
padding: 7px 15px;
}
.footer-icon {
margin: 20px 10px;
color: #fff;
}
.footer-icon:hover {
color: #ffa500;
transition: 0.2s linear;
}
/* Mobile Size */
#media (max-width: 1024px) {
/* Sidebar Section */
.sidebar {
max-width: 200px;
}
.sidebar img {
height: 6.5rem;
width: 10rem;
}
}
#media (max-width: 768px) {
/* Sidebar Section */
.menu-toggle {
display: block;
}
.sidebar {
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear;
}
.sidebar.is-active {
left: 0;
}
.sidebar img {
height: 6.5rem;
width: 10rem;
}
/* Content */
.content {
padding-top: 8rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Codin'up | HTML Course</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;900&family=Ubuntu:ital,wght#0,300;1,400;1,700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bungee&family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.png">
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/CSS/List of Course/HTML Course.css">
</head>
<body>
<section class="app">
<!-- Button for Sidebar -->
<div class="menu-toggle">
<div class="button">
<span></span>
</div>
</div>
<!-- Sidebar Section -->
<aside class="sidebar">
<a href="/HTML/List of Course/HTML Course.html">
<img src="/Logo/Codin'up Logo (1) White.png" alt="Codin'up">
</a>
<h3>HTML Course</h3>
<nav class="menu">
Home
Courses
</nav>
<hr>
<nav class="menu">
HTML Introduction
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
</nav>
<hr>
<!-- Sidebar Footer -->
<footer class="white-section" id="footer">
<div class="container-fluid">
<i class="fa-brands fa-twitter footer-icon"></i>
<i class="fa-brands fa-facebook-f footer-icon"></i>
<i class="fa-brands fa-instagram footer-icon"></i>
<i class="fa-solid fa-envelope footer-icon"></i>
<p class="p-white-sec">© 2022 ITMAWD21 Group 3</p>
</div>
</footer>
</aside>
<!-- Content Section -->
<main class="content">
<h1>Introduction To HTML</h1>
<img src="/Logo/HTML Logo.png" alt="Codin'up Logo">
<strong>Description</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ipsa, quod, placeat cupiditate enim hic natus maiores nobis sequi nisi odit voluptas earum quas perspiciatis qui explicabo recusandae ullam quibusdam? Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Dignissimos obcaecati exercitationem voluptatem accusamus, beatae sunt voluptatibus quam odio magnam, mollitia minima dicta distinctio, amet accusantium! Dolore debitis qui quis iusto. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Accusantium harum corrupti nisi ratione aperiam commodi rerum. Delectus illum suscipit distinctio unde iste veritatis voluptate nulla, enim rem harum ullam rerum. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut cumque totam ipsum, quia voluptate quam esse reprehenderit explicabo atque, molestiae doloribus earum repellendus architecto aperiam minima impedit dicta autem laboriosam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
corrupti adipisci. Itaque sint, nemo laborum a ratione corrupti laboriosam tenetur soluta pariatur nostrum fuga, earum voluptate ducimus iure ipsum saepe? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae recusandae
iste, molestiae modi ea numquam vero repellat. Doloremque iusto labore nobis placeat perspiciatis optio repellendus eius adipisci voluptas expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor doloremque rem debitis? Sed quod
eligendi inventore deleniti aliquid velit, magni perferendis, quaerat officiis in consequuntur tenetur ipsum animi tempore asperiores.</p>
<!-- Sample Code Content -->
<div class="sample-code">
<p><html></p>
<p><span style="padding-left: 20px;"><head></span></p>
<p><span style="padding-left: 40px;"><title>HTML Course</title></span></p>
<p><span style="padding-left: 20px;"></head></span></p>
<p><span style="padding-left: 20px;"><body></span></p>
<p><span style="padding-left: 40px;"><p>Hello World<p></span></p>
<p><span style="padding-left: 20px;"></body></span></p>
<p></html></p>
</div>
<strong>Code Description</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto, eveniet repudiandae ratione sint harum pariatur id numquam doloremque sequi eaque quo accusamus ab nihil aut alias inventore! Cumque, tempore.</p>
</main>
</section>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/c9df5e490e.js" crossorigin="anonymous"></script>
<!-- Bootstrap JS & External JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="/JS/List of Course/HTML Course.js"></script>
</body>
</html>
I don't know if i understand well but.
Try in the content class to add:
width:100%;
padding-left:300px; (the width of the menu)
.sidebar has a position; fixed.
You could apply styling to the main content <main class="content" style="left: 272px;position: absolute;">. But you must also account for the media queries adjusting the width of the sidebar. E.g.
#media (max-width: 1024px){
.sidebar {
max-width: 200px;
}
main.content {
left: 200px;
}
}
and
#media (max-width: 768px) {
.sidebar {
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear;
}
main.content {
left: 0;
height: 100%;
}
}
I would also use width property over max-width. To be sure that the content is aligns always as expected.
I have checked the layout maybe you can try using rows and columns to sort it out
<div class="row">
<div class="col-lg-3 col-xs-4">
//Sidebar code
</div>
<div class="col-lg-9 col-xs-8">
//Content code
</div>
</div>
This could be better option and will also be responsive.
If you are not comfortable or familiar then maybe like others suggested you can remove position:fixed styling in .sidebar will solve this problem temporarily
I have 2 div elements, and I want to add something on the Div 2 that when I Click on that Div, it will Display Div 1, so both DIV's will be visible when clicking Div 2!
Div 2 should remain visible all the time, but when I click on DIV 2, it should display Div 1!
I want a JS script!
.box1 {
display: none;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid #ea1538;
width: 200px;
max-height: 300px;
overflow: scroll;
margin-left: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 10px 10px;
box-sizing: border-box;
box-shadow: 0px 0px 10px gainsboro;
}
.box1::-webkit-scrollbar {
display: none;
}
.box1:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover1 {
width: 100%;
height: 40%;
}
.box2 {
display: inline-block;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid #ea1538;
width: 200px;
max-height: 300px;
overflow: scroll;
margin-left: 1%;
margin-top: 40px;
transition: ease 0.5s;
padding: 10px 10px;
box-sizing: border-box;
box-shadow: 0px 0px 10px gainsboro;
}
.box2::-webkit-scrollbar {
display: none;
}
.box2:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover2 {
width: 100%;
height: 40%;
}
<div class="box1">
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover1" />
<h3 class="desc1">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et iste ipsum harum beatae dolor fugit repudiandae a quaerat doloremque pariatur, suscipit molestias ipsa minus. Non explicabo quam quasi illo accusamus aliquid, reiciendis autem? Quas odio hic
pariatur necessitatibus nobis nisi fugiat ab voluptate. Perferendis maiores quisquam cumque quod aspernatur ipsa?
</h3>
</div>
<div class="box2">
<button type="button" id="box2btn" onclick="href='window.location.https://www.facebook.com'">
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover2" />
<h3>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi
natus quidem perferendis architecto sapiente, eius, praesentium, odio
illo provident quos nostrum quaerat! Placeat saepe, blanditiis id
assumenda ab autem in unde maxime alias, obcaecati distinctio expedita
veritatis deserunt atque exercitationem quasi dolorum eum quas. Voluptas
consequatur nisi sint porro quos?
</h3>
</div>
Here we go https://jsfiddle.net/byr0kqL5/
The simple function
function addNewDiv() {
const box1 = document.getElementById("box1-content") //find element with id `box1-content`
box1.classList.remove("display-none"); //make box 1 visible by `display-none` removal
}
but you need to add this style
.display-none {
display: none;
}
Your box 1 will be like this
<div class="box1 display-none" id="box1-content"></div>
Lastly, your box 2 needs to have onclick event
<div class="box2" onclick="addNewDiv()"></div>
Firstly add this attribute to Div2 :
onclick="showDiv()"
and add the id and class to Div1
id="div1"
class="hide"
JavaScript :
function showDiv() {
div1=document.getElementById("div1");
div1.classList.remove("hide");
}
CSS:
.hide{
display: none;
}
I have pieced together a portfolio website using several tutorials and I can't figure out why the hamburger menu is not visible as it downsizes. It works fine when I take out the main content in the HTML with the sections, but if there is any main content then the burger menu does not appear.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Portfolio</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<main>
<div class="about-area" id="about">
<div class="text-part">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="portfolio-area" id="portfolio">
<div class="text-part">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="contact-area" id="contact">
<div class="text-part">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
</main>
<script src="app.js"></script>
</body>
</html>
CSS:
* {
margin: 0px; /* Remove unwanted inherent sizing */
padding: 0px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav {
display: flex; /*icons are next to each other */
justify-content: space-around; /* */
align-items: center; /* Center items vertically */
min-height: 8vh;
background-color: #0e9763;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex; /* spreads out text */
justify-content: space-around; /* using flex adds more space around the items using width */
width: 30%;
}
.nav-links li {
list-style: none; /* Removes bullet points */
}
.nav-links a{
color: rgb(226, 226, 226);
text-decoration: none; /* Removes default link colors */
letter-spacing: 3px;
font-size: 14px;
}
.burger {
display: none; /* Hides the burger menu */
cursor: pointer;
}
.burger div { /*the details of the burger menu bars design */
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
/* Main Area Content */
.about-area, .portfolio-area, .contact-area {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
height: 700px;
}
.text-part {
width: 65%;
height: 80%;
}
h1 {
font-size: 50px;
font-family: 'Audiowide', cursive;
}
p {
font-size: 24px;
line-height: 50px;
}
.about-area {
background: #fefefe;
}
.portfolio-area {
background: #0e9763;
color: #fff;
}
.contact-area {
background: #fefefe;
}
html {
scroll-behavior: smooth;
}
a:hover {
color: #000;
}
/* Quick fix breakpoint between max size and hamburger menu trigger */
#media screen and (max-width:1024px){
.nav-links {
width: 60%;
}
}
#media screen and (max-width:768px){
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #0e9763;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%); /* Moves content off screen */
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%); /* When button is clicked the nav gets the transform */
}
/* Nav animation */
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
JS:
const navSlide = () => { //navSlide is = to an anonymous function
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click',() => { //on click run a function
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation){
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
//Invoke function
navSlide();
Here is a link to the codepen:
https://codepen.io/justadirtgrub/pen/NWGJrde
You need to add z-index css property to class .nav-active to show up in front of main content
const navSlide = () => {
//navSlide is = to an anonymous function
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener("click", () => {
//on click run a function
//Toggle Nav
nav.classList.toggle("nav-active");
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${
index / 7 + 0.5
}s`;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
};
//Invoke function
navSlide();
* {
margin: 0px; /* Remove unwanted inherent sizing */
padding: 0px;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
nav {
display: flex; /*icons are next to each other */
justify-content: space-around; /* */
align-items: center; /* Center items vertically */
min-height: 8vh;
background-color: #0e9763;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex; /* spreads out text */
justify-content: space-around; /* using flex adds more space around the items using width */
width: 30%;
}
.nav-links li {
list-style: none; /* Removes bullet points */
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none; /* Removes default link colors */
letter-spacing: 3px;
font-size: 14px;
}
.burger {
display: none; /* Hides the burger menu */
cursor: pointer;
}
.burger div {
/*the details of the burger menu bars design */
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
/* Main Area Content */
.about-area,
.portfolio-area,
.contact-area {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
height: 700px;
}
.text-part {
width: 65%;
height: 80%;
}
h1 {
font-size: 50px;
font-family: "Audiowide", cursive;
}
p {
font-size: 24px;
line-height: 50px;
}
.about-area {
background: #fefefe;
}
.portfolio-area {
background: #0e9763;
color: #fff;
}
.contact-area {
background: #fefefe;
}
html {
scroll-behavior: smooth;
}
a:hover {
color: #000;
}
/* Quick fix breakpoint between max size and hamburger menu trigger */
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #0e9763;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%); /* Moves content off screen */
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
z-index: 100; /* When button is clicked the nav gets the transform */
}
/* Nav animation */
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Portfolio</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<main>
<div class="about-area" id="about">
<div class="text-part">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="portfolio-area" id="portfolio">
<div class="text-part">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="contact-area" id="contact">
<div class="text-part">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
</main>
</body>
</html>
I have taken a horizontal scroll bar inside a div.
<div id="custom_scroll" style="width: 91%; overflow: auto; margin: 0 3%;">
<div id="custom_scroll_child" style="width: 100%">
</div>
</div>
I increase width of inner div#custom_scroll_child. But these scrollbar is not visible in mobile. So i want to include js library.
When i add any js library like mCustomScrollbar, It's scrollbar width and scroll left is not matching compared to default scroll bar.
So i want design of custom scrollbar. But want behaviour of native scrollbar.
So how can i achieve this? Please guide me.
try the following .
<style>
body {
margin: 0px;
padding: 0px;
color: black;
}
.custom_scroll {
width: 91%;
overflow: auto;
margin: 0 3%;
height: 200px;
border: 1px solid red;
}
.custom_scroll_child {width: 120%;}
/* Here you can easily customize it*/
body ::-webkit-scrollbar {-webkit-appearance: none;}
body ::-webkit-scrollbar:vertical {width: 12px;}
body ::-webkit-scrollbar:horizontal {height: 12px;}
body ::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
border: 2px solid #ff0;
}
body ::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #f0f;
}
</style>
<div class="custom_scroll">
<div class="custom_scroll_child">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At consectetur nam repudiandae odit illo minima dolorum nihil voluptatibus blanditiis recusandae culpa esse mollitia facere quasi, dignissimos, aperiam iure optio reiciendis?
</div>
</div>
here a jsfiddle
I'm pretty new to CSS and JavaScript and I was wondering if you could make a script that allows you to change what stylesheet the site uses.
Say: you had a green theme where everything is shades of green. What would you do so the user can change it to red with the press of a button?
Has anyone any idea how to do this?
You can set an Id to the link tag and switch the css at runtime.
HTML
<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />
JS
document.getElementById('buttonID').onclick = function () {
document.getElementById('theme_css').href = '../red.css';
};
Quick Demo:
$( "#datepicker" ).datepicker();
$('button').button().on('click', function () {
let linkHref = 'https://code.jquery.com/ui/1.11.4/themes/{THEME}/jquery-ui.css';
if ($('#swapTheme').prop('href').indexOf('pepper-grinder') >= 0) {
$('#swapTheme').prop('href', linkHref.replace('{THEME}', 'black-tie'));
} else {
$('#swapTheme').prop('href', linkHref.replace('{THEME}', 'pepper-grinder'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" id="swapTheme" rel="stylesheet">
<div id="datepicker"></div>
<button style="padding: 5px 15px;"> Switch Theme </button>
You could use CSS Variables (also known as Custom Properties) for such changes, given that they are supported by all modern browsers.
So, let's say you have a green/white theme, where green being the primary color, and white complementing it. The site might look like the following:
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
background-color: #ddd;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid green;
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: green;
height: 50px;
color: white;
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: green;
background-color: white;
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: green;
color: white;
}
.footer-note {
color: green;
background-color: white;
padding: 3px 0;
display: block;
}
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
So the first step to move to CSS Variables would be to refactor out the theme colors into variables --primary-color and --secondary-color. Here's how your stylesheet looks after the change.
You could begin by setting the default theme colors into the :root element style declaration:
:root {
--primary-color: green;
--secondary-color: white;
}
Then, you can replace all instances of hardcoded "green" in the stylesheet with a call to the primary color variable: var(--primary-color). So the styles for your logo might look like the following:
.header-logo {
...
background-color: var(--primary-color);
color: var(--secondary-color);
...
}
:root {
--primary-color: green;
--secondary-color: white;
}
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
background-color: #ddd;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid var(--primary-color);
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: var(--primary-color);
height: 50px;
color: var(--secondary-color);
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: var(--primary-color);
background-color: var(--secondary-color);
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.footer-note {
color: var(--primary-color);
background-color: var(--secondary-color);
padding: 3px 0;
display: block;
}
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
Now, if you intend to change the color from "green" to "red", all you need to do is change the value of --primary-color to "red". And, you can do that using Javascript!
With plain JS, you can set the color to red using:
document.body.style.setProperty("--primary-color", "red");
Or, with jQuery you could do:
$(document.body).css("--primary-color", "red");
$(document.body).css("--primary-color", "red");
:root {
--primary-color: green;
--secondary-color: white;
}
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
background-color: #ddd;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid var(--primary-color);
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: var(--primary-color);
height: 50px;
color: var(--secondary-color);
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: var(--primary-color);
background-color: var(--secondary-color);
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.footer-note {
color: var(--primary-color);
background-color: var(--secondary-color);
padding: 3px 0;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
I went one step further and created some buttons to show how you could allow the user to choose a set of theme colors - and change the values CSS Variables using jQuery.
Here's how the snippet below looks on Chrome 64 - in case you are still using a browser that doesn't support CSS Variables:
$(".header--theme-button").on("click", function() {
var primaryColor = $(this).css("--theme-primary");
var secondaryColor = $(this).css("--theme-secondary");
$(".header--theme-button").removeClass("active");
$(this).addClass("active");
$(document.body).css("--primary-color", primaryColor);
$(document.body).css("--secondary-color", secondaryColor);
});
:root {
--primary-color: orange;
--secondary-color: white;
--theme-primary: black;
--theme-secondary: white;
}
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid var(--primary-color);
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: var(--primary-color);
height: 50px;
color: var(--secondary-color);
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.header-settings {
float: right;
height: 50px;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: var(--primary-color);
background-color: var(--secondary-color);
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.footer-note {
color: var(--primary-color);
background-color: var(--secondary-color);
padding: 3px 0;
display: block;
}
.header--theme-button {
height: 30px;
width: 30px;
margin: 10px 5px 0 0;
display: inline-block;
border-top: 15px solid var(--theme-primary);
border-bottom: 15px solid var(--theme-secondary);
border-right: 0;
border-left: 0;
padding: 0;
box-shadow: 0 0 3px gray;
}
.header--theme-button:hover {
box-shadow: 2px 2px 2px gray;
}
.header--theme-button.active {
box-shadow: 3px 3px 3px gray;
}
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
<div class="header-settings">
<button type="button" class="header--theme-button active" style="--theme-primary:orange; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:#2196F3; --theme-secondary:#eee;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:purple; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:#F44336; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:green; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:#FFEB3B; --theme-secondary:#222;">
</button>
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Yes, you can change CSS with Javascript. See this tutorial for more info. It basically links multiple stylesheets like this:
<link rel="stylesheet" type="text/css" title="blue"
href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
href="http://example.com/css/pink.css">
And then uses Javascript to change it:
<form>
<input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue">
<input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink">
</form>
The switch_style() function is written in that tutorial.
You don't even need any Javascript:
input[type=radio][value=light]:checked ~ article {
color: #222;
background-color: #FFEEAA;
}
input[type=radio][value=dark]:checked ~ article {
color: #EEE;
background-color: grey;
}
<body>
<input type="radio" name="theme" value="light" checked="checked">Light<br>
<input type="radio" name="theme" value="dark">Dark<br>
<article>
<h1>My super page!</h1>
<p>
Quibusdam sit repudiandae consequuntur doloremque illum ut ex quo. Esse temporibus est id suscipit repellat. Distinctio voluptatem voluptates asperiores dolorem dolorem placeat corporis quae. Quaerat voluptatem magni dignissimos rerum distinctio odio id.
</p>
</article>
</body>
Or just put your theme css in a css file and pass it to the function, On page load the if (localStorage.getItem("theme") != "") checks if theme has been set.. Here you have an example:
if (localStorage.getItem("theme") != "") {
loadcssfile(localStorage.getItem("theme"));
}
function loadcssfile(filename) {
if (filename != "") {
localStorage.setItem("theme", filename);
}
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
<div onclick="loadcssfile('css/pink.css')" id="pink">
Pink
</div>
<div
onclick="loadcssfile('css/blue.css')" id="blue">
Blue
</div>