Jump to content

Could really use help adding category navigation to all store pages on mobile

Recommended Posts

Site URL: http://www.beardacus.art

On the desktop version of my website the categories navigation is on the left and present on all category pages, but not on the individual product pages. On mobile the navigation is present only on the main store page and nowhere else--on top of that it is a scroll rather than centered and stacked if necessary. What I would like is:

1. The desktop version to remain the same (categories on the left) but if possible to have the categories either under the breadcrumbs on the product page or taking their place entirely.

2. To have the category navigation on all pages on top, centered with padding between on mobile. So no scrolling to see the entirety of the navigation links.

Website is www.beardacus.art


 

Untitled-2.thumb.jpg.0d11c8bd54d5690844207c409b235099.jpg1094214421_241405319_886102088986548_3074238930652637009_ncopy.thumb.jpg.27532424f475efc768290a549f25af2e.jpg714783572_241209671_975787986597460_8436960366212680760_ncopy.thumb.jpg.d564d6cbbab3f773db8735da0786d253.jpg

Link to comment

Add to Design > Custom CSS

/* Shop page nav */
@media screen and (max-width:767px) {
ul.nested-category-children {
    flex-wrap: wrap !important;
    justify-content: center !important;
}
/* show breadcrumb */
.ProductItem-nav-breadcrumb {
    display: block !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
10 hours ago, Beardacus said:

Does anybody have a fix for that--adding category navigation to individual product pages? I've searched and just can't come up with anything. I've already had complaints about the ease of use when navigating from product to product.

Thanks in advance. 

You mean remove default breadcrumb, replace it with nav links, similar on category 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

Yessir, the breadcrumbd only lead back to the main store page. It would be great to have the entire category nav available in its place.

 

I also just noticed the category nav is not present on each category page on mobile. I could've sworn that code you shared took care of that, but it's still missing. 

Edited by Beardacus
Link to comment

This will require a lot of code.

Add to last line in Code injection Footer. Replace google.com with your urls

<script>
$(document).ready(function() { 
		$('<ul class="t-nav"><li><a href="https:google.com">All</a></li><li><a href="https:google.com">Scratch Dent</a></li><li><a href="https:google.com">Limited Supply</a></li><li><a href="https:google.com">Flags</a></li><li><a href="https:google.com">Original Artwork</a></li><li><a href="https:google.com">Seasonal</a></li><li><a href="https:google.com">Clocks</a></li><li><a href="https:google.com">Customizable Decor</a></li><li><a href="https:google.com">Game Boards</a></li></ul>').insertBefore('body.view-item .products.collection-content-wrapper');
	});
	</script>
	<style>
	ul.t-nav {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
}
ul.t-nav li a {
    margin-left: 20px;
    margin-right: 20px;
}
      @media screen and (max-width:767px) {
      ul.t-nav {
    flex-wrap: wrap;
}
      }
</style>

image.thumb.png.feceefa14e9e7d15e6fa25f9ec566bd1.png

Edited by tuanphan
fixed bug on mobile

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

That works and I appreciate it. I have two problems with it and hopefully these will be easy. I've researched first and am not finding a fix that I can implement with my rather low level of coding experience. 

1. On mobile the links extend far beyond the screen on the left and right. Seems easy to pad that but I can't quite figure out how to style it correctly.

2. On mobile I still do not have category navigation on the category pages themselves. The code you just posted fixes that on the product pages but I'm not sure why they aren't appearing on all pages. On mobile you just see the category navigation on the main shop page and on the individual product pages now.

I've deleted the code that you posted last night from the site as I don't feel it's very functional with the navigation extending beyond the boundaries. Images are attached if examples of the problems are required.

Bonus question: Is there a line of code I could insert to get a line in between the categories on the navigation menu? Not a huge deal; I'm cool with how it looks without it. Just would be a little nicer with a dividing line.

 

Thank you very much for your help!

Untitled-1.jpg

Link to comment
  • 2 weeks later...
On 9/8/2021 at 10:11 AM, tuanphan said:

Add to Design > Custom CSS

/* show breadcrumb */
.ProductItem-nav-breadcrumb {
    display: block !important;
}
}

@tuanphan You're a lifesaver as always! I have a related question. I used the code above in Custom CSS to get breadcrumbs to appear on mobile, however they only link directly to the main Shop page, not to the categories (see attached).

  1. Can I have the categories show up in the breadcrumbs as opposed to just the main Shop?
  2. Is there a way to hide the current product page in the breadcrumbs? It doesn't make much sense for the current page to be there.

Site: vibemade.com

Screen Shot 2021-09-30 at 1.18.01 AM.png

Link to comment
On 9/30/2021 at 6:22 AM, vibemade said:

@tuanphan You're a lifesaver as always! I have a related question. I used the code above in Custom CSS to get breadcrumbs to appear on mobile, however they only link directly to the main Shop page, not to the categories (see attached).

  1. Can I have the categories show up in the breadcrumbs as opposed to just the main Shop?
  2. Is there a way to hide the current product page in the breadcrumbs? It doesn't make much sense for the current page to be there.

Site: vibemade.com

Screen Shot 2021-09-30 at 1.18.01 AM.png

Try adding to Design > Custom CSS

/* Show category nav links */
@media screen and (max-width:767px) {
div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
}
.nested-category-tree-wrapper>ul {padding-top: 44px;padding-bottom: 30px;margin-bottom: 0;flex-wrap: nowrap;overflow-x: scroll;text-align: center;display: flex;flex-direction: row;align-content: center;position: relative;justify-content: start;}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
    flex: 0 0 auto;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}
.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
    padding-top: 5px;
}
}

 

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

Hello tuanphan. I used your code for my website. It was exactly what I was looking for. Very happy I found it. Thanks. I have a question in regards to the appearance of subcategories... I'll add a visual to clarify. I'm wondering if it is possible to have "print" stay aligned with the other categories ; clay, dreamcatcher, other  and simply have drawings and photography drop down instead? Thank you!

Screenshot_20211027-144909_Chrome.thumb.jpg.cd7288bdaf6a131cb4e50b4cb644e4f5.jpg

Link to comment
On 10/27/2021 at 8:14 PM, puslingpaahaender said:

Hello tuanphan. I used your code for my website. It was exactly what I was looking for. Very happy I found it. Thanks. I have a question in regards to the appearance of subcategories... I'll add a visual to clarify. I'm wondering if it is possible to have "print" stay aligned with the other categories ; clay, dreamcatcher, other  and simply have drawings and photography drop down instead? Thank you!

Screenshot_20211027-144909_Chrome.thumb.jpg.cd7288bdaf6a131cb4e50b4cb644e4f5.jpg

Can you share link to store page? We can check easier

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 10/29/2021 at 3:37 PM, puslingpaahaender said:

Yes, thanks for having a look 

https://www.storiesofsmallthings.com/shopall/prints

12345julia

Try adding this to Last Line in Code Injection > Footer > Then check again on mobile

<script>
$(document).ready(function() {
    if(window.innerWidth <= 575 && $('.nested-category-children li a').length > 0) {
        let open = false
        $('<div id="t-category" name="t-category"><div id="t-control">Category <span id="t-down"></span><span id="t-up"></span></div><div id="t-menu"></div></div>').insertBefore('.nested-category-tree-wrapper');
        $('.nested-category-children li a').each(function(id, e) {
            const href = $(e).attr('href');
            const text = $(e).html();
            $('#t-menu').append('<a class="t-item" href="'+href+'">'+text+'</a>')
        })
        $('#t-control').click(function() {
            if (!open) {
            $('#t-menu').css('display', 'block')
            $('#t-down').css('display', 'none')    
            $('#t-up').css('display', 'unset')
            open = true
            } else {
                $('#t-menu').css('display', 'none')
            $('#t-down').css('display', 'unset')    
            $('#t-up').css('display', 'none')
            open=false
            }
        })
    }
})
</script>
<style>
#t-category {
    display: none;
}
@media only screen and (max-width: 575px) {
    .nested-category-children {
        display: none !important;
    }
    #t-menu {
        position: absolute;
    top: 35px;
    z-index: 1;
    background: white;

    display: none;
    right: 0;
    text-align: right;
    
    }
    #t-category {
        position: relative;
        display: inline-block;
        float: right;
        top: 5px;
        right: 0;
    }
    .nested-category-title {
        display: inline-block !important;
    }
    #t-control {
        font-family: baskerville-display-pt;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    z-index: 12;

    font-size: 20px;
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 20px;
    }
    .t-item {
        display: block;
        padding-left: 15px;
    }
    #t-down {
margin-left: 10px;
      position: absolute;
    top: 15px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 10px solid;
    right: 0;
    }
    #t-up {
       margin-left: 10px;
      position: absolute;
    bottom: 12px;
    right:0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 10px solid;
      display: none;
    }
}
</style>

 

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
13 hours ago, tuanphan said:

Try adding this to Last Line in Code Injection > Footer > Then check again on mobile

<script>
$(document).ready(function() {
    if(window.innerWidth <= 575 && $('.nested-category-children li a').length > 0) {
        let open = false
        $('<div id="t-category" name="t-category"><div id="t-control">Category <span id="t-down"></span><span id="t-up"></span></div><div id="t-menu"></div></div>').insertBefore('.nested-category-tree-wrapper');
        $('.nested-category-children li a').each(function(id, e) {
            const href = $(e).attr('href');
            const text = $(e).html();
            $('#t-menu').append('<a class="t-item" href="'+href+'">'+text+'</a>')
        })
        $('#t-control').click(function() {
            if (!open) {
            $('#t-menu').css('display', 'block')
            $('#t-down').css('display', 'none')    
            $('#t-up').css('display', 'unset')
            open = true
            } else {
                $('#t-menu').css('display', 'none')
            $('#t-down').css('display', 'unset')    
            $('#t-up').css('display', 'none')
            open=false
            }
        })
    }
})
</script>
<style>
#t-category {
    display: none;
}
@media only screen and (max-width: 575px) {
    .nested-category-children {
        display: none !important;
    }
    #t-menu {
        position: absolute;
    top: 35px;
    z-index: 1;
    background: white;

    display: none;
    right: 0;
    text-align: right;
    
    }
    #t-category {
        position: relative;
        display: inline-block;
        float: right;
        top: 5px;
        right: 0;
    }
    .nested-category-title {
        display: inline-block !important;
    }
    #t-control {
        font-family: baskerville-display-pt;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    z-index: 12;

    font-size: 20px;
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 20px;
    }
    .t-item {
        display: block;
        padding-left: 15px;
    }
    #t-down {
margin-left: 10px;
      position: absolute;
    top: 15px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 10px solid;
    right: 0;
    }
    #t-up {
       margin-left: 10px;
      position: absolute;
    bottom: 12px;
    right:0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 10px solid;
      display: none;
    }
}
</style>

 

Where exactly should  I add this?

When I add it at the bottom of your code, both right after  17px !important; } or the next line it says syntax line error. Am I adding it the wrong place?

 

Link to comment
On 11/1/2021 at 12:08 AM, puslingpaahaender said:

Where exactly should  I add this?

When I add it at the bottom of your code, both right after  17px !important; } or the next line it says syntax line error. Am I adding it the wrong place?

 

Last Line in Settings > Advanced > Code Injection > Footer > Then check again on mobile

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

Thank you! I completely overlooked that you had answered. It works in aligning PRINTS with the rest of the categories horizontally. But I cant seem to get the subcategories aligned vertically with Prints. Is there any way to do that? (It seems that the mobile version is because of this gets shifted around.)

Like so

Clay    Dreamcatcher    Prints     Other

                                            Drawings

                                            Photography

 

Thank you!

 

 

On 10/31/2021 at 4:41 AM, tuanphan said:

Try adding this to Last Line in Code Injection > Footer > Then check again on mobile

<script>
$(document).ready(function() {
    if(window.innerWidth <= 575 && $('.nested-category-children li a').length > 0) {
        let open = false
        $('<div id="t-category" name="t-category"><div id="t-control">Category <span id="t-down"></span><span id="t-up"></span></div><div id="t-menu"></div></div>').insertBefore('.nested-category-tree-wrapper');
        $('.nested-category-children li a').each(function(id, e) {
            const href = $(e).attr('href');
            const text = $(e).html();
            $('#t-menu').append('<a class="t-item" href="'+href+'">'+text+'</a>')
        })
        $('#t-control').click(function() {
            if (!open) {
            $('#t-menu').css('display', 'block')
            $('#t-down').css('display', 'none')    
            $('#t-up').css('display', 'unset')
            open = true
            } else {
                $('#t-menu').css('display', 'none')
            $('#t-down').css('display', 'unset')    
            $('#t-up').css('display', 'none')
            open=false
            }
        })
    }
})
</script>
<style>
#t-category {
    display: none;
}
@media only screen and (max-width: 575px) {
    .nested-category-children {
        display: none !important;
    }
    #t-menu {
        position: absolute;
    top: 35px;
    z-index: 1;
    background: white;

    display: none;
    right: 0;
    text-align: right;
    
    }
    #t-category {
        position: relative;
        display: inline-block;
        float: right;
        top: 5px;
        right: 0;
    }
    .nested-category-title {
        display: inline-block !important;
    }
    #t-control {
        font-family: baskerville-display-pt;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    z-index: 12;

    font-size: 20px;
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 20px;
    }
    .t-item {
        display: block;
        padding-left: 15px;
    }
    #t-down {
margin-left: 10px;
      position: absolute;
    top: 15px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 10px solid;
    right: 0;
    }
    #t-up {
       margin-left: 10px;
      position: absolute;
    bottom: 12px;
    right:0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 10px solid;
      display: none;
    }
}
</style>

 

 

Skærmbillede (42).png

Skærmbillede (43).png

Link to comment

Sorry line is above of course

                                                          Prints

                               all images......

 

                                                                                                                              

                        Clay     Dreamcatcher     Prints      Other

                                                                      Drawings

                                                                      Photography

 

Link to comment
On 11/10/2021 at 9:57 PM, puslingpaahaender said:

Sorry line is above of course

                                                          Prints

                               all images......

 

                                                                                                                              

                        Clay     Dreamcatcher     Prints      Other

                                                                      Drawings

                                                                      Photography

 

It looks like you removed some code (your old code) in Code Injection, caused above code didn't work.

Don't remove any code in the current code, add this line to Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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
2 hours ago, tuanphan said:

It looks like you removed some code (your old code) in Code Injection, caused above code didn't work.

Don't remove any code in the current code, add this line to Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

When that line is there, this happens. Is there any way to judg fix the position of prints and drop drawings and photography directly down in line with prints?

Screenshot_20211112-110655_Chrome.jpg

Screenshot_20211112-110708_Chrome.jpg

Link to comment
On 11/12/2021 at 5:10 PM, puslingpaahaender said:

When that line is there, this happens. Is there any way to judg fix the position of prints and drop drawings and photography directly down in line with prints?

Screenshot_20211112-110655_Chrome.jpg

Screenshot_20211112-110708_Chrome.jpg

Try keeping the code & we can check easier.

If your site is live, you can duplicate site & share duplicated site url

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.