Need Help with Header Layout Customization for Impulse Theme on Mobile and Desktop

[Brianvk]

Hello Shopify Community,

I’m reaching out for some assistance with customizing the header layout of my store using the Impulse theme (version 7.4.0). My goal is to achieve a specific layout for the logo and menu on both mobile and desktop views, but I’m encountering some challenges.

Store Link: https://792jzxvfy7tgvib0-79294071117.shopifypreview.com

• Desired Outcome:

  • Mobile View: I’m aiming for a “Logo center menu split” layout. Ideally, the logo should be centered with the navigation menu split to either side of the logo.
  • Desktop View: My preference is for a “Logo left, menu center” layout. This means having the logo positioned on the left and the navigation menu centered across the header.

Challenges Faced: I have attempted to modify the theme settings and add custom CSS to achieve these layouts, but without success. My changes either do not apply or do not produce the desired effect, especially when trying to differentiate between mobile and desktop views.

Request for Assistance: I’m seeking guidance or a code snippet that could help me implement these specific header layouts for mobile and desktop views within the Impulse theme. If anyone has experience with similar adjustments or can offer insights into how to correctly apply such changes without affecting the theme’s responsiveness, I would greatly appreciate it.

Thank you in advance for your time and help. Any suggestions or solutions would be incredibly helpful as I work to improve the user experience and aesthetic of my store.

[ThePrimeWeb]

Hey @Brianvk ,

The code below will work your desktop request. The mobile request is not a feasible solution, there isn’t enough space on a mobile phone to display the menu along with the logo. The mobile should remain a seperate slide out menu. Is it doable? Of course, but your header will make the whole site look broken.

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

[Brianvk]

Thank you so much for your help and the code you provided! I’ve tried it out, and it works perfectly for the desktop version, exactly as I was hoping. I also really appreciate your advice regarding the mobile view; it helped me see the design from a more practical perspective.

Thanks again!