Help-Need to Move Items on Mobile View

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

Having an issue in mobile view...

When you click "Shop" all my shop categories are going across the screen in mobile view only.

Id like them to be stacked up and down instead to making the customers scroll all the way over.

Please help!

28 minutes ago, Brigitte-Boardwalk said:

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

Having an issue in mobile view...

When you click "Shop" all my shop categories are going across the screen in mobile view only.

Id like them to be stacked up and down instead to making the customers scroll all the way over.

Please help!

Add to Design > Custom CSS

/* Shop categories on mobile */
@media screen and (max-width:767px) {
ul.nested-category-children {
    flex-wrap: wrap !important;
}
}

Thanks so much, it froze them in place versus the scroll, is there a way to may it a drop down design, similar to the top left of the site home page menu?

On 9/2/2021 at 5:38 AM, Brigitte-Boardwalk said:

Thanks so much, it froze them in place versus the scroll, is there a way to may it a drop down design, similar to the top left of the site home page menu?

Add this to Code Injection > Footer

<!-- Change Category to Dropdown on Mobile - by @tuanphan -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>