How to keep custom dropdown from moving elements?

Site URL: https://thehouseofagness.squarespace.com/

Hi!

I created a custom dropdown menu  in the intro section of the store page (code block).

When I hover over the dropdown menu, the container (products ) below moves as the dropdown descends. 

I dont want the elements to move, would like to have the same affect as normal dropdown navbar. 

And how could I make the dropdown to appear from the left instead of droping down?

any tips on how I could solve this?

Thanks

pass: 280822

Difficult to solve this.

I suggest a new approach

Dropdown Icon/Text will float on left of screen > Click text > Show dropdown. Element won't move.

With this way, you can add code to Store Page Header, then we will give code to adjust it.

Hi @tuanphan 🙂

I dont know if I did understand your tips, but what I did is to put the same code in the Store Page Header code injection . Now the dropdown appears on top left of screen (Store page).

So whats the next move?

Thank you 🙂 

On 9/1/2022 at 7:57 PM, Trescalane said:

Hi @tuanphan 🙂

I dont know if I did understand your tips, but what I did is to put the same code in the Store Page Header code injection . Now the dropdown appears on top left of screen (Store page).

So whats the next move?

Thank you 🙂 

Sorry for delay. Can you add it again?

If the site is live & you can't add it, you can create a test page >> add code there. Then we can check.

Hey @tuanphan,

yes I did add it but it appears under the announcement bar of the left side, so when you hover the dropdown menu appears (Store page). 

I added the code  in the Store Page Header code injection.

Thank you 🙂 

This is the code  that I used to create the dropdown menu:

<div class="navbar-categories">
   <div class="dropdown-categories">
    <button class="dropbtn-categories"> <i class="fa fa-bars"></i>Dropdown
    
      </button>
    <div class="dropdown-categories-content">
      
   <a href="/#" class="categories-group-link"> Flower Box</a>  
    <a href="#" class="categories-group-link"> Eternity Roses</a>  
     <a href="#" class="categories-group-link"> Bouquets</a>  
      <a href="#" class="categories-group-link"> Orchids</a>  
  <a href="#" class="categories-group-link"> Gift Sets</a> 
  <a href="#" class="categories-group-link"> Floral Deli</a>  
    </div>
  </div>
</div> 

  <style>

.dropdown-categories .fa-bars {
  padding-right:20px;
}
    
    .navbar-categories {
  overflow: hidden;
  background-color:#fff;
  width:250px;
}

.navbar-categories a {
  float: left;
  font-size: 16px;
  color: #000;
  text-align: left;
  padding: 14px 16px;
  text-decoration: none;
  letter-spacing: 0.06rem;
  font-family: Futura PT;
  width: 250px;
}

.dropdown-categories {
  float: left;
  overflow: hidden;
  background:#fff;
 
}

.dropdown-categories .dropbtn-categories {
  font-size: 16px;  
  letter-spacing: 0.06rem;
  border: none;
  outline: none;
  color:black;
  padding: 14px 60px;
  font-family: Futura PT;
  margin: 0;
  background:#fff!important;
}

/*.navbar-categories a:hover, .dropdown-categories:hover .dropbtn-categories {
  background:red;
}*/

.dropdown-categories-content {
   display: none;
  position:relative;
  background-color:#fff;
  min-width: 160px;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.9);
  z-index: 100;
}

.dropdown-categories-content a {
   float: none;
  color: black;
  padding: 12px 16px;
  line-height: 0.1rem!important;
  text-decoration: none;
  display: block;
  text-align: left;
    padding: 14px 37px;

}

.dropdown-categories-content a:hover {
  background:#fff;
  color: #d4af37;
}

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

  </style>
 

On 9/5/2022 at 3:19 PM, Trescalane said:

Hey @tuanphan,

yes I did add it but it appears under the announcement bar of the left side, so when you hover the dropdown menu appears (Store page). 

I added the code  in the Store Page Header code injection.

Thank you 🙂 

Can you add it again? I don't see the code now

Hi @tuanphan 🙂

The code is still there, now I disabled the announcement bar so its visible now to see it, on the store page. 

Thank you 🙂

Hi @tuanphan, will you still help?

On 8/28/2022 at 10:12 AM, Trescalane said:

Site URL: https://thehouseofagness.squarespace.com/

Hi!

I created a custom dropdown menu  in the intro section of the store page (code block).

When I hover over the dropdown menu, the container (products ) below moves as the dropdown descends. 

I dont want the elements to move, would like to have the same affect as normal dropdown navbar. 

And how could I make the dropdown to appear from the left instead of droping down?

any tips on how I could solve this?

Thanks

pass: 280822

 

Hey there, not sure if you still need help with this, but I was having the same issue with the category dropdown block pushing the page elements down. I fixed it with this:

.archive-block-wrapper.archive-block-setting-layout-dropdown {
   position: absolute;
   z-index: 99999!important;
  }

I also needed to adjust the background color of my dropdown list elements so they showed up correctly.

This is for the Squarespace categories block (found under Archive), so for your custom dropdown you will need to put the properties in the corresponding classes (probably .dropdown-categories). The absolute positioning and z-index make it so that the element overlaps on top of the other page elements, which is what I was looking for on my site. Hope this helps! 

@tuanphanhi there, I have another question about the custom dropdown. I added one to Squarespace's default blog page header, so it would show up when someone clicks on a blog category. Unfortunately, when you click the dropdown menu, the default site post blocks cut off the content. The z-index should prevent this issue, but it's still not showing correctly. Any thoughts?

Site url: https://www.youbelongsd.com/blog

Another example: https://www.youbelongsd.com/blog/category/Community

On 12/6/2022 at 6:38 AM, jinlikegold said:

@tuanphanhi there, I have another question about the custom dropdown. I added one to Squarespace's default blog page header, so it would show up when someone clicks on a blog category. Unfortunately, when you click the dropdown menu, the default site post blocks cut off the content. The z-index should prevent this issue, but it's still not showing correctly. Any thoughts?

Site url: https://www.youbelongsd.com/blog

Another example: https://www.youbelongsd.com/blog/category/Community

I see you use absolute to move dropdown to left. You can use margin-left: 0 instead.

#collection-5b4791458a922da6575e66cf .archive-block-wrapper.archive-block-setting-layout-dropdown, #collection-6344ae24c67c8d00e7d624ba .archive-block-wrapper.archive-block-setting-layout-dropdown {
    margin: auto;
    width: 80%;
    margin-left: 0;
}

On 12/10/2022 at 1:20 AM, tuanphan said:

I see you use absolute to move dropdown to left. You can use margin-left: 0 instead.

#collection-5b4791458a922da6575e66cf .archive-block-wrapper.archive-block-setting-layout-dropdown, #collection-6344ae24c67c8d00e7d624ba .archive-block-wrapper.archive-block-setting-layout-dropdown {
    margin: auto;
    width: 80%;
    margin-left: 0;
}

Actually, I am using absolute to help the dropdown not push the blocks down. If I take out the absolute positioning and use your margin solution, it makes it so the entire block gets pushed down by the dropdown again. I am trying to find a solution that doesn't do that, but still shows up on the default blog page.