2nd header section in Debut Theme?

[vickima]

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!!!

[ZestardTech]

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.

[vickima]

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!

[ZestardTech]

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.

[threed]

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!