Solved

Hamburger Menu On Desktop, Stiletto Theme

martujv
Explorer
93 1 23

Hello!

 

I'm trying to make my header look the same on both mobile and desktop. To do this, I need the header on my desktop to look like this:

Captura de pantalla 2024-04-05 a las 12.58.30.png

(Don't worry about the different icons, the important thing is just the menu icon on the right)

 

This way, the menu, instead of being "with words", would just be a menu icon that opens when you click on it, just like on the mobile version.

 

It would have to be in the far right, just like on the mobile.

 

My website is https://winnerofficial.com and my theme is Stiletto.

Accepted Solution (1)

theycallmemakka
Shopify Partner
1499 337 362

This is an accepted solution.

 

Hi @martujv ,

 

I have written custom CSS to make this possible.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.header__row.header__row-mobile {
    display: flex!important;
}

.header__row.header__row-desktop.lower {
    display: none!important;
}

.header__row.header__row-desktop.upper {
    display: none!important;
}
</style>

Result:

theycallmemakka_0-1712332947221.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 3 (3)

theycallmemakka
Shopify Partner
1499 337 362

This is an accepted solution.

 

Hi @martujv ,

 

I have written custom CSS to make this possible.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.header__row.header__row-mobile {
    display: flex!important;
}

.header__row.header__row-desktop.lower {
    display: none!important;
}

.header__row.header__row-desktop.upper {
    display: none!important;
}
</style>

Result:

theycallmemakka_0-1712332947221.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

martujv
Explorer
93 1 23

It worked! Thank you!

martujv
Explorer
93 1 23

Is there any way to remove the white lines that appear when you click on the menu icon? Both on mobile and desktop.

 

I mean this lines:

Captura de pantalla 2024-04-05 a las 18.56.52.png