Nav Bar with other color

Store Design
, , , ,

Topic summary

A user is attempting to recreate a custom navigation bar design for their Shopify store. The main requirements are:

Design Goals:

  • Position navigation menu items below the logo/search bar/login/cart section
  • Apply a specific background color (#956235) to the navigation bar
  • Extend the background color edge-to-edge across the site

Solution Provided:
A community member offered CSS code to achieve the desired layout, including:

  • Adjusting page width in Theme Settings > Layout (1500-1600px)
  • Custom CSS in assets/base.css to position the navigation menu absolutely
  • Styling for background colors and menu item alignment

Follow-up Adjustments:

  • Additional code provided to align menu items with the cart icon
  • Adjustments to increase logo size
  • Padding and width modifications for proper alignment

Status: Resolved. The user successfully implemented the custom navigation bar design with the help of provided CSS code snippets.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Group 105.jpg
Group 105.jpg1728×132 18.7 KB

Hello everyone, I’m trying to recreate this prototype menu, but I’m not getting it right, I’m leaving the current version below. I mainly wanted the navigation items to be below the logo/search bar/log in/cart, and for them to have a background of this color: #956235 and for this background to go all the way to the edges of the site. Can anyone help? Thanks

Captura de ecrã 2025-04-04 221417.png
Captura de ecrã 2025-04-04 221417.png1697×197 21.7 KB

2

can you please share the preview link and password( if any )

3

Hey! Yes of corse

Preview link: https://umhw5c-2w.myshopify.com/?_ab=0&_fd=0&_sc=1

Pass: mahpor

4

In your Shopify theme make sure your navigation block or a similar ul with links) is placed below the logo/search/login/cart block. You may need to wrap each block in a div with clear structure

There are more information you need to know.

1 Like
5

Hey go to customize>Theme settings> Layout and set the page width to 1500 to 1600px
then add this code in assets/base.css

nav.header__inline-menu {
    position: absolute;
    top: 75%;
    width: 100%;
    left: 0;
}

a.header__heading-link {
    background: rgb(255 144 76);
    border-radius: 10px;
    z-index: 1;
    position: relative;
}

.header__inline-menu li a {
    color: white;
}
.header-wrapper {
    background: white;
}

feel free to dm me if you need any help

SafeerAhmed_0-1743803923017.png
SafeerAhmed_0-1743803923017.png1864×153 8.5 KB

1 Like
6

Thank you very much! It helped a lot, but I don’t want to take advantage of it, can you help me just adjust the menu items to align with the “cart” and increase the size of the logo? I don’t understand much about code as you can see.

7

Sure add this too

.header__inline-menu ul.list-menu{
padding-right:50px;
}
.header-wrapper .page-width{
max-width:100%!important;
}
1 Like
8

It works!! Thank you so much man, you are a life saver!