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

Html – Can someone help me to make this code Dropdown menu for responsive?

The hamburger menu icon should be one the right side the image should be on the left site.
When we will click the menu to open should open dropdown and inside it should be the logo home about us galleru contact.

Home 

    <li class="li3"><a class="a2" href="aboutus.html">About Us</a></li>

    <li class="li4"><a class="a3" href="gallery.html">Gallery</a></li>

    <li class="li5"><a class="a4" href="contact.html">Contact</a></li>

    <a class="Contact_Us" href="contact.html">
        <img class="Contact-us-img"src="Vector.svg" alt="">
       <span class="Contact-us-text">Contact Us</span>
      </a>

   

  
</ul>

I just need to turn it into css

I need it for iphone 14pro responsive to be hamburger menu

Tags:

2

Answers


  1. 0

    To make the menu responsive and display a hamburger menu for iPhone 14 Pro or any other mobile device, you can use media queries in CSS. Here’s the modified CSS code to achieve the responsive hamburger menu:

    CSS (styles.css):

        body {
    margin: 0;
    font-family: Arial, sans-serif;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: #fff;
    text-decoration: none;
    font-size: 24px;
}

.menu-toggle {
    width: 30px;
    height: 30px;
    background-color: #fff;
    cursor: pointer;
    display: none; /* Hide the menu icon by default on larger screens */
}

.menu-toggle::before, .menu-toggle::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333;
}

.menu {
    display: flex;
    align-items: center;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.menu li {
    padding: 10px;
}

.menu a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

/* Media Query for Mobile Devices */
@media only screen and (max-width: 767px) {
    .menu {
        display: none; /* Hide the menu by default on small screens */
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 50px;
        right: 0;
        width: 100%;
    }

    .menu.active {
        display: flex; /* Show the menu when active */
    }

    .menu li {
        width: 100%;
        text-align: center;
    }

    .menu-toggle {
        display: block; /* Show the menu icon on small screens */
    }
}

    With this modified CSS, the menu will be hidden on larger screens and will display the hamburger menu icon. On smaller screens, such as iPhone 14 Pro or other mobile devices, the hamburger menu will be visible. When you click the hamburger menu icon, the menu will slide down, revealing the links to Home, About Us, Gallery, and Contact pages.

    Remember to include this CSS in the section of your HTML file to apply the styles to your webpage.

    Login or Signup to reply.
  2. 0

    First of all, stackoverflow is not a website where you post a code snippet and ask somebody to implement something. Nevertheless, I think this might help you W3Schools. As you can see in that tutorial, there is a way in CSS to ckeck how wide the screen is.

    @media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

    In this example, the background-color will be set to lightblue, when the width is smaller than 600px. Using this rule, you can change your CSS accordingly.

    You should definitely try to implement it yourself, and not just copy paste from the internet. Go experiment, and have fun with CSS, that’s the only way to learn it.

    Happy coding!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search