Create a second header menu on mobile with clickable tabs

[1989streetwear]

Hello,

I would like to create a 2nd header menu with clickable tabs only on mobile with my main collections. Maybe sticky, maybe not.

Please check the image as a finish reference

website: 1989streetwear.com

pw: bet1989

[BSS-Commerce · Accepted solution]

Hi @1989streetwear 

- Is this the result you want?

We've tried inserting some HTML and CSS code into your site to help you create a second header. Please follow these steps:

- Step 1: Go to Online store => Themes => Edit code

- Step 2: Find the file "header.liquid", and paste the following code at the end of the closing header tag (</header>)

<!-- start bss fix -->
<div class="bss-header-2" style="display: none">
    <ul class="bss-header-ul">
        <li><a href="">WOMAN</a></li>
        <li>|</li>
        <li><a href="">MAN</a></li>
        <li>|</li>
        <li><a href="">UNISEX</a></li>
    </ul>
</div>

<style>
    .bss-header-2 {
        margin-left: 0;
        padding: 8px 0;
    }
    .bss-header-ul {
        list-style-type: none;
        display: flex;
        justify-content: space-around;
        padding: 0;
        color: #fff;
        margin: 0;
    }

    .bss-header-ul a {
        text-decoration: none;
        color: #fff;
    }
    @media only screen and (max-width: 992px) {
        .bss-header-2 {
            display: block !important;
        }
    }
</style>
<!-- end bss fix -->

A note is that the name of the collection you assigned as below, so you need to customize it with the name you want to display and add the URL to the href for them.

<li><a href="">WOMAN</a></li>
<li>|</li>
<li><a href="">MAN</a></li>
<li>|</li>
<li><a href="">UNISEX</a></li>

We hope that it will work for you.

[BSS-Commerce · Accepted solution]

Hi @1989streetwear 

Yes, we have edited it as you want:

You need to change the code like our previous comment and add a little CSS, from:

.bss-header-ul li.active {
    background-color: #fff;
}

to:

.bss-header-ul li.active {
    background-color: #fff;
    padding: 0 20px;
}

Editing on google chrome's DEV tool makes it difficult for us. So, if possible, please share your store access with us (we will send you a collaborator request) to edit the theme.

If you need further help, please let us know.

[BSS-Commerce · Accepted solution]

Hi @1989streetwear 

We accessed your theme and added some code:

- file header.liquid:

<!-- start bss fix -->
<div class="bss-header-2">
    <ul class="bss-header-ul">
        <li class="women"><a href="https://1989streetwear.com/collections/shop-women">WOMEN</a></li>
        <li>|</li>
        <li class="men"><a href="https://1989streetwear.com/collections/shop-men">MEN</a></li>
        <li>|</li>
        <li class="unisex"><a href="https://1989streetwear.com/collections/shop-unisex">UNISEX</a></li>
    </ul>
</div>

<style>
    .bss-header-2 {
        display: none;
        margin-left: 0;
        padding: 0 15px;
    }
    .bss-header-ul {
        list-style-type: none;
        display: flex;
        justify-content: space-around;
        padding: 0;
        color: #36454f;
        margin: 0;
    }

    .bss-header-ul li.active {
        background-color: #fff;
        padding: 0 20px;
    }

    .bss-header-ul li.active a {
        color: #000;
    }
                          
    .bss-header-ul a {
        text-decoration: none;
        color: #fff;
        font-weight: bold;
    }
  
    @media only screen and (max-width: 992px) {
        .bss-header-2 {
            display: block;
        }
    }
</style>
<!-- end bss fix -->

- file theme.liquid:

<!-- start bss fix -->
<script type="text/javascript">
    const url = new URL(window.location.href);
    let { pathname } = url;
    pathname = pathname.split("/");
    pathname = pathname[2];
    const liElement = document.querySelectorAll(".bss-header-ul li");
    if (liElement && liElement.length > 0) {
        liElement.forEach((item) => {
            if (pathname && pathname === item.classList.value) {
                item.classList.add("active");
            }
        });
    }

    const detailMenu = document.querySelector('#Details-menu-drawer-container');
    const headerBSS = document.querySelector('.bss-header-2');

    detailMenu.addEventListener('click', function () {
        headerBSS.classList.toggle('bss-header-2-disactive');
    });
</script>
<!-- end bss fix -->

- file base.css:

/* start bss fix */
.bss-header-2-disactive {
  display: none !important;
}
/* end bss fix */

- Here is the result on your site:

+ When opening the table menu, detail header that we added is hidden:

We hope that it fits your requirement.

[BSS-Commerce · Accepted solution]

Hi @1989streetwear 

- Is this the result you want?

We've tried inserting some HTML and CSS code into your site to help you create a second header. Please follow these steps:

- Step 1: Go to Online store => Themes => Edit code

- Step 2: Find the file "header.liquid", and paste the following code at the end of the closing header tag (</header>)

<!-- start bss fix -->
<div class="bss-header-2" style="display: none">
    <ul class="bss-header-ul">
        <li><a href="">WOMAN</a></li>
        <li>|</li>
        <li><a href="">MAN</a></li>
        <li>|</li>
        <li><a href="">UNISEX</a></li>
    </ul>
</div>

<style>
    .bss-header-2 {
        margin-left: 0;
        padding: 8px 0;
    }
    .bss-header-ul {
        list-style-type: none;
        display: flex;
        justify-content: space-around;
        padding: 0;
        color: #fff;
        margin: 0;
    }

    .bss-header-ul a {
        text-decoration: none;
        color: #fff;
    }
    @media only screen and (max-width: 992px) {
        .bss-header-2 {
            display: block !important;
        }
    }
</style>
<!-- end bss fix -->

A note is that the name of the collection you assigned as below, so you need to customize it with the name you want to display and add the URL to the href for them.

<li><a href="">WOMAN</a></li>
<li>|</li>
<li><a href="">MAN</a></li>
<li>|</li>
<li><a href="">UNISEX</a></li>

We hope that it will work for you.

[1989streetwear]

Thank you so much @BSS-Commerce I really appreciate it! It looks great.

Although is there any chance I can get the tab coloured when the collection is selected and in action? Something like this? 

[BSS-Commerce]

Hi @1989streetwear 

- Is this the result you expect?

- To activate the current tab, you need to change the HTML, CSS code and add a bit of Javascript code to your theme. Please follow these steps:

+ Step 1: Edit the code you inserted after the </header> tag, don't forget to add href for each collection.

<!-- start bss fix -->
<div class="bss-header-2" style="display: none">
    <ul class="bss-header-ul">
        <li class="women"><a href="">WOMAN</a></li>
        <li>|</li>
        <li class="men"><a href="">MEN</a></li>
        <li>|</li>
        <li class="unisex"><a href="">UNISEX</a></li>
    </ul>
</div>

<style>
    .bss-header-2 {
        margin-left: 0;
    }
    .bss-header-ul {
        list-style-type: none;
        display: flex;
        justify-content: space-around;
        padding: 0;
        color: #fff;
        margin: 0;
    }

    .bss-header-ul li.active {
        background-color: #fff;
    }

    .bss-header-ul li.active a {
        color: #000;
    }

    .bss-header-ul a {
        text-decoration: none;
        color: #fff;
        font-weight: bold;
    }
    @media only screen and (max-width: 992px) {
        .bss-header-2 {
            display: block !important;
        }
    }
</style>
<!-- end bss fix -->

+ Step 2: Insert the following code at the end of the theme.js. file:

<!-- start bss fix -->
<script type="text/javascript">
    const url = new URL(window.location.href);
    let { pathname } = url;
    pathname = pathname.split("/");
    pathname = pathname[2];
    const liElement = document.querySelectorAll(".bss-header-ul li");
    if (liElement && liElement.length > 0) {
        liElement.forEach((item) => {
            if (pathname && pathname === item.classList.value) {
                item.classList.add("active");
            }
        });
    }
</script>

+ The code above will check if the pathname of the URL is equal to the collection class we edited, then add the "active" class to that item. This will make your collection look active.

We hope that it will work for you.

[1989streetwear]

@BSS-Commerce No, not really. I wanted to get something like this

[BSS-Commerce · Accepted solution]

Hi @1989streetwear 

Yes, we have edited it as you want:

You need to change the code like our previous comment and add a little CSS, from:

.bss-header-ul li.active {
    background-color: #fff;
}

to:

.bss-header-ul li.active {
    background-color: #fff;
    padding: 0 20px;
}

Editing on google chrome's DEV tool makes it difficult for us. So, if possible, please share your store access with us (we will send you a collaborator request) to edit the theme.

If you need further help, please let us know.

[1989streetwear]

Hi @BSS-Commerce How can I give you access to edit the theme?

If I do could you please make it like this? 

And also could you please remove the quick menu when the burger/drawer menu is open on mobile? 

THANK YOU

[BSS-Commerce]

@1989streetwear  we have just sent you a collaborator request to Shopify Admin => Settings => Users and Permissions => Collaborators => BSS Commerce to have access and check your settings. After accepting the request, please kindly keep me updated. Thanks so much!

[1989streetwear]

Hi @BSS-Commerce  I’ve accepted your collaborator request with “Theme” as a permission. Is that enough?

Looking forward to hearing from you 

[BSS-Commerce · Accepted solution]

Hi @1989streetwear 

We accessed your theme and added some code:

- file header.liquid:

<!-- start bss fix -->
<div class="bss-header-2">
    <ul class="bss-header-ul">
        <li class="women"><a href="https://1989streetwear.com/collections/shop-women">WOMEN</a></li>
        <li>|</li>
        <li class="men"><a href="https://1989streetwear.com/collections/shop-men">MEN</a></li>
        <li>|</li>
        <li class="unisex"><a href="https://1989streetwear.com/collections/shop-unisex">UNISEX</a></li>
    </ul>
</div>

<style>
    .bss-header-2 {
        display: none;
        margin-left: 0;
        padding: 0 15px;
    }
    .bss-header-ul {
        list-style-type: none;
        display: flex;
        justify-content: space-around;
        padding: 0;
        color: #36454f;
        margin: 0;
    }

    .bss-header-ul li.active {
        background-color: #fff;
        padding: 0 20px;
    }

    .bss-header-ul li.active a {
        color: #000;
    }
                          
    .bss-header-ul a {
        text-decoration: none;
        color: #fff;
        font-weight: bold;
    }
  
    @media only screen and (max-width: 992px) {
        .bss-header-2 {
            display: block;
        }
    }
</style>
<!-- end bss fix -->

- file theme.liquid:

<!-- start bss fix -->
<script type="text/javascript">
    const url = new URL(window.location.href);
    let { pathname } = url;
    pathname = pathname.split("/");
    pathname = pathname[2];
    const liElement = document.querySelectorAll(".bss-header-ul li");
    if (liElement && liElement.length > 0) {
        liElement.forEach((item) => {
            if (pathname && pathname === item.classList.value) {
                item.classList.add("active");
            }
        });
    }

    const detailMenu = document.querySelector('#Details-menu-drawer-container');
    const headerBSS = document.querySelector('.bss-header-2');

    detailMenu.addEventListener('click', function () {
        headerBSS.classList.toggle('bss-header-2-disactive');
    });
</script>
<!-- end bss fix -->

- file base.css:

/* start bss fix */
.bss-header-2-disactive {
  display: none !important;
}
/* end bss fix */

- Here is the result on your site:

+ When opening the table menu, detail header that we added is hidden:

We hope that it fits your requirement.

[1989streetwear]

Hi @BSS-Commerce Thank you so much, this is really looking great.

Although there are a few things I would love to fix and it'd be really great if you could still help me:

1) when each tab is active I would like it to be fully coloured between the " | " like this picture and the tab items to not lose their position and size. that is probably due to the coloured padding, I will upload a video for reference.

I AM TRYING TO FIX THIS WITH PADDING AND MARGIN pixels BUT IT'S OBVIOUSLY DIFFERENT ON DIFFERENT DEVICES. I need to find another way that would work similarly on different devices.

2) in the drawer/burger menu, the quick menu disappears but there is now a gap between the logo and "women", the first item.  

(( GAP FIXED WITH     .menu-drawer__navigation { padding: 2.6rem 0 !important; } ))

3) if you click below the logo, where the quick menu underneath is supposed to be, the quick menu reappears again.

Please let me know if this made sense and if you could help me

 VIDEO REFERENCE:

https://drive.google.com/file/d/1536pDox8tLT6K6yL8F0vuM422VOYUbBf/view?usp=sharing

[BSS-Commerce · Accepted solution]

Hi @1989streetwear 

We fixed the JS code added in the file "theme.liquid":

const toggleIcon = document.querySelector('.header__icon.header__icon--menu');
const headerBSS = document.querySelector('.bss-header-2');

toggleIcon.addEventListener('click', function () {
    headerBSS.classList.toggle('bss-header-2-disactive');
});

Please double-check to see if it is correct. Also, you can set the background color of the book as you want.

Please let us know if it works for you by giving us likes or marking them as solutions.

[swapnilgupta]

Hi @BSS-Commerce ,

My website URL : www.babyworksbyswapnil.com

Can you PLEASE PLEASE help me achieve the same thing ?

I want my website's mobile version to have Header menu like desktop version ( IN ONE SINGLE ROW instead of Hamburger View )

I would really be obliged if you could help me!

Thanks in advance