Responsive header

Developer
Size
6,531 Kb
Views
54,648

How do I make an responsive header?

You can change header style or position by uncommenting certain parts of CSS code. What is a responsive header? How do you make a responsive header? This script and codes were developed by Ivan Sakoman on 12 June 2022, Sunday.

Responsive header Previews

Responsive header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive header</title> <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header"> <div class="top"> <svg class="logo" width="172px" height="55px" viewBox="0 0 172 55" fill="#fff">	<text x="5px" y="35px">Logo</text> </svg> <div class="right-wrapper"> <div class="app-name-wrapper"> <svg class="app-icon" width="17px" height="17px" viewBox="0 0 18 18" fill="#fff"> <path d="M9,18c5,0,9-4,9-9s-4-9-9-9S0,4,0,9S4,18,9,18z M14.8,9.8c-0.1,0.1-0.3,0.2-0.5,0.2s-0.4-0.1-0.5-0.2l-0.2-0.2v3.7h-3V9.5h-3v3.8h-3V9.6L4.3,9.8c-0.3,0.3-0.8,0.3-1.1,0s-0.3-0.8,0-1.1L9,3l5.8,5.8C15.1,9.1,15.1,9.5,14.8,9.8z"/> </svg> <span class="app-name">home</span> </div> <div class="profile-pic"> <div class="picture"></div> <div class="profile-name"> Ivan Sakoman </div> </div> <svg class="app-menu" width="16px" height="16px" viewBox="0 0 26.75 26.75" fill="#fff"> <circle cx="3.25" cy="3.25" r="3.25"/> <circle cx="13.38" cy="3.25" r="3.25"/> <circle cx="23.5" cy="3.25" r="3.25"/> <circle cx="3.25" cy="13.38" r="3.25"/> <circle cx="13.38" cy="13.38" r="3.25"/> <circle cx="23.5" cy="13.38" r="3.25"/> <circle cx="3.25" cy="23.5" r="3.25"/> <circle cx="13.38" cy="23.5" r="3.25"/> <circle cx="23.5" cy="23.5" r="3.25"/> </svg> </div> </div> <div class="navbar"> <div class="navbar-item-wrapper"> <a class="navbar-item active" href="#">LINK</a> <a class="navbar-item" href="#">LINK2</a> </div> <svg class="hamburger-menu" width="28px" height="15px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 15"> <line x1="1.5" y1="1.5" x2="26.5" y2="1.5"/> <line x1="1.5" y1="7.5" x2="26.5" y2="7.5"/> <line x1="1.5" y1="13.5" x2="26.5" y2="13.5"/> </svg> <div class="search-wrapper"> <input class="search-input" placeholder="SEARCH" type="text" /> <svg width="13px" height="13px" class="search-icon" viewBox="0 0 13 13">
  <path fill="#999999" d="M12,13a1,1,0,0,1-.7-.3L8.62,10A5.5,5.5,0,1,1,10,8.62l2.68,2.68A1,1,0,0,1,12,13ZM5.5,2A3.5,3.5,0,1,0,9,5.5,3.5,3.5,0,0,0,5.5,2Z"/> </svg> </div> <div class="sidebar"> <svg class="close-sidebar hamburger-menu" width="27px" height="18px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.98 18.38"> <line class="cls-1" x1="26.23" y1="9.19" x2="0.75" y2="9.19"/> <line class="cls-1" x1="11.37" y1="0.75" x2="0.75" y2="9.19"/> <line class="cls-1" x1="11.37" y1="17.63" x2="0.75" y2="9.19"/> </svg> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive header - Script Codes CSS Codes

body { margin: 0; font-family: 'Lato', sans-serif; height: 5000px;
}
.header { position: relative; transition: all .3s ease;
}
.header .top { background-image: radial-gradient(circle at 50% 50%, #ca2f33, #772b2a); height: 140px; transition: all .3s ease;
}
.header .top.scrolled { height: 55px;
}
.header .top.scrolled .logo { margin: 0 5%; width: 80px;
}
.header .top.scrolled .right-wrapper { margin: 8px 5% 0 5%;
}
.header .top .logo { margin: 42.5px 5%; margin-right: 0; transition: all .3s ease;
}
.header .top .right-wrapper { height: 40px; float: right; margin: 50px 5%; transition: all .3s ease;
}
.header .top .right-wrapper .app-name-wrapper { display: inline-block; vertical-align: top; height: 40px;
}
.header .top .right-wrapper .app-name-wrapper .app-icon { margin: 11.5px 8px 11.5px 0;
}
.header .top .right-wrapper .app-name-wrapper .app-name { display: inline-block; vertical-align: top; font-size: 14px; color: #fff; margin: 11.5px 0; letter-spacing: 1.5px; text-transform: uppercase;
}
.header .top .right-wrapper .profile-pic { width: 40px; height: 40px; position: relative; display: inline-block; margin: 0 32px;
}
.header .top .right-wrapper .profile-pic .picture { width: 40px; height: 40px; position: relative; display: inline-block; border-radius: 20px; overflow: hidden; background-color: #fff;
}
.header .top .right-wrapper .profile-pic .picture:hover + .profile-name { opacity: 1; transform: translate(0, 0);
}
.header .top .right-wrapper .profile-pic .profile-name { -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; opacity: 0; transform: translate(0, -15px); background-color: white; position: absolute; top: 50px; right: 0; text-align: right; white-space: nowrap; padding: 10px 20px 10px 20px; border-radius: 15px;
}
.header .top .right-wrapper .profile-pic .profile-name::after { content: ""; width: 10px; height: 10px; background-color: white; position: absolute; top: -5px; right: 15px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.header .top .right-wrapper .app-menu { vertical-align: top; margin: 12px 0; cursor: pointer;
}
.header .navbar { background-color: #e1e1e1; position: relative; width: 100%; height: 70px; white-space: nowrap; overflow: hidden;
}
.header .navbar .navbar-item { display: inline-block; font-size: 14px; padding: 26.5px 27px; color: #a7a7a7; text-decoration: none; letter-spacing: 1.5px; text-transform: uppercase;
}
.header .navbar .navbar-item:hover { color: #3e3e3e;
}
.header .navbar .navbar-item:first-child { padding-left: calc(5% + 5px);
}
.header .navbar .navbar-item.active { color: #333;
}
.header .navbar .hamburger-menu { display: none; margin-top: 28px; margin-left: calc(5% + 5px); cursor: pointer;
}
.header .navbar .hamburger-menu:hover line { stroke: #333;
}
.header .navbar .hamburger-menu line { fill: none; stroke: #7d7d7d; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 1.5px;
}
.header .navbar .search-wrapper { position: absolute; top: 0; right: calc(5% - 20px); padding: 16px 20px;
}
.header .navbar .search-wrapper .search-input { font-family: 'Lato', sans-serif; border: none; background-color: #eeeeee; color: #3e3e3e; height: 18px; width: 280px; border-radius: 30px; padding: 10px 18px 10px 18px; font-size: 14px; transition: width .3s ease;
}
.header .navbar .search-wrapper .search-input:focus { outline: none; background-color: #fff;
}
.header .navbar .search-wrapper .search-input::-webkit-input-placeholder { letter-spacing: 1.5px;
}
.header .navbar .search-wrapper .search-input::-moz-placeholder { letter-spacing: 1.5px;
}
.header .navbar .search-wrapper .search-input:-ms-input-placeholder { letter-spacing: 1.5px;
}
.header .navbar .search-wrapper .search-icon { position: absolute; top: 28px; right: calc(5% + 18px); cursor: pointer;
}
.header .navbar .sidebar { position: fixed; top: 0; bottom: 0; left: -300px; width: 300px; background-color: white; transition: all .3s ease;
}
.header .navbar .sidebar.active { left: 0; box-shadow: -11px 0 20px 10px gray;
}
.header .navbar .sidebar .hamburger-menu { position: absolute; left: 250px; top: 25px; display: block; cursor: pointer;
}
.header .navbar .sidebar .hamburger-menu line { fill: none; stroke: #3e3e3e; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 3px;
}
.header .navbar.first-breakpoint .search-input { width: 0px; height: 18px; transition: width .3s ease;
}
.header .navbar.first-breakpoint .search-input:focus { width: 280px;
}
.header .navbar.first-breakpoint .search-input::-webkit-input-placeholder { visibility: hidden;
}
.header .navbar.first-breakpoint .search-icon { right: calc(5% + 28px);
}
.header .navbar.second-breakpoint .hamburger-menu { display: block;
}
.header .navbar.second-breakpoint .navbar-item-wrapper { position: fixed; left: -300px; top: 50px; transition: all .3s ease;
}
.header .navbar.second-breakpoint .navbar-item-wrapper.active { left: 0; z-index: 10;
}
.header .navbar.second-breakpoint .navbar-item-wrapper .navbar-item { display: block; padding: 10px 25px;
}
.header .navbar.second-breakpoint .sidebar .close-sidebar.hamburger-menu { position: absolute; top: 20px; left: 250px; margin: 0; opacity: 0.6;
}
.header .navbar.second-breakpoint .sidebar .close-sidebar.hamburger-menu:hover { opacity: 1;
}
.header .navbar.second-breakpoint .sidebar .close-sidebar.hamburger-menu line { fill: none; stroke: #333; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 1.5px;
}
@media only screen and (max-width: 600px) { .header .top { overflow: auto; background-image: radial-gradient(circle at 50% 50%, #ca2f33, #772b2a); height: 70px; } .header .top.scrolled .logo { margin: 0 auto; } .header .top .logo { display: block; margin: 7px 25px; width: 110px; float: left; } .header .top .right-wrapper { margin: 15px 5%; } .header .top .right-wrapper .app-name-wrapper, .header .top .right-wrapper .profile-pic { display: none; } .header .navbar { height: 50px; overflow: hidden; } .header .navbar .hamburger-menu { margin-top: 18px; } .header .navbar .search-wrapper { padding: 6px 16px; } .header .navbar .search-wrapper .search-icon { top: 19px; right: calc(5% + 24px); } .header .navbar .navbar-item { padding: 16.5px 27px; }
}

Responsive header - Script Codes JS Codes

$(document).ready(function(){ //collapse header after scroll from top script (only for fixed header, you can change that in css (.header -> position: fixed; )) $(window).scroll(function(){ var scroll = $(this).scrollTop(); if(scroll > 1){ //$('.top').addClass('scrolled'); }else{ //$('.top').removeClass('scrolled'); } }) var suma = 0; //2. način racunanja širine svih itema u navbaru $(".navbar-item").each(function(index, value){ var bcr = value.getBoundingClientRect(); suma = suma + bcr.width; }); //2. način console.log(suma); //dio koda koji otvara sidebar (TO DO!) $('.hamburger-menu').click(function(){ $('.sidebar').toggleClass('active'); $('.navbar-item-wrapper').toggleClass('active'); }) //stavlja focus na search input na klik povečala $('.search-icon').click(function(){ $('.search-input').focus(); }); function responsiveNavbar(){ //0.9 je 90% zbog margina s lijeve i desne strane //356 je širina .search-wrappera, 76 je širina collapsaong .search-wrappera //širina diva ispod linkova bez search wrappera i margina 5% sa svake strane var a = $(window).width() * 0.9 - 356; //širina diva ispod linkova bez collapsanog search wrappera i margina 5% sa svake strane var b = $(window).width() * 0.9 - 76 // console.log(sum); //logika za okidanje breakpointa //prvi brakepoing smanji search-wrapper if(a < suma) { //drugi breakpoint sakrije linkove if(b < suma) { $('.navbar').addClass('second-breakpoint'); } else{ $('.navbar').removeClass('second-breakpoint'); $('.sidebar').removeClass('active'); $('.navbar-item-wrapper').removeClass('active'); } $('.navbar').addClass('first-breakpoint'); } else { $('.navbar').removeClass('first-breakpoint'); } }; // na kraju koda pozovem funkciju zbog slučaja ako se header otvori u granicama prvog breakpointa, inace search-wrapper ne zna koliko su linkovi široki responsiveNavbar() //funkcija se okida na svaku promjenu širine windowa $(window).on('resize', function(){ responsiveNavbar() });
});
Responsive header - Script Codes
Responsive header - Script Codes
Home Page Home
Developer Ivan Sakoman
Username ssaakkaa
Uploaded June 12, 2022
Rating 3
Size 6,531 Kb
Views 54,648
Do you need developer help for Responsive header?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ivan Sakoman (ssaakkaa) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!