Adding responsive navbar to current html code-CodePudding

our professor did a last minute update to our web project. I just need help with my html code making the navbar to be responsive and with hamburger icon as screen adjust to tablet or mobile mode. For the hamburger, I wanted to be on the right side of the website. Below is the html and css. Please help!!!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="shortcut icon" type="images/png" href="Images/Favicon.png">
<link href="styles.css" rel="stylesheet" type="text/css">
    
<style>

/* Style the container/contact section */
.container {
    border-radius: 5px;
    background-color: lightgray;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    height: auto;
    width: auto;
    margin-top: -4px;
</style>
</head>

<body>

<div ><img src="Images/Shawarma_Banner.png" alt="banner" width="100%"></div>
<div ><a href="Index.html"><img src="Images/Shawarma_Logo_Final2.png" alt="logo" width="48" height="48"></a></div>

<div >
    <a href="Index.html">Home</a>
    <a href="About.html">About Us</a>
    <div >
        <button >Menu 
            <i ></i>
        </button>
        <div >
            <a href="foodMenu.html">Food Menu</a>
            <a href="hookahMenu.html">Hookah Menu</a>
        </div>
    </div> 
    <a href="Catering.html">Catering</a>
    <a href="Contact.html">Contact Us</a>
    <a href="Reservation.html">Reservation</a>
    <div class ="hamburger">
    
    </div>
</div>

<div ><img src="Images/shishaLounge.png" alt="shisha" width="100%"></div>

<div >
    <h2><center>Welcome to Shawarma Terminal!</center></h2>
  <div >
    <div >
          <div style="text-align:left">
    <div >
    <iframe width=50% height="315" src="https://www.youtube.com/embed/GCDkQ7Q1rPY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    </div>
    </div>
  </div>
</div>
    
<div >
  <p>© Copyright 2022, Shawarma Terminal-All Rights Reserved</p>
</div>
    
</body>
</html>

@charset "utf-8";
body {
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -1px;
    margin-right: -1px;
    

}

.banner{
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: -4px;

    
}
.logo{
    float: left;
    overflow: auto;
    background-color: #dcbb1a;
    padding-left: 10px;
    
    
}
.navbar {
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    overflow: hidden;
    background-color: #dcbb1a;
    padding-top: px;

}

.navbar a {
  float: right;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 16.5px 16px;
  text-decoration: none;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 16.5px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #ff0c0c;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.footer{
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 11px;
    bottom: 0;
    width: 100%;
    background-color: #dcbb1a;
    color: aliceblue;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 0px;
    padding-left: 0px;
}

/*logo*/

CodePudding user response：

you can use media queries to achieve what you need.

@media only screen and (max-width: 768px)/*use your class*/ .hamburger { /* For mobile phones: */ position:absolute; right:10%

CodePudding user response：

Like mentioned above, Media Queries should help you with responsiveness. After you’ve implemented your media query (like the one mentioned above) use your browsers developer tools to inspect the page. From here you can set the page to be responsive and test the features being changed by changing the device type/size.