Hello developers, today in this blog you'll learn how to make a Responsive Navigation Menu Bar using HTML & CSS.
The Menu Bar or Navigation Bar (Navbar) is
vital for any kind of website. Many websites have a responsive navbar. The
Navigation menu will be a horizontal bar where the logo and a few hyperlinks
exist. The navigation bar aims to directly redirect into the particular page by
clicking on the hyperlinks as you need. The navigation bar should perfectly
fit all screen devices.
On the top side, there is one horizontal bar,
where you'll be able to see the logo and a few hyperlinks. On the right side,
there is a logo, and on the left side of the logo, there are some hyperlinks.
When you see this web page in mobile view, the top side horizontal hyperlink bar will come to the bottom side whereas the
logo occupies the top side full width of the mobile screen.
The source code for making the Responsive
Navigation Menu Bar is given below, if you want the source code of this program, you can copy it. You can use
this Responsive Navigation Menu Bar with your creativity and can take this to
the next level.
Responsive
Navigation Menu Bar [Source Code]
To make this website, you need to create two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you've to create a file with a .html extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Montserrat', sans-serif;
}
body {
width: 100%;
min-height: 100vh;
background: #00C9A7;
}
.container {
max-width: 1200px;
height: 100%;
margin: 0 auto;
position: relative;
}
nav.large {
width: 100%;
height: 60px;
background: #12192c;
border-radius:0 0 40px 40px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.logo{
color: #fff;
font-size: 1em;
text-align: center;
}
nav.mobile {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background: #12192c;
padding: 0 30px;
border-radius:40px 40px 0 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
ul {
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
width: 100%;}
li {
display: flex;
flex-direction: column;
align-items: center;
font-size: .7rem;}
a {
color: #fff;
font-size:1.2rem;
text-decoration: none;
cursor: pointer;
}
span {
color: #fff;
font-size: inherit;
}
@media (max-width: 772px){
nav.mobile{
display: block;
}
ul.top {
display: none;
}
}
main {
height: calc(100vh - 70px);
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
h1 {
font-size: 3rem;
text-align: center;
}
In the Mobile view of this page, you can see
icons with the hyperlinks provided.
We hope you would like this Responsive Navigation Menu Bar using HTML & CSS.
Thank you for reading our blog. If you face any problem in creating this Responsive Navigation Menu Bar using HTML & CSS, 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