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 14
  • 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...

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? 
 

Link to comment
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 5/28/2023 at 3:54 AM, tuanphan said:

Add this to Last Line in Code Injection > Footer

THANKS SO SO MUCH!! You're the best! Seriously. I truly appreciate all the help!!!!

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.