The main purpose of creating a sidebar is for small screen devices such as tablets, mobile phones.
There is only one difference between side navigation bar and navigation bar, navigation bar is a large screen size device like laptop, computer and side navigation of small size devices. Then
How to create responsive side bar and top navbar in blogger ?
Here are the steps:
Step 1. Remove the default navbar blogger theme.
Go to your blogger admin dashboard >> Select "Layout" menu >> Select "edit" on navbar >> select "remove".
Step 2. Add new navbar.
Select "Theme" menu >> select down arrow beside "Customize" then select "Edit HTML". In the box press "CTRL + F" to search type "navbar" find next until you see code like below.
Change the code become :
and then "Save". Go to " Layout" menu again, in navbar select "Add Widget">> select "HTML/Javascript" . Leave the title blank. and copy html and css code below and paste to the widget content.
<div class="topnav-section2">
<div class="topnav-content">
<i class='bx bx-menu' id="btn1"></i>
<i class='bx bx-menu' id="btn2"></i>
<span class="text">Free Tutorial</span>
</div>
<div class="search-box">
<div class="link-ext">
<a href="https://www.youtube.com/channel/UC7_AI_-o0p4NfwZOMRAObeg" target="_blank" title="YouTube Channel" class="tooltip2"><i class='bx bxl-youtube'></i></a>
<a href="https://play.google.com/store/apps/dev?id=8375118122529425360" target="_blank" title="Play Store" class="tooltip2"><i class='bx bxl-play-store'></i></a>
<a href="#" title="Facebook" class="tooltip2"><i class='bx bxl-facebook-circle'></i></a>
</div>
<i class='bx bx-search'></i>
<div class="input-box">
<form id="searchthis" action="/search" style="DISPLAY: inline" method="get"><input id="search-box" name="q" size="25" /> <button id="search-btn" type="submit" > <i class='bx bx-search' id="btn-search2"></i></button></form>
</div>
</div>
</div>
<style>
.topnav-section2{
top:0;
display: flex;
background: #4E8508;
height: 60px;
position: fixed;
left: 0px;
z-index:999;
width: 100%;
transition: all 0.5s ease;
}
.topnav-content{
height: 100%;
display:flex;
left:0;
top:0;
width: 75%;
}
.topnav-content{
height: 60px;
align-items: center;
}
.topnav-content .bx-menu,
.topnav-content .text{
color: #fff;
font-size: 35px;
}
.topnav-content .bx-menu{
margin: 0 15px 0 5px;
cursor: pointer;
}
.topnav-content .text{
color:#fff;
font-size: 26px;
font-weight: 600;
}
.topnav-section2 .search-box{
float:right;
display:flex;
position: relative;
height: 100%;
width: 25%;
}
.topnav-section2 .search-box i{
position: relatif;
right: 25px;
height: 100%;
width: 10%;
line-height: 60px;
text-align: right;
font-size: 22px;
color: #fff;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.topnav-section2 .search-box .input-box{
position: absolute;
right: 10px;
top: 80px;
z-index: 100;
height: 40px;
width: 210px;
background: #3E8DA8;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: all 0.4s ease;
}
.topnav-section2.showInput .search-box .input-box{
top: 65px;
opacity: 1;
pointer-events: auto;
background: #3E6C03;
}
.search-box .input-box::before{
content: '';
position: absolute;
height: 20px;
width: 20px;
background: #3E6C03;
right: 15px;
top: 0px;
transform: rotate(45deg);
}
.search-box .input-box form{
display:flex;
position: absolute;
top:50%;
left: 50%;
border-radius: 4px;
transform: translate(-50%, -50%);
height: 35px;
width: 210px;
outline: none;
padding: 5px;
font-size: 16px;
border: none;
}
#search-btn {
position: absolute;
background: #3E6C03;
margin-left: 165px !important;
padding: 0;
margin: 0;
border: none !important;
font-size:12px;
top: 5px;
height: 25px;
width: 30px;
}
#search-box{
margin-left: 10px;
position: absolute;
top: 5px;
height: 25px;
width: 150px;
}
#btn-search2{
top:-20px;
left: 4px;
position: absolute;
color:#fff;
}
.link-ext {
position:relatif;
display:flex;
width:80%;
float:right;
text-align: right;
content: "";
clear: both;
}
.link-ext a{
position:relatif;
color:#fff !important;
line-height: 60px;
text-align: left !important;
width:33% !important;
float:right;
font-size:30px !important;
}
.tooltip2 {
display: inline;
position: relative;
}
.tooltip2:hover:after{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
background: #3E6C03;
border-radius: 0px 0px 4px 4px;
color: #fff;
content: attr(title);
margin: 0px 0px 0px -50px;
font-size: 12px;
line-height: 10px;
padding: 5px;
height:30px;
width: 150px;
}
.tooltip2:hover:before{
border: solid;
border-color: #3E6C03 transparent;
border-width: 0px 12px 6px 12px;
content: "";
left: 10px;
top: 54px;
position: absolute;
}
@media (max-width: 500px) {
.topnav-content .text {
font-size:18px;
}
.link-ext {
display:none;
}
}
</style>
Then save the widget.
Step 3. Add new Side Bar
In "Layout" menu select "Add Widget" at Navbar >> Select "HTML/Javascript >>Leave the title blank. and copy html and css code below and paste to the widget content.
<div class="sidebar2 close">
<div class="logo-details">
<i class='bx bxl-react'></i>
<span class="logo_name">Education</span>
</div>
<ul class="nav-links">
<li>
<a href="https://www.thrizthan.com">
<i class='bx bxs-home'></i>
<span class="link_name">Home</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="https://www.thrizthan.com">Home</a></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bxl-blogger'></i>
<span class="link_name">Adsense</span>
</a>
<i class='bx bxs-chevron-down arrow' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Adsense</a></li>
<li><a href="#">Web/Blog</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bxl-wordpress'></i>
<span class="link_name">Affliate</span>
</a>
<i class='bx bxs-chevron-down arrow' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Affliate</a></li>
<li><a href="#">Bluehost</a></li>
<li><a href="#">Exabytes</a></li>
<li><a href="#">Clickbank</a></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bxl-google'></i>
<span class="link_name">Freelance</span>
</a>
<i class='bx bxs-chevron-down arrow' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Freelance</a></li>
<li><a href="#">Fiver</a></li>
<li><a href="#">Freelancer</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-link-external'></i>
<span class="link_name">Posts</span>
</a>
<i class='bx bxs-chevron-down arrow' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Faforite Links</a></li>
<li><a href="https://nanomh.blogspot.com" target="_blank">Make Money</a></li>
<li><a href="nanokaryamandiri.com" target="_blank">PT. Nano Karya Mandiri</a></li>
<li><a href="https://play.google.com/store/apps/details?id=com.nano.rumuslengkaptrafotoroid" target="_blank">Play Store</a></li>
</ul>
</li>
<li>
<a href="https://www.thrizthan.com/p/about-me.html">
<i class='bx bxs-contact'></i>
<span class="link_name">About</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="https://www.thrizthan.com/p/about-me.html">About</a></li>
</ul>
</li>
<li>
<a href="https://www.thrizthan.com/p/contact-us.html">
<i class='bx bxs-chat'></i>
<span class="link_name">Contact Us</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="https://www.thrizthan.com/p/contact-us.html">Contact Us</a></li>
</ul>
</li>
<li>
<a href="https://www.thrizthan.com/p/site-map_8.html">
<i class='bx bx-sitemap'></i>
<span class="link_name">Site Map</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="https://www.thrizthan.com/p/site-map_8.html">Site Map</a></li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-history'></i>
<span class="link_name">History</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">History</a></li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-cog' ></i>
<span class="link_name">Setting</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Setting</a></li>
</ul>
</li>
<li>
<div class="profile-details">
<div class="profile-content">
<!--<img src="image/profile.jpg" alt="profileImg">-->
</div>
<div class="name-job">
<div class="profile_name">Thriztan CE</div>
<div class="job">Web Desginer</div>
</div>
<i class='bx bx-log-out' ></i>
</div>
</li>
</ul>
</div>
<style>
/* Google Fonts Import Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.sidebar2{
position: fixed;
top: 60px;
left: 0;
height: 100%;
width: 260px;
background: #4E8508;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar2.close{
width: 40px;
}
.sidebar2 .logo-details{
height: 60px;
width: 100%;
display: flex;
align-items: center;
}
.sidebar2 .logo-details i{
font-size: 30px;
color: #fff;
height: 50px;
min-width: 38px;
text-align: center;
line-height: 50px;
}
.sidebar2 .logo-details .logo_name{
font-size: 22px;
color: #fff;
font-weight: 600;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.sidebar2.close .logo-details .logo_name{
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.sidebar2 .nav-links{
border-top: solid 1px #fff;
height: 100%;
padding: 30px 0 150px 0;
overflow: auto;
}
.sidebar2.close .nav-links{
overflow: visible;
}
.sidebar2 .nav-links::-webkit-scrollbar{
display: none;
}
.sidebar2 .nav-links li{
position: relative;
list-style: none;
transition: all 0.4s ease;
}
.sidebar2 .nav-links li:hover{
background: #3E6C03;
}
.sidebar2 .nav-links li .iocn-link{
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar2.close .nav-links li .iocn-link{
display: block
}
.sidebar2 .nav-links li i{
height: 50px;
min-width: 38px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar2 .nav-links li.showMenu i.arrow{
transform: rotate(-180deg);
}
.sidebar2.close .nav-links i.arrow{
display: none;
}
.sidebar2 .nav-links li a{
display: flex;
height:40px;
align-items: center;
text-decoration: none;
}
.sidebar2 .nav-links li a .link_name{
font-size: 18px;
font-weight: 400;
color: #fff;
transition: all 0.4s ease;
}
.sidebar2.close .nav-links li a .link_name{
opacity: 0;
padding:0px;
margin:0px;
pointer-events: none;
}
.sidebar2 .nav-links li .sub-menu{
padding: 6px 6px 14px 40px;
margin-top: -10px;
background: #4E8508;
display: none;
}
.sidebar2 .nav-links li.showMenu .sub-menu{
display: block;
}
.sidebar2 .nav-links li .sub-menu a{
color: #fff;
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: all 0.3s ease;
}
.sidebar2 .nav-links li .sub-menu a:hover{
background: #4E8508;
opacity: 1;
}
.sidebar2 .nav-links li .sub-menu li {
padding:0px !important;
}
.sidebar2.close .nav-links li .sub-menu{
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 2px 30px 2px 10px;;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0.5s;
}
.sidebar2.close .nav-links li:hover .sub-menu{
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
.sidebar2 .nav-links li .sub-menu .link_name{
display: none;
}
.sidebar2.close .nav-links li .sub-menu .link_name{
font-size: 18px;
padding-top: 0px;
margin-bottom: 5px;
opacity: 1;
height:20px;
display: block;
}
.sidebar2 .nav-links li .sub-menu.blank{
opacity: 1;
pointer-events: auto;
padding: 0px 30px 0px 10px ;
opacity: 0;
pointer-events: none;
}
.sidebar2 .nav-links li:hover .sub-menu.blank{
top: 60%;
transform: translateY(-50%);
}
.sidebar2 .profile-details{
border-top: solid 1px #fff;
position: fixed;
bottom: 0;
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
background: #4E8508;
padding: 12px 0;
transition: all 0.5s ease;
}
.sidebar2.close .profile-details{
background: none;
}
.sidebar2.close .profile-details{
border-top:none;
}
.sidebar2 .profile-details .profile-content{
display: flex;
align-items: center;
}
.sidebar2 .profile-details img{
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: #1d1b31;
transition: all 0.5s ease;
}
.sidebar2.close .profile-details img{
padding: 10px;
}
.sidebar2 .profile-details .profile_name,
.sidebar2 .profile-details .job{
color: #fff;
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar2.close .profile-details i,
.sidebar2.close .profile-details .profile_name,
.sidebar2.close .profile-details .job{
display: none;
}
.sidebar2 .profile-details .job{
font-size: 12px;
}
.content-inner{
position: absolute;
left: 0px;
width: auto;
transition: all 0.5s ease;
}
.content-inner.open{
position: absolute;
left: 120px;
width: calc(100% - 120px);
transition: all 0.5s ease;
}
.sidebar2.close ~ .content-inner{
left: 260px;
width: calc(100%-260px);
}
#btn1 {
display: block;
}
#btn2 {
display: none;
}
@media (max-width: 1030px) {
.sidebar2.close .nav-links li .sub-menu{
display: block;
}
#btn2 {
display: block;
}
#btn1 {
display: none;
}
.sidebar2.close{
left: -100%;
}
.sidebar2.close.open{
left: 0;
transition: all 0.5s ease;
}
.sidebar2.close ~ .content{
left: 0px;
width: 100%;
}
.sidebar2.close.open ~ .content{
transition: all 0.5s ease;
left: 40px;
width: calc(100%-40px);
}
.content-inner{
width: 100%;
left: 0px;
transition: all 0.5s ease;
}
.content-inner.open{
left: 40px;
width: calc(100% - 40px);
transition: all 0.5s ease;
}
}
</style>
<script>
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener("click", (e)=>{
let arrowParent = e.target.parentElement.parentElement;//selecting main parent of arrow
arrowParent.classList.toggle("showMenu");
});
}
</script>
Step 4. Add Javascript for Top bar and Side bar
Go to "Theme" menu >> select down arrow beside "Customize" then select "Edit HTML". In the box press "CTRL + F" to search type "</body>" , copy javascript code below and paste before "</body>" tag.
<script>
function myFunction(x) {
if (x.matches) { // If media query matches
let sidebar2 = document.querySelector(".sidebar2");
let sidebarBtn = document.querySelector("#btn2");
let overlay = document.querySelector(".content");
let overlay3 = document.querySelector(".content-inner");
sidebar2.classList.add("close");
console.log("sidebarBtn1");
sidebarBtn.addEventListener("click", ()=>{
sidebar2.classList.toggle("open");
overlay3.classList.toggle("open");
overlay.addEventListener("click", ()=>{
sidebar2.classList.remove("open");
overlay3.classList.remove("open");
});
});
} else {
let sidebar2 = document.querySelector(".sidebar2");
let sidebarBtn = document.querySelector("#btn1");
let overlay2 = document.querySelector(".content");
let overlay3 = document.querySelector(".content-inner");
console.log("sidebarBtn2");
sidebarBtn.addEventListener("click", ()=>{
sidebar2.classList.toggle("close");
overlay3.classList.toggle("open");
overlay2.addEventListener("click", ()=>{
sidebar2.classList.add("close");
overlay3.classList.remove("open");
});
});
}
}
var x = window.matchMedia("(max-width: 1030px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction)
</script>
<script>
let topnav = document.querySelector(".topnav-section2");
let searchBox = document.querySelector(".search-box .bx-search");
// let searchBoxCancel = document.querySelector(".search-box .bx-x");
searchBox.addEventListener("click", ()=>{
topnav.classList.toggle("showInput");
if(topnav.classList.contains("showInput")){
searchBox.classList.replace("bx-search" ,"bx-x");
}else {
searchBox.classList.replace("bx-x" ,"bx-search");
}
});
</script>
Then Save the theme.
Step 5. Add library boxicon for topbar and side bar icon.
Go to "Theme" menu >> select down arrow beside "Customize" then select "Edit HTML". In the box press "CTRL + F" to search type "</head>" , copy html code below and paste before "</head>" tag.
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'/>
Then Save the theme. and then preview your blog layout.
You can customize yout blog layout by edit the css code in step 2 and step 3 above.
Okay, that's enough for now from me, if you have any questions, please comment in the comments column. If something goes wrong I apologize. Hopefully helpful, and thank you.
"Look for someone who is willing to accept your situation, your family and your job. In fact, happiness is about being together and being grateful."
Reference:
https://www.codinglabweb.com