How To Create A Fixed Menu Bar Using HTML CSS

196 Views

We know the importance of menu bar. People always keep their important links on menu bar. That is why whenever a user needs anything he can find it easily from menu bar.

Hi guys welcome back to anupdebnath.info. In this article i am going to show you how to create a fixed menu bar using html and css. Before going to start let’s check the preview of this.

How To Create A Fixed Menu Bar Using HTML CSS
How To Create A Fixed Menu Bar Using HTML CSS

How To Create A Fixed Menu Bar Using HTML CSS

Apply HTML Code

Let’s create the basic html structure for this.

<!DOCTYPE html>
<html>
<head>
  <title>Create A Fixed Top Menu Using HTML &amp; CSS</title>
</head>
<body>

</body>
</html>

Now, add nav code inside body tag.

<!DOCTYPE html>
<html>
<head>
  <title>Create A Fixed Top Menu Using HTML &amp; CSS</title>
</head>
<body>
  <nav>
    <a href="">Home</a>
    <a href="">Blog</a>
    <a href="">Portfolio</a>
    <a href="">About</a>
    <a href="">Contact</a>
  </nav>
</body>
</html>

That’s all done. We have completed making of HTML structure.

Apply CSS Code

This is a simple trick. Do not laugh seeing css codes. :p

nav{
      padding: 18px;
      background-color: #000;
      width: 100%;
      position: fixed;
      overflow: hidden;
      left: 0;
      top: 0;
    }

I have added anchor tags inside nav tag. Just need to apply css for this.

nav>a{
      padding: 15px;
      text-decoration: none;
      color: #fff;
      font-size: 17px;
    }
    nav>a:hover{
      background-color: #ddd;
    }

That’s nice.

Anup Deb Nath Rinku

I am a zero starter. Nothing to say right now, just wait and see. i will come like a thunder.

View all posts by Anup Deb Nath Rinku →

Share Your Opinion With Me

%d bloggers like this: