Question 11663 in Shopify Question posted in
The Shopify help center can be found here.

Drop entire nav bar down when mouse hovers it? – Shopify

I have a website so far and I’m not sure how to have the entire navigation bar menu dropdown. In the demonstration, this is before the hover:

Before Hover

And after the hover:

After hover

I’ve been looking over the web on how to do this to my own Shopify website code. Does anyone have any tips or resources for what this type of drop-down menu is called?

Tags:

4

Answers


  1. 0

    You want to drop full nav to down (its called fullscreen navigation downward). Here, is the example from w3schools.com

    Login or Signup to reply.
  2. 0

    You can use my Component Library for the navigation drop-down.
    Rebalance UI

    Login or Signup to reply.
  3. 0 
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }

    .navbar {
        overflow: hidden;
        background-color: #333;
        font-family: Arial, Helvetica, sans-serif;
    }

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

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

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

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

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

    .dropdown-content .header {
        background: red;
        /* padding: 16px; */
        color: white;
    }

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



    /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
        .column {
            width: 100%;
            height: auto;
        }
    }
    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <div class="dropdown">
            <button class="dropbtn">Dropdown
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <div class="header">
                    <a href="">
                        <img src="https://i.picsum.photos/id/193/200/300.jpg?hmac=b5ZG1TfdndbrnQ8UJbIu-ykB2PRWv0QpHwehH0pqMgE" alt="" width="100" height="100">
                    </a>
                    <a href="">
                        <img src="https://i.picsum.photos/id/122/200/300.jpg?hmac=OfQ8cObBgD7BOhMjqNrjqHDjO-rXiNQ4KvSd8QRAuIA" alt="" width="100" height="100">
                    </a>
                    <a href="">
                        <img src="https://i.picsum.photos/id/834/200/300.jpg?hmac=9hu4aro5r8PEFwzVlhizygx4urxyeGGjgyMRXUgKOsE" alt="" width="100" height="100">
                    </a>
                </div>
            </div>
        </div>
    </div>
    Login or Signup to reply.
  4. 0

    if you want open dropdown with animation, use below code:

    #dropdown{
   transition:1s;
}

    This code will do the tasks you defined in 1 second

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

Back To Top
Search