24. Making the Navbar Mobile Responsive, Part 1 – Full stack web development Tutorial Course

In this FullStackWebDevelopment tutorial video, We are going to learn about how to make #navbar #responsive using custom #css for the new website.

For this, we will turn the navbar into a dropdown menu after it reaches a particular screen size to give our website a compact and not so clumsy look. A dropdown menu appears when the user moves the mouse over an element.

With the help of a media query, when the screen is less than 600 pixels wide, it will hide all links, except for the first one (“Home”). Rest of the menu will appear in the dropdown which will be under the trigram logo i.e. the dropdown icon.

The following query will mark all menus except the first one(i.e. Home) invisible when the max-width is 600px or less.

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;
}

A media query consist of a media type that can contain one or more expression which can be either true or false. The result of the query is true if the specified media matches the type of device the document is displayed on. If the media query is true then stylesheet is applied.

—————————-

Week 1: Day 4
Section 4: Advanced CSS: Building and styling website
Tutorial 24: Making the Navbar Mobile Responsive Part 1

—————————-
Do subscribe and hit Bell Icon
—————————-

Follow us in social media handles for opportunities and code related support.

Instagram: https://www.instagram.com/wb.web/
Facebook: https://www.facebook.com/wbweb/
Twitter: https://twitter.com/wbweb_in/
LinkedIn: https://www.linkedin.com/company/wbweb/

—————————-

Got a question on the topic? Please share it in the comment section below and our experts will answer it for you.

For more information, please write back to us at hi@wbweb.co.in or call us at IND: 7077568998

After completing the course, write to biswabijaya@wbweb.co.in for an internship or freelancing opportunities.

For consultation or partnership, related queries drop a mail to hi@wbweb.co.in.