2nd header section in Debut Theme?

vickima
Tourist
5 0 2

Hello,

 

Can some tell me how to add a 2nd header section in Debut Theme?  I want one for the logo and a separate one for the menu.

Thank you!!!

0 Likes
Pallavi
Shopify Expert
1269 174 209

Hello There, 

 

Do you want to achieve design which  is related to the given design then kindly let me know I can assist you in achieving it.

new-faq.png

 

 

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
vickima
Tourist
5 0 2

Somewhat. I want one for the logo and one for the menu. I am hoping this will also make the header sections smaller as it is too big right now. 

 

Thank you!

 

 

0 Likes
Pallavi
Shopify Expert
1269 174 209

So, I can assist you in doing that by removing the search and the other sections and showing the logo on the top header and menus in the below header. 

 

So, kindly let us know on it so that I can proceed further on it.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
threed
Explorer
46 7 12

Late reply, but here's an idea for anyone else who wants a public (and free!) suggestion.

In case you still need this answer, or if other people are looking for this answer, I think you can add a second navigation menu this way.

This works within the Supply theme, but I believe this or something very similar will also work for the Debut theme.

 

Some caveats:

  • This is a hard-coded menu. You will have to use HTML to build it, and then you can style it within your theme.scss.liquid.
  • This does not show up on mobile pages, but I imagine you can insert this snippet in a similar way under your "mobile-nav.liquid".

 

Here are the steps:

  1. Log in to your Shopify Admin. Click on "Online Store" in the sidebar, then click "Themes". Under the dropdown, click "Edit Code".
  2. Click "Add a new snippet". Name this snippet something like "extra-nav.liquid".
  3. Go to your site-nav.liquid.
  4. Skip to the very end and add this code:

 

{% include 'extra-nav.liquid' %}​

 

This code is telling the page to insert your new navigation bar right after the contents of your original navigation bar.


This should work with your code; it works with mine. You might make some minor changes if it doesn't. Now you have added a new navigation bar! Only thing is, it's empty. You must use HTML to create the content, and CSS to style the content.

I can give you a little example of how you might want to code your navigation.

 

Add this to extra-nav.liquid:

 

<div class="navbar">
<a href="(insert url 1 here)">Link 1</a>
<a href="(insert url 2 here)">Link 2</a>
<a href="(insert url 3 here)">Link 3</a>
</div>

 

You should now see a menu that looks pretty close to your original menu, only that it has these links in there instead.

 

There are a lot of ways you can customize this navigation bar. If you're looking to make a mega menu or do more, I recommend reading up on flexboxes and other CSS styling.

Hope this helps!

If I was able to help you, please help me by liking my comment and marking it as an accepted solution.
If you're feeling extra nice, you can throw a coffee at me through Venmo @scoducks :)

I am open to new business partnerships.
0 Likes