Change Navigation to Drop Down Menu in Shop

Site URL: https://www.papercityfabrics.com/shop

Hi! I'm looking for help changing the navigation style for my shop (https://www.papercityfabrics.com/shop). Right now, all categories show up at the top. I would like to make two changes:

1. Change shop navigation to a drop down menu, where you hover over a primary category (ex. "fabric") and then the sub-categories appear underneath. 

2. I also would like to stop categories from appearing in the navigation if there isn't an item currently sold in that category. This comes up when we schedule a product in a new category (the product doesn't show up until the scheduled time, but the category appears right away). 

Thanks! 

Try adding to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    if(window.innerWidth <= 5750 && $('.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>

I have the same issue - when I add the footer code it seems to work (when I am on the footer code page). But then when I go back to design the regular navigation banner appears.

I have ajax enabled. 

20 hours ago, Avdor said:

I have the same issue - when I add the footer code it seems to work (when I am on the footer code page). But then when I go back to design the regular navigation banner appears.

I have ajax enabled. 

What is your site url?

https://www.avnerdormanmusic.com/

On 6/24/2022 at 6:46 PM, Avdor said:

https://www.avnerdormanmusic.com/

Hi. Where is shop? I don't find it in header menu

I guess I read the question wrong. I want to change the main navigation of my site to a Dropdown-Menu. Is that possible?

On 3/12/2022 at 10:47 PM, tuanphan said:

Try adding to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    if(window.innerWidth <= 5750 && $('.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>

 

Thanks for this. I would love to make this work for drop down menus in my shop. Should it work with the shop navigation based on nested categories? I have added it here: Settings > Developer Tools > Code Injection > Footer, but no success so far. 

On 5/9/2023 at 3:02 AM, drunkenspyder said:

Thanks for this. I would love to make this work for drop down menus in my shop. Should it work with the shop navigation based on nested categories? I have added it here: Settings > Developer Tools > Code Injection > Footer, but no success so far. 

What is your shop page url? We can check easier

On 5/9/2023 at 11:36 PM, tuanphan said:

What is your shop page url? We can check easier

Thanks very much for following up. I removed the code for now, as making this work is lower on my priority list than a couple of other items. When I return to it, if I still experience the problem, I'll follow up. Cheers!

@tuanphan I have tried code given above and injected it into my footer but it seems to not be working for me. Here is my site shop: https://midwestcompression.com/shop . Im looking to make something like this attached picture if possible:

On 11/2/2023 at 9:58 AM, daceyh248 said:

@tuanphan I have tried code given above and injected it into my footer but it seems to not be working for me. Here is my site shop: https://midwestcompression.com/shop . Im looking to make something like this attached picture if possible:

That code for mobile only & it will create a dropdown like this (It runs on your site)