Create a dropdown menu for Shop in header

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!

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. 

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

@tuanphan I don't know why I didn't think about it earlier but I just hid the shop and created a folder with redirecting links. Was way easier than I thought.

And yes that's simply how I've fixed the filters on the side!

Hmm I am trying this code and it is not doing anything. I'd love to get side navigation for my shop categories and tags. 

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/

17 hours ago, Juelz said:

My question: can a folder be linked to a page?

If I understand correctly. Yes. Please see the following.

Let us know how it goes.

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? 
 

And does anyone know how I can get the transparent back to a color in the dropdown menu?

I can't find it in the code.

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?

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;
}

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. 



 

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

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>

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;
}

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