> For the complete documentation index, see [llms.txt](https://howto.atharvgyan.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://howto.atharvgyan.com/how-to-make-a-top-navigation-menu-with-css-and-javascript.md).

# How to make a top navigation menu with CSS and JavaScript

<mark style="color:red;">**CSS for styling**</mark>

```css
<!-- CSS for styling -->

<style>
.topnav {
  overflow: hidden;
  background-color: #333;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* Additional CSS for responsiveness */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
</style>
```

<mark style="color:red;">**JavaScript for functionality**</mark>

```javascript
<!-- JavaScript for functionality -->
<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

```