Change Category Navigation to dropdown 7.1

Site URL: https://www.amovintage.com/

Hey,

Is there a CSS code to change category navigation to dropdown on squarespace 7.1? I dont care so much about desktop  view but really want it for mobile devices, I cannot find anywhere and hate how it looks all squished up the top, Ive used codes to make it fit as best it can but it looks tacky I feel

Thankyou

On 4/7/2021 at 4:06 PM, Clarilou said:

Site URL: https://www.amovintage.com/

Hey,

Is there a CSS code to change category navigation to dropdown on squarespace 7.1? I dont care so much about desktop  view but really want it for mobile devices, I cannot find anywhere and hate how it looks all squished up the top, Ive used codes to make it fit as best it can but it looks tacky I feel

 

Thankyou

 

Hi. Add this code to Code Injection > Header > Then save & check on real 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>