Taste Theme custom mobile heading

Solved

Taste Theme custom mobile heading

blakelyhiner
Shopify Partner
17 1 4

Hi, I'm hoping to have my mobile heading look like this, with no hamburger menu, logo adjust left, and stacked navigation text. Any help in the right direction is welcome, thank you!

 

url: https://dunes-fyi.myshopify.com/

 

Screenshot 2024-09-23 at 1.43.23 PM.png

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
9527 1913 1947

This is an accepted solution.

Hi @blakelyhiner 

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

 

@media (max-width: 749px) {
.header { 
    display: flex !important; 
}
header-drawer { 
    display: none !important; 
}
nav.header__inline-menu { 
    display: block !Important; 
    margin-left: 1rem !important; 
    margin-right: 0 !important;
}
}

Screenshot 2024-09-24 at 10.45.06.png

 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
9527 1913 1947

This is an accepted solution.

Hi @blakelyhiner 

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

 

@media (max-width: 749px) {
.header { 
    display: flex !important; 
}
header-drawer { 
    display: none !important; 
}
nav.header__inline-menu { 
    display: block !Important; 
    margin-left: 1rem !important; 
    margin-right: 0 !important;
}
}

Screenshot 2024-09-24 at 10.45.06.png

 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

blakelyhiner
Shopify Partner
17 1 4

Thank you! Not getting the same results, can you take a look? Also would like logo to not shrink quite that small if possible.

 

Screenshot 2024-09-24 at 7.50.17 AM.png

blakelyhiner
Shopify Partner
17 1 4

Hi again! Hoping you can help me troubleshoot, this same code is not giving those results for me unfortunately. 

blakelyhiner
Shopify Partner
17 1 4

Weird, i moved it above a few lines of custom CSS and it worked, but i'd love to see the logo not shrink so much, if possible! Thank you in advance