Html Question posted in
Some basic documentation can be found here.

Html – How do I get the Burger menu to be on same row as logo and menu dropdown to open below header?

How do I get the Burger menu to be on same row as logo and menu dropdown to open below header?

I tried to get the burger menu column to appear next to the logo however, it did not work as I expected. I am still new to coding in html and css. I would appreciate any help!

Tags:

2

Answers


  1. 0

    Can you provide some code example. Although at first glance I assume you can fix this issue by surrounding the two components in a div and setting the align-item or justify-content to center

    Login or Signup to reply.
  2. 0

    when creating your nav menu give the parent container a position of relative and set the drop down menu to position absolute, that way you can position it in relation to the parent element. The burger icon can sit in the parent element as normal

    in css set the position properties I mentioned and set the the display to none for the drop down menu, create an additional style of active that has a display of block

    now in javascript you can select the burger icon add an event listener of click that toggles the active class on the menu

    //get the burger menu 
const burgerButton = document.getElementById("burgerButton");
//get the drop down menu 
const menu = document.getElementById("dropDownMenu");

burgerButton.addEventListener("click", function(ev){
    menu.classList.toggle("active");
});
    * {
  padding: 0;
  margin:0;
  box-sizing: border-box;
}

.navbar {
  border-bottom: 1px solid rgba(100, 100, 100, 1);
  display: flex;
  align-items:center;
  padding: 0 10px;
  position: relative;
}

.burger-icon {
  cursor: pointer;
  border-radius: 10px;
  padding: 10px;
}
.burger-icon:hover {
  background-color: rgba(0,0,0,0.5);
}

.logo {
  margin: 0 1rem;
  font-family: arial;
}


.bar {
    width: 25px;
    height: 3px;
    background-color: black;
    border-radius: 3px;
    margin: 5px 0;
}

.dropdown-menu {
  position: absolute;
  width: 200px;
  display: none;
  background-color: red;
  top: 100%;
  left:0;
  background-color: rgb(200,200,200);
}

.dropdown-menu ul {
  list-style: none; 
  display: flex; 
  flex-direction: column; 
  align-items: center;
  gap: 5px;
}

.dropdown-menu ul li {
  width: 100%; 
  padding: 10px 0;
  text-align: center;
  
}

.dropdown-menu ul li:hover {
  background-color: rgb(180,180,190);
  
}

a {
  color: black;
  text-decoration: none;
}

.active {
  display: block;
}
    <header class="navbar">
  <!-- burger icon -->
    <div class="burger-icon"id="burgerButton">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <h2 class="logo">
    Logo here
    </h2>
    <!-- drop down menu -->
    <div class="dropdown-menu" id="dropDownMenu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">etc</a></li>
    </ul>
    </div>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search