Creating mobile navbar

Horlatech001 0
Viewed 32

How do I create a mobile navbar that display the hamburger icon on mobile view. I want the links to be displayed in block whenever I click on the icon

Have already tried to create it using the hamburger svg icon and set the display to none. But couldn't get the javascript code to toggle the link

bootstrap-4 reactjs javascript css html
1 Answers

Next time, include the code you've already tried. I see you're inquiring about CSS/HTML and JS. Try this to get you started & follow this tutorial from w3school: https://www.w3schools.com/howto/howto_js_mobile_navbar.asp

Here's the CSS portion for the hamburger you're referring to:

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #04AA6D;
  color: white;
}

Full tutorial is on the link above.

harp0
Related