How can I configure my website so that on all my pages, the menu + search and then the cart are positioned on each side of the logo? I want them also to be in line with eachother.
Website: https://0d37d1-2.myshopify.com/
Topic summary
A user seeks help customizing the header layout on their Shopify Taste theme to center the logo between menu/search elements and position the cart on the right side.
Initial Solution:
- The theme already supports this layout by default through Online Store > Themes > Customize > Header settings.
Subsequent Issues Addressed:
- Homepage logo visibility: Custom code provided to hide the logo specifically on the index page using Liquid conditionals.
- Floating logo sizing: CSS code shared to adjust logo height/fill screen space.
- Collection name alignment: Code snippet offered to left-align collection names on the homepage.
- Contact form container width: CSS solution provided to add right margin and reduce container size.
- Duplicate mobile search icons: Code added to hide the left search icon on mobile view.
- Size guide popup title: Additional code removes the page title when size guide popup appears.
Ongoing Problem:
- Video autoplay code works inconsistently across different computers/browsers despite including
playsinline,muted, andautoplayattributes. The user seeks a more reliable solution for homepage and about page videos.
The discussion remains open with the video playback issue unresolved.
Hi @emilyyy
Please provide password protection to view your store.
SHOPIFY2023
Hi @emilyyy
Your theme has that layout by default, just go to your Online store > Themes > Customize > Header
@Dan-From-Ryviu Hi, thank you! wow i missed that. i changed it but now i see that the logo on the home page shows up even though i had coded it to not show up in the header on the home page, any idea on why that is?
Please change the setting and add this code to your theme.liquid file after to hide logo in header
{% if template == 'index' %}
{% endif %}
1 Like
@Dan-From-Ryviu thank you so much, any ideas on how to make my floating logo to fill the screen? i want it super large but when i adjust the values only the height seems to change
Add this code to your theme.liquid file
@Dan-From-Ryviu hi, ive tried fixing this but i cant get the collection names to be left aligned, any way to be able to do this on my home page?
Use this code to do that.
{% if template == 'index' %}
{% endif %}
@Dan-From-Ryviu any way to target just this contact form container and make it smaller? like maybe a right side margin?
Please use this code.
@Dan-From-Ryviu how do i get rid of the two search icons on mobile view?
Which icon do you want to hide? Left or right?
@Dan-From-Ryviu Left one. im also struggling to get rid of the page names on my size guides, i do not want the title when the popup comes up
Please add this code to your theme.liquid file to remove the search icon on the left on the mobile and remove size guides title
@Dan-From-Ryviu On my computer this code works but on other peoples its not always relaible, any reason why or how i could fix it? My Home page and about page both have videos and ive tried to mute thinking that was the issue but im still running into problems.
video { width: 100%; height: auto; display: block; margin: 0 auto; }