sambarnes Posted July 9, 2020 Share Posted July 9, 2020 (edited) 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 July 9, 2020 by sambarnes Link to comment
thiscitymaps Posted July 9, 2020 Share Posted July 9, 2020 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. Link to comment
tuanphan Posted July 9, 2020 Share Posted July 9, 2020 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
sambarnes Posted July 9, 2020 Author Share Posted July 9, 2020 @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! Link to comment
thiscitymaps Posted July 9, 2020 Share Posted July 9, 2020 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. Link to comment
Juelz Posted April 21 Share Posted April 21 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
creedon Posted April 21 Share Posted April 21 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. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Juelz Posted May 8 Share Posted May 8 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
Juelz Posted May 8 Share Posted May 8 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. Link to comment
tuanphan Posted May 9 Share Posted May 9 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; } 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
Juelz Posted May 24 Share Posted May 24 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
Juelz Posted May 24 Share Posted May 24 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 Link to comment
tuanphan Posted May 28 Share Posted May 28 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
tuanphan Posted May 28 Share Posted May 28 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
Juelz Posted May 29 Share Posted May 29 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment