> For the complete documentation index, see [llms.txt](https://inkstellar.gitbook.io/ink-blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://inkstellar.gitbook.io/ink-blog/css-tutorials/css-flex-top-navbar.md).

# CSS Flex - Top Navbar

This is one of the most easiest way to style a top navbar and keep it sticky if thats what you want.

### HTML

Lets first come up with a html that is neat and has a good heirarchy.

```
 
  <div class="wrapper">
    <div class="menu vertical">
      <nav>
        <ul>
          <li><i data-feather="home"></i><a href=""> Home </a></li>
          <li><i data-feather="pie-chart"></i><a href=""> Analysis </a></li>
          <li class="has_menu"><i data-feather="box"></i><a href=""> Our Products </a><i data-feather="chevron-down"></i>
            <div class="sec_menu pushdown">
              <ul>
          <li><i data-feather="book"></i><a href=""> Code Library </a></li>
          <li><i data-feather="aperture"></i><a href=""> Palette Generator </a></li>
                 <li><i data-feather="edit"></i><a href=""> Image Editor </a></li>
                 <li><i data-feather="file"></i><a href=""> PDF Ready </a></li>
              </ul>
            </div>
          </li>
          <li><i data-feather="user"></i><a href=""> Clients </a>
          </li>
          <li><i data-feather="message-square"></i><a href=""> Contact </a></li>
        </ul>
      </nav>
    </div>
  </div>
 
```

Here I've use icons from[ Feather icons ](https://feathericons.com/)for making the menu look neat and simple.

### CSS

Then comes the styling and the easy part as well.

Flex offers us simple properties that could easily wide layouts with ease.

```
.menu{
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
ul{
  display:flex;
  align-items:stretch;
  margin:0;
}
li{
  list-style:none;
  display:flex;
  gap:10px;
  position:relative;
  height: 40px;
  align-items: center;
  padding:5px  20px;
}
a{
  text-decoration:none;
  color:lightslategray;
  line-height:1.5;
}
li svg{
  width:20px;
  stroke:lightslategray;
}
li:hover{
  background:#efefef;
}
li:hover>*{
  color: #333;
  stroke:#333;
}
.sec_menu{
  display:none;
  position:absolute;
  top:50px;
  background:#fff;
  padding:0px;
  left:0;
  right:0;
}
.sec_menu ul{
  padding:0;
}
.has_menu:hover .sec_menu{
  display:block;
}
.pushdown ul{
  flex-direction:column;
}
```

This will put items into place like magnet. There are no floating objects or use of absolute position.

On addition to that to make it responsive and quickly switch the UI of a top navbar to a side navbar without any query, all you need to do is add a couple of lines of media query and there you have a side bar.

```
@media screen and (max-width:768px){
  body{
    background:#333;
  }
  .wrapper{
    display:flex;
    align-items:stretch;
    height:100vh;
  }
  .menu{
    padding:50px 0;
    width:240px;
  }
  .menu ul{
    padding:0;
    flex-direction:column;
  }
  .has_menu .sec_menu{
    left:240px;
    right:-240px;
    top:0;
  }
  .arrow{
    transform:rotateZ(-90deg);
  }
}
```

Check this example out for yourself.

{% embed url="<https://codepen.io/Inkstellar/pen/rNGWxMd>" %}
Flex CSS Navbar
{% endembed %}

### Dropdown menu animation

Let's add some transition effect to the&#x20;


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://inkstellar.gitbook.io/ink-blog/css-tutorials/css-flex-top-navbar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.