Help needed with dawn theme design/layout please

[leec32]

Hello 

So for days now i have been messing around testing and searching for tutorials to try get my dawn theme to look like the image below but getting nowhere fast, could any of you kind people help me out with the coding please before i just give up ha ha 

Top image is mine and below is how i want it to look, is this possible ?

Thanks 

[leec32]

Its mainly the inline menu bar, i followed this tutorial

 https://community.shopify.com/c/shopify-design/dawn-or-refresh-theme-header-inline-menu/td-p/1848179

but i cant get the colour the fill the full page and i also want the search bar box in there the like the example of the site in the picture 

Shopping cart/number items and price inline with my logo to the right then account login tip right under my announcement bar 

[rajweb]

Hey @leec32 ,

To achieve this look in the Dawn theme, here are some key steps and code adjustments you can try:

Follow these steps:

1. Full-Width Background Color:

-To create a full-width pink background for the navigation menu bar, use the following CSS:

.header-wrapper, .menu-bar {
    background-color: #f5c6c6; /* Use the pink color you prefer */
    width: 100%;
}

2. Inline Layout for Logo, Search Bar, and Cart/Account Icons:

-Adjust the header-wrapper to display these items inline:

.header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px; /* Adjust padding for spacing */
}
.site-header__logo {
    margin-right: auto;
}
.header__icons, .header__search-bar {
    display: flex;
    align-items: center;
}

3. Search Bar Styling:

-Add the search bar HTML and CSS to style it similarly to the image.

<div class="header__search-bar">
    <input type="search" placeholder="Search" aria-label="Search" />
</div>

.header__search-bar input {
    border-radius: 20px;
    padding: 5px 15px;
    border: 1px solid #ccc;
    max-width: 200px;
    margin-right: 20px;
}

4. Menu Bar Styling:

Set up the navigation menu items to be inline and styled with a pink background:

.menu-bar {
    display: flex;
    justify-content: center;
    background-color: #f5c6c6; /* Match background color */
    padding: 10px 0;
}
.menu-bar a {
    color: #000;
    text-transform: uppercase;
    padding: 0 15px;
    font-weight: bold;
    text-decoration: none;
}

5. Cart and Account Icons Alignment:

Place the cart and account icons to the right of the search bar:

.header__icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

6. Announcement Bar;

Style the announcement bar at the top:

.announcement-bar {
    background-color: #f7dede; /* Choose a lighter pink shade */
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
}

Please test this CSS on your store and let me know if you need more adjustments to get the exact look you want.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[leec32]

Hi, thank you for the help and suggestions.

I am doing one at a time first so please bear with me

.header-wrapper, .menu-bar { background-color: #f5c6c6; /* Use the pink color you prefer */ width: 100%; }

This one causes offset on menu buttons and colours the full header

[leec32]

by adding this line of code in  it does center the menu buttons but still keeps the full header all pink 

text-align: center;

[rajweb · Accepted solution]

Hey @leec32 ,

Thank you for the update and the screenshot. It looks like the  .header-wrapper and .menu-bar styles may be causing unintended effects by coloring the entire header. To address this and ensure only the menu bar itself has the pink background without affecting other sections, let’s refine the CSS as follows:

1. Separate Background Colors for Different Sections:

We’ll separate the background color of the menu bar from the rest of the header.

.header-wrapper {
    background-color: #ffffff; /* Set to white or transparent to prevent full pink header */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.menu-bar {
    background-color: #f5c6c6; /* Pink background only for the menu bar */
    text-align: center;
    padding: 10px 0;
}

2. Centering the Menu Items:

To keep the menu items centered in the .menu-bar, use display: inline-block for each item and text-align:center on the .menu-bar itself.

.menu-bar {
    display: flex;
    justify-content: center;
    background-color: #f5c6c6;
    padding: 10px 0;
    width: 100%;
}

.menu-bar a {
    display: inline-block;
    padding: 0 15px;
    color: #000;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
}

3. Adjusting Other Header Elements:

Ensure other header elements, like the logo, search bar, and cart, align correctly without being impacted by the menu bar’s background color. For this, ensure .header-wrapper wraps all items except the .menu-bar, which should be placed right below.

<div class="header-wrapper">
    <!-- Logo and other icons go here -->
    <div class="site-header__logo">
        <!-- Logo Image -->
    </div>
    <div class="header__search-bar">
        <input type="search" placeholder="Search" aria-label="Search" />
    </div>
    <div class="header__icons">
        <!-- Cart and other icons -->
    </div>
</div>
<div class="menu-bar">
    <!-- Navigation Links -->
    <a href="#">Home</a>
    <a href="#">Gel Polish</a>
    <a href="#">Builder Gel</a>
    <!-- Add other links as needed -->
</div>

This approach should keep the menu bar pink while keeping the rest of the header as a separate element. If this gives you the look you want, perfect! Otherwise, feel free to email me to discuss this in more detail. I’d be happy to assist with this or any other website or Shopify-related issues you have.

Best Regards,

Rajat Sharma

[leec32]

Hi @rajweb 

Thank you, i tried some of the codings but didn't quite understand it tbh and it didn't work for me, anyway, I had a play around and I am close now, this is the coding I have in base.css 

@media screen and (min-width: 750px){
.header.page-width {
padding: 0 5rem;
max-width: 100% !important;

}
.header-wrapper .page-width {
max-width: unset !important;
padding: 10px 0 0 !important;
}
.header__inline-menu {
width: 100% !important;
text-align: center;
background: lightpink !important;
}
.header__inline-menu .header__icons {
padding-right: 5rem !important;
}
.header__inline-menu .header__search {
padding-left: 5rem !important;
}
.header__inline-menu .menu-drawer-container {
padding-left: 5rem !important;
}
.header__search {
display: none!important;
}
.header {
font-family: 'sans-serif' !important;
}
}

As you can see in the picture I have attached it has slightly moved my logo to the left and also the search bar and cart/chekout to the right and the inline menu bar pink is not quite full width ofscreen, I have tried changing the padding settings but nothing works, can you see anything in that code that I have done wrong ? thanks 

[leec32]

Sorted, came across this thread by luck 

https://community.shopify.com/c/shopify-design/dawn-theme-inline-menu-width/m-p/2509141#M658712

[rajweb]

@leec32 ,

I’m glad to hear that you found a solution! It seems like the thread you came across provided some useful insights for your issue. If you encounter any more problems or need further assistance with your store, don’t hesitate to reach out again—I’m always happy to help! I’d really appreciate it if you could like my replies and mark them as the solution. Your support would mean a lot and help enhance my profile—thank you!😊

[leec32]

Thanks @rajweb really appreciate your time and help, i have a few more little tweaks i need help with, i will post later today 

[rajweb]

Thanks, @leec32 ! I appreciate your kind words. Please feel free to contact me via email, and we can discuss the details further. I’m happy to assist you with any additional tweaks you need!