How do I move the navigation bar below the header?

Store Design

Topic summary

A user wants to relocate the navigation bar in Shopify’s Debut theme from inside the header to below it, and add background color.

Proposed Solution:

  • Remove navigation code from header.liquid (around line 105)
  • Re-insert the code into theme.liquid after {% section 'header' %}
  • Float right-side icons using style="float:right" in the header div (around line 110)
  • Add background-color property to header divs for color customization

Current Status:
The solution partially works for one user, but issues remain:

  • Right-side icons are positioned too high in the corner
  • Unclear where to specify the background color value for the navigation bar and how to change text color

The discussion remains open with unresolved styling questions.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

I have the debut theme and I’d like to move the navigation bar from ‘inside’ the header to just below it. I’d also like to make it coloured. Is there any way to do this?

Store: analoguestudiodesigns.co.uk

2

Any ideas?

3

It’s a little difficult to move the header section. It and the footer are static sections. The other sections on the page are dynamic and can be rearranged in the site customization. So you probably need to change the code.
You can try this:

If you go to the header.liquid file in the sections folder, you can remove the navigation bar by deleting this code (should be around line 105):
{% if section.settings.align_logo == ‘left’ %}

{% include 'site-nav', linklist: section.settings.main_linklist %} {% endif %}

Then add the code above back into the theme.liquid file after the line:

{% section ‘header’ %}

something like this:

{% section ‘header’ %}

{% include 'site-nav', linklist: 'main-menu' %}

in the header.liquid file you may need to move the right side icons over by floating them to the right at around line 110

<div style="float:right"; class="grid__item ......> <p>To change the color, add background-color to the header divs in header.liquid file</p> <p>It’s probably not the best way but it might work.</p>
4

Hello, This worked perfect for me besides one thing. I’m just struggling with the right icons, I’ve pushed them back across but they are sitting a little high in the corner, Also looking to add colour behind my main menu navigation and change the text colour. I looked to add colour to background like you had advised but can’t see where to specify the colour