Jump to content

Create a dropdown menu for Shop in header

Recommended Posts

Site URL: https://www.snjc.world/

Hello everyone,

I wanted to know if it was possible to create a dropdown menu when hovering over "SHOP" in my header ? I want the different categories to appear (the same one used as filters on the shop page: t-shirt, longsleeve, etc..). Might be a difficult one, wondering if anyone ever looked at it before ?

You can check the website if it helps: https://www.snjc.world/ (code: okokok)

Thank you in advance!

Edited by sambarnes
Link to comment
  • Replies 33
  • Created
  • Last Reply

Top Posters In This Topic

You can use Folder?

45 minutes ago, thiscitymaps said:

How did you get the fixed navigation on the left side for your Shop page? Did it come with the template you're using? I really like your site. 

I see the site used this CSS

@media screen and (min-width: 720px) {
    .ProductList-filter {
        position:-webkit-sticky;
        position: sticky;
        top: 100px
    }
}

@media only screen and (min-width: 640px) {
    .ProductList-filter-list {
        position:fixed
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...

Is it possible to create a dropdown for the shop?
I currently have a page with Categories linked to "Shop" (navigation bar). The Shop All page is hidden.

I'd like to keep the category page, when clickin on "shop" and add a drop down for each of the categories. 
I created a dropdown for "more" by making it a folder.

 

My question: can a folder be linked to a page? This way I could keep the category page and add a drop down when hovering over shop. So one can choose between the category overview or clicking on one of them specifically.

https://www.soulmaidjewelry.com/

Link to comment
  • 3 weeks later...
On 5/8/2023 at 10:15 AM, Juelz said:

Thank you!!! I was able to create the clickable drop down from the folder. 

Now I would just like the actual folder "Shop" to be linked to the Categories page ( https://www.soulmaidjewelry.com/shop-categories ) . This was I can remove "categories" from the top menu.

So one can choose to see the categories by clicking on SHOP or directly choose a category on the drop down. 

Does this make sense? 
 

You mean make this shop clickable?

image.png.7f520a19ac73e1ca076cc49cc8a550fc.png

with dropdown background, add this to Design > Custom CSS
 

body:not(.header--menu-open) .header-nav-folder-content {
    background-color: rgba(255,255,255,0.9) !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
On 5/9/2023 at 5:19 AM, tuanphan said:
body:not(.header--menu-open) .header-nav-folder-content {
    background-color: rgba(255,255,255,0.9) !important;
}

THIS IS AWESOME!!! Thanks so much. Also for the perfect background color of the dropdown!!

 

On 5/9/2023 at 5:19 AM, tuanphan said:

You mean make this shop clickable?

Yes, exactly. 
I would like to have this page https://www.soulmaidjewelry.com/shop-categories
show when clicking on SHOP. So I can remove "categories" option on the menu, where this page is on at the moment. 



 

Link to comment
On 5/24/2023 at 10:11 PM, Juelz said:

THIS IS AWESOME!!! Thanks so much. Also for the perfect background color of the dropdown!!

 

Yes, exactly. 
I would like to have this page https://www.soulmaidjewelry.com/shop-categories
show when clicking on SHOP. So I can remove "categories" option on the menu, where this page is on at the moment. 



 

Add this to Last Line in Code Injection > Footer

<script>
$(document).ready(function() { 
		$('a.header-nav-folder-title[href*="/shop/new"]').click(function() {
			var link = $(this).text(),
				href = "/shop-categories";
			window.location.href=href;
		});
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/24/2023 at 10:16 PM, Juelz said:

Is there also a code to put a background color behind the font on the contact page, so that the background image stays but the font is easier to read?

https://www.soulmaidjewelry.com/contact

Add to Design > Custom CSS

/* Contact Page */
[data-section-id="644208399a91e8b484b6946c"]:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
[data-section-id="644208399a91e8b484b6946c"] .content-wrapper {
    position: relative;
    z-index: 999;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

Hey, do you know why the categories are all of a sudden not clickable anymore? I just checked and the pages show "We couldn't find the page you were looking for."

 

When I change the URL slug for each of the drop down categories from "shop" to "shop-all" they individually work, e.g.:
 https://www.soulmaidjewelry.com/shop/new to https://www.soulmaidjewelry.com/shop-all/new

But then the clickable SHOP doesn't work anymore. So changed them all back, and none of them work but the SHOP in the menu is clickable again.

Do you have an idea how I could fix that?

 

 

 

Link to comment
On 5/28/2023 at 3:56 AM, tuanphan said:
/* Contact Page */
[data-section-id="644208399a91e8b484b6946c"]:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
[data-section-id="644208399a91e8b484b6946c"] .content-wrapper {
    position: relative;
    z-index: 999;
}

Thanks for this.
It covered the whole page, so I tried a little around and was able to make the box a little smaller so it's only behind the font and not covering the whole picture or page. 

Now this is what I entered:

/* Contact Page */
[data-section-id="644208399a91e8b484b6946c"]:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 2;
    left: 2;
    width: 50%;
    height: 50%;
    z-index: 10;
}
[data-section-id="644208399a91e8b484b6946c"] .content-wrapper {
    position: relative;
    z-index: 999;
}


Is there a way to get the black square aligned with the contact form itself?

Either only the left side or the whole form?
Let me screenshot which part I'm referring to. Basically aligning with the edges where the font stops so that part of the background is still shown in original color. 

Screen Shot 2023-06-21 at 8.37.04 PM.png

Screen Shot 2023-06-21 at 8.37.13 PM.png

Link to comment
On 6/23/2023 at 4:40 AM, tuanphan said:

 

 

Desired?

Screen Shot 2023-06-21 at 8.37.04 PM.png

RE desired --> almost.

Horizontally:
I'd like to to cover the full "Contact Me" font on the top down to the Instagram & FB symbols.

Vertically:
I'd like the right side of the black background to stop before the "First Name/Email/Message" vertical line.

Link to comment
On 6/21/2023 at 8:28 PM, Juelz said:

Hey, do you know why the categories are all of a sudden not clickable anymore? I just checked and the pages show "We couldn't find the page you were looking for."

 

When I change the URL slug for each of the drop down categories from "shop" to "shop-all" they individually work, e.g.:
 https://www.soulmaidjewelry.com/shop/new to https://www.soulmaidjewelry.com/shop-all/new

But then the clickable SHOP doesn't work anymore. So changed them all back, and none of them work but the SHOP in the menu is clickable again.

Do you have an idea how I could fix that?

 

 

 

@tuanphan do you maybe have a tip for me to fix this, too?

 

Link to comment
  • 3 weeks later...
On 5/8/2023 at 4:15 AM, Juelz said:

Thank you!!! I was able to create the clickable drop down from the folder. 

Now I would just like the actual folder "Shop" to be linked to the Categories page ( https://www.soulmaidjewelry.com/shop-categories ) . This was I can remove "categories" from the top menu.

So one can choose to see the categories by clicking on SHOP or directly choose a category on the drop down. 

Does this make sense? 
 

I would also like to be able to do this where if you click 'Shop' in the navbar, it takes you to a landing page of categories.

Do I have to make the categories page part of my folder?

https://www.shishirts.co.uk/shop

Link to comment
On 7/13/2023 at 10:34 PM, mattrcooper97 said:

I would also like to be able to do this where if you click 'Shop' in the navbar, it takes you to a landing page of categories.

Do I have to make the categories page part of my folder?

https://www.shishirts.co.uk/shop

You can add a link item to folder >> then link to categories page

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
19 hours ago, mattrcooper97 said:

My dropdown works.  I also have a categories page active too (https://www.shishirts.co.uk/shop-categories-1) but how do have this link embedded when you click shop in the navbar? Thanks

You mean click this shop title >>> open shop-categories-1 page?

image.png.6e97c88e0e2cb74fcafe6410307c565e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.