The navigation bar is a user interface element within a webpage that contains links to other sections of the webpage. This means that no matter what page you are viewing, you can use the navigation bar to visit other sections of the website.
In this blog (Responsive Navigation Bar with logo), there is a logo at the top left of the webpage and some of the navigation bars are on the top of the webpage. There is some text on the center of the webpage, with some running text, below this there is a button named visit blog. The navigation bar is on the top of the webpage, which redirects the page to the other webpage.
This page is made responsive by using the media query property. On the larger screen, the navigation bar is arranged horizontally on the top of the webpage, which redirects the page to the other webpage. On the smaller screen, hyperlinks exist at the top right of the webpage. By clicking the hyperlinks, the navigation bars are arranged vertically on the webpage.
The source code of this Responsive Navigation Bar with logo is given below, if you want the source code of this program, you can copy it. You can use this Responsive Navigation Bar with logo with your creativity and can take this project to the next level.
Responsive Navigation Bar with logo [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
min-width: 100%;
overflow-x: hidden;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
}
header .navigation {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
min-height: 12vh;
min-width: 100%;
z-index: 10;
background: #0f1423;
border-bottom: 2px solid #0c2d48;
}
header .navigation .logo{
margin-left: 20px;
}
header .navigation .logo h1{
color: #3498db;
font-size: 30px;
line-height: 38px;
}
header .navigation .menu-list {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
width: 45%;
margin: auto 20px auto 0;
}
header .navigation .humbarger {
margin-right: 20px;
display: none;
}
header .navigation .humbarger .bar{
width: 30px;
height: 2px;
margin: 7px;
background: #b1d4e0;
}
header .navigation .menu-list li a {
color: #0575E6;
font-size: 1.25rem;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
transition: color 1s ease, border 1s ease;
text-decoration: none;
}
/* ====================
Intro Section
=======================*/
.intro-section {
height: 100vh;
position: relative;
background: #0575E6;
background: -webkit-linear-gradient(to right, #021B79, #0575E6);
background: linear-gradient(to right, #021B79, #0575E6);
}
.intro-section .intro-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.intro-section .intro-content h1 {
color: #000;
font-size: 5rem;
letter-spacing: -1px;
text-transform: uppercase;
margin-top: 80px;
}
.intro-section .intro-content h6{
margin-top: 5px;
color: #000;
font-size: 2.5rem;
font-weight: 300;
}
.intro-section .intro-content p {
margin-top: 40px;
color: #fff;
}
.intro-content .tagline {
margin-top:80px;
}
.intro-section .intro-content .tagline .change-container{
position: relative;
display: inline-block;
width: 560px;
margin-bottom: 55px;
margin-top: 30px;
}
.intro-section .intro-content .changing {
position: absolute;
overflow: hidden;
width: 100%;
left:0;
bottom:0;
height:0;
opacity:0;
color: #fff;
text-transform: uppercase;
word-spacing: 5px;
text-align: center;
font-size: 2.5rem;
}
.changing:nth-child(1) {
animation: revealNextWord 6s cubic-bezier(0.57, 1.52, 0.9, 1.08) 1.5s infinite;
}
.changing:nth-child(2) {
animation: revealNextWord 6s cubic-bezier(0.57, 1.52, 0.9, 1.08) 3s infinite;
}
.changing:nth-child(3) {
animation: revealNextWord 6s cubic-bezier(0.57, 1.52, 0.9, 1.08) 4.5s infinite;
}
@keyframes revealNextWord {
0% {
opacity: 0.3;
height: 0.0;
}
10% {
opacity: 1;
height:1.2em;
}
20% {
opacity: 1;
height:1.2em;
}
28% {
opacity: 0;
height:2em;
}
}
.intro-section .intro-content .header-btn a{
text-decoration: none;
font-size: 1.5rem;
color: #000;
background-color: #3498db;
padding: 15px;
border-radius: 20px;
display: inline-block;
position: relative;
overflow: hidden;
text-transform: uppercase;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.intro-section .intro-content .header-btn a:before{
position: absolute;
content: "";
top: 0px;
height: 100%;
left: -25%;
width: 0%;
background-color: #021B79;
transform: skew(50deg);
transition-duration: 1s;
z-index: 1;
}
.intro-section .intro-content .header-btn a:hover{
color: #fff;
}
.intro-section .intro-content .header-btn a:hover:before{
width: 170%;
}
.intro-section .intro-content .header-btn a span{
position: relative;
z-index: 9;
}
/* ====================
Responsive Section
=======================*/
/* Tablet desktop :768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
header .navigation .menu-list {
width: 60%;
}
header .navigation .menu-list li a{
font-size: 1rem;
}
}
/* Large Mobile :480px. */
@media only screen and (max-width: 767px) {
header .navigation .menu-list {
position: absolute;
top: 12vh;
min-width: 100%;
background: rgba(15, 20, 35, 0.99);
text-align: center;
display: none;
}
header .navigation .menu-list li {
display: block;
}
header .navigation .menu-list li a {
display: block;
padding: 20px;
transition: color 1s ease, padding 1s ease, background-color 1s ease;
}
header .navigation .menu-list li a:hover{
color: #b1d4e0;
padding-left: 30px;
background: rgba(177, 212, 224, 0.2);
}
header .navigation .humbarger{
display: block;
}
.intro-section .intro-content h1 {
font-size: 2.8rem;
}
.intro-section .intro-content h6 {
font-size: 1.4rem;
}
.intro-section .intro-content .changing {
font-size: 1.5rem;
}
.intro-section .intro-content .header-btn a{
font-size: 1.25rem;
}
}
/* small mobile :320px. */
@media only screen and (max-width: 479px) {
.intro-inner .intro-content h1 {
font-size: 2rem;
letter-spacing: 1px;
}
.intro-inner .intro-content p {
margin-top: 10px;
}
}
$(document).ready(function(){
$('.humbarger').click(function(event){
$('.menu-list').slideToggle(500);
event.preventDefault();
$('.menu-list li a').click(function(event) {
if ($(window).width() < 768) {
$('.menu-list').slideUp(500);
event.preventDefault();
}
});
});
});
Thank you for reading our blog. If you face any problem in creating this Responsive Navigation Bar with a logo using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team