# How do I make navigation links responsive?

To make navigation links responsive, you can use CSS media queries along with JavaScript. In the provided example, the navigation links become responsive by hiding all links except the first one and displaying a menu icon (hamburger menu) when the screen width is 600px or less. Clicking the menu icon toggles the visibility of the links. Here's a brief overview of how it's done:

CSS Media Queries: The example uses CSS media queries to apply different styles based on the screen width. When the screen width is 600px or less, it hides all navigation links except the first one and shows a menu icon.

```css
@media screen and (max-width: 600px)
 { .topnav a:not(:first-child)
  {display: none;} 
.topnav a.icon
 { float: right; display: block; } }
```

 JavaScript Function: A JavaScript function myFunction() toggles the navigation links' visibility when the menu icon is clicked. It changes the class of the navigation bar to "topnav responsive" to show the links in a vertical layout instead of horizontal.

Copy function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } How do I use media queries for different screen sizes? How can I add a dropdown menu to the responsive navigation? How do I change the color of the navigation bar in responsive mode? Sources Responsive Top Navigation Bar


---

# Agent Instructions: 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://howto.atharvgyan.com/how-do-i-make-navigation-links-responsive.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.