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

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

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

Thanks, Tuanphan! That worked for the category navigation on the store pages and I appreciate it. 

Is there a fix for adding the category navigations to individual product pages as well? 

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. 

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?

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. 

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>

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!

#1. Update new code. You can check it again

If it works, let me know, I will check other questions

Great, that worked. I appreciate it. If we can get the second question that would set me right. The third question would be wonderful as well, but less critical.

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

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

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

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!

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!

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

5 hours ago, tuanphan said:

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

Yes, thanks for having a look 

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

12345julia

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>

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?

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

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>

 

Sorry line is above of course

                                                          Prints

                               all images......

                        Clay     Dreamcatcher     Prints      Other

                                                                      Drawings

                                                                      Photography

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>

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?

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?

Try keeping the code & we can check easier.

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

Oki, I will try to do that tomorrow.  Thank you!

My site is currently with a code. I'm not sure if that means it is live, it's my first time  creating a website. So fairly new to all all this, terms included😊