How do I move the navigation under my logo in the header

Store Design

Topic summary

Goal: reposition the main navigation below the brand logo and center it in the header.

  • Initial guidance: Feasible but not a quick paste-in; typically requires edits to Shopify Liquid (templating language) and CSS to work across desktop and mobile.

  • Practical solution shared: Steps to add Custom CSS via Online Store > Customize > Theme settings > Custom CSS. The CSS (desktop ≥768px) adds bottom padding to the header, absolutely positions the inline desktop menu beneath the logo, sets full width, and evenly spaces/centers menu items.

  • Outcome: Original poster confirmed the CSS works. New request: add a green background strip behind the menu (no solution provided yet).

  • New issue: Another user on the Impact theme reports the CSS has no effect, even when added to theme.css or Custom CSS. They seek help.

  • Follow-up: A helper asked for the store URL, password (if enabled), and details to diagnose—suggesting theme-specific differences may require tailored code.

  • Status: Placement resolved for the original store; styling enhancement (green strip) pending. Impact theme compatibility remains open, awaiting site details.

Summarized with AI on December 10. AI used: gpt-5.
1

Hi, I am looking to move my navigation header below my brand logo (to be centered). Similar to the below:

hem0903_0-1730786696781.png

Please help

hem0903_1-1730786696278.png

My store url - https://784221-79.myshopify.com/

2

@hem0903

Yes, it’s definitely possible to position your navigation header below the brand logo, centered as requested. However, this change will require adjustments to your theme’s Liquid code to achieve the desired layout.

If you’d like to proceed, please let me know, and I can initiate a collaboration request to implement this for you.

3

Can you please send code here I’ll paste in liquid theme

4

@hem0903 I’m sorry, but implementing this change isn’t as simple as adding a few lines of code. Repositioning and centering the navigation below the logo involves multiple adjustments to the Liquid, CSS in your theme. This will take time and requires a more in-depth approach to ensure it displays correctly on both desktop and mobile devices.

5

Hi @hem0903

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

@media screen and (min-width: 768px){
header.main-header.main-header__container .main-header__wrapper {
    padding-bottom: 60px !important;
}
header.main-header.main-header__container .main-header__wrapper nav.header__inline-menu.desktop-only {
    position: absolute !important;
    bottom: 10%;
    left: 25%;
    background: white;
    width: 100%;
}
header.main-header.main-header__container .main-header__wrapper nav.header__inline-menu.desktop-only > ul.list-unstyled {
    width: 50% !important;
    justify-content: space-evenly;
}
}

image (6).png
image (6).png1733×804 224 KB

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team.

1 Like
6

Hi, thankyou so much this worked, how can I add strip behind the menu in green colour

hem0903_0-1730977385466.png

7

Hi Daisy.

The result you posted looks exactly like what I’m trying to achieve. Yet the code does nothing for my site. I’ve tried pasting it into theme.css, and also under custom css field in sections. I’m using the Impact theme. Any help would be appreciated!

1 Like
8

Hey @HaloFox

Let me carry this from here, share your store URL and Password if enabled. Also tell me properly about your problem and I’ll sort it out.

Cheers,
Moeed