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

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?

 

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. 

You mean

Currently

Desired?

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

 

 

Desired?

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.

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?

 

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

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

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

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?

On 7/25/2023 at 9:07 AM, tuanphan said:

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

Yes please! Exactly that!