How to make Navbar with HTML and CSS?

Now we start documentation of HTML and CSS for Navbar 1. Its simple and easy. Lets begin documentation.

Documentation of Navbar 1

First of all you should be open your favorite editor. You should be create file on your destination folder. In this file, You should be create index.html and style.css

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <title> navbar</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
       <header>
           <a class="brand" href="#">BRAND</a>
           <ul class="nav_links">
               <li><a href="#">Home</a></li>
               <li><a href="#">Services</a></li>
               <li><a href="#">About Us</a></li>
           </ul>
           <a href="#"> <button>Contact</button>
           </a>
       </header>
    </body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Raleway:wght@300;400&display=swap');
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-color: #24252a;
}
li,a,button{
    font-family: raleway;
    font-weight: 500;
    font-size: 16px;
    color: #edf0f1;
    text-decoration: none;
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
}

.brand{
    font-size: 22px !important;
    cursor: pointer;
}
.nav_links{
    list-style: none;
}
.nav_links li{
    display: inline-block;
    padding: 0 20px;
}

.nav_links li a{
    transition: all 0.3s ease 0s;
}
.nav_links li a:hover{
    color: #0088a9;
}
button{
    padding: 9px 25px;
    background: rgba(0, 136,169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}
button:hover{
    background: rgba(0, 100,169, 1);
}




Documentation of Navbar 2

There are not many changes in the above code. All you have to do is change the style of the header. In that you have to flex end by changing the display property. In the brand class, the margin-right property has to be set to auto and the button style has to be changed a bit. His margin-left is 20px and Navbar 2 is ready to be made. You refresh your browser.

index.html

This index.html same as the navbar 1. Here don’t need to change code of html in this file. Change in only styling file of css.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <title> navbar</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
       <header>
           <a class="brand" href="#">BRAND</a>
           <ul class="nav_links">
               <li><a href="#">Home</a></li>
               <li><a href="#">Services</a></li>     //same as navbar 1
               <li><a href="#">About Us</a></li>
           </ul>
           <a href="#"> <button>Contact</button>
           </a>
       </header>
    </body>
</html>

style.css

Few Changes :



header{
    display: flex;
    justify-content: flex-end;         //justify-content property change into flex end.
    align-items: center;
    padding: 30px 10%;
}





.brand{
    font-size: 22px !important;
    cursor: pointer;
    margin-right: auto;                // give margin-right:auto in brand class
}

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Raleway:wght@300;400&display=swap');
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-color: #24252a;
}
li,a,button{
    font-family: raleway;
    font-weight: 500;
    font-size: 16px;
    color: #edf0f1;
    text-decoration: none;
}
header{
    display: flex;
    justify-content: flex-end;         //justify-content property change into flex end.
    align-items: center;
    padding: 30px 10%;
}

.brand{
    font-size: 22px !important;
    cursor: pointer;
    margin-right: auto;                // give margin-right:auto in brand class
}
.nav_links{
    list-style: none;
}
.nav_links li{
    display: inline-block;
    padding: 0 20px;
}

.nav_links li a{
    transition: all 0.3s ease 0s;
}
.nav_links li a:hover{
    color: #0088a9;
}
button{
    margin-left: 20px;
    padding: 9px 25px;
    background: rgba(0, 136,169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}
button:hover{
    background: rgba(0, 100,169, 1);
}


Documentation of Navbar 3

index.html

There is no change in navbar 3. It is same as navbar 1 index.html file. You can copy the code of index.html file of navbar1 and paste it on your editor.

style.css

There is minor change in CSS. Here is the change below in styling file.

.brand{
    font-size: 22px !important;
    cursor: pointer;
    order: 3;
    margin-left: auto;
}

.nav_links{
    list-style: none;
    order: 2;
}
.btn{
    order: 2;
}
.nav_links li{
    display: inline-block;
    padding: 0 20px;
}
.nav_links li:nth-child(1){
   
    padding: 0 20px 0 0;
}

41 thoughts on “How to make Navbar with HTML and CSS?”

  1. I’m pretty pleased to find this site. I want to
    to thank you for ones time for this particularly fantastic read!!
    I definitely savored every part of it and i also have you
    bookmarked to see new stuff in your web site.

  2. Wonderful goods from you, man. I’ve understand your stuff
    previous to and you are just too great. I actually like what you’ve acquired here, certainly like
    what you’re stating and the way in which
    you say it. You make it enjoyable and you still care for to keep it sensible.
    I cant wait to read far more from you. This is actually a
    terrific web site.

  3. Hello, I do believe your site may be having web browser
    compatibility issues. Whenever I take a look at your web
    site in Safari, it looks fine but when opening in I.E., it has some overlapping issues.
    I merely wanted to provide you with a quick heads up!
    Besides that, wonderful site!

  4. Hey there! Someone in my Myspace group shared this site with us so I came to take a
    look. I’m definitely enjoying the information. I’m book-marking
    and will be tweeting this to my followers!
    Fantastic blog and brilliant design and style.

  5. Hello There. I found your blog using msn. This is an extremely well written article.

    I’ll make sure to bookmark it and come back to
    read more of your useful information. Thanks for the post.
    I’ll certainly comeback.

  6. hello there and thank you for your info – I’ve definitely picked
    up anything new from right here. I did however expertise several technical points using this
    site, since I experienced to reload the website many times
    previous to I could get it to load properly. I had been wondering if
    your web hosting is OK? Not that I’m complaining, but
    sluggish loading instances times will often affect your
    placement in google and can damage your quality score if advertising and marketing with Adwords.
    Well I am adding this RSS to my email and could look
    out for much more of your respective fascinating content.
    Ensure that you update this again very soon.

  7. I must thank you for the efforts you have put in penning this blog.
    I’m hoping to see the same high-grade content by you later on as well.
    In truth, your creative writing abilities has inspired me to get my
    very own blog now 😉

  8. Hello I am so thrilled I found your web site, I really found you by accident, while I was looking on Yahoo for something else,
    Regardless I am here now and would just like to say thank you for a
    marvelous post and a all round interesting blog (I also love the
    theme/design), I don’t have time to read through it all at the minute but I have bookmarked it and also added in your RSS feeds, so
    when I have time I will be back to read a great deal more, Please do
    keep up the awesome work.

  9. I was curious if you ever thought of changing the page layout of
    your website? Its very well written; I love what youve got
    to say. But maybe you could a little more in the way of content so people could connect with it better.
    Youve got an awful lot of text for only having 1 or two pictures.

    Maybe you could space it out better?

  10. Hey there just wanted to give you a brief heads up and let you know a few of the images aren’t loading correctly.
    I’m not sure why but I think its a linking issue.
    I’ve tried it in two different internet browsers and
    both show the same results.

  11. I blog quite often and I seriously thank you for your content.
    This great article has really peaked my interest.
    I will bookmark your blog and keep checking for new details about once a week.
    I subscribed to your RSS feed as well.

  12. The other day, while I was at work, my sister stole my iPad and tested to see
    if it can survive a 30 foot drop, just so she can be a youtube sensation. My iPad is now destroyed and she has
    83 views. I know this is completely off topic but I had to share it with someone!

  13. Right here is the perfect blog for anyone who would like
    to find out about this topic. You know so much its almost tough to argue with you (not that I personally would want to…HaHa).
    You definitely put a new spin on a subject that’s been discussed for ages.
    Great stuff, just great!

  14. Its like you read my mind! You appear to know a lot
    about this, like you wrote the book in it or something.

    I think that you could do with some pics to drive the message home a bit, but other than that, this is fantastic blog.
    An excellent read. I’ll definitely be back.

Leave a Comment

Your email address will not be published. Required fields are marked *