Nav bar header design

[kayodekevin]

Hi all, I am trying to replicate this navigation bar. With the logo on top with a white background and the menu bar background colour black. So far the codes I have seen don't seem to be working. Would love to know how this can be done. Would appreciate some help with this.

[TheScriptFlow]

Could you please provide your store url so that I provide you solution code.

[kayodekevin]

Hi, the url is: https://rz591a-jx.myshopify.com/?_ab=0&_fd=0&_sc=1

[namphan]

Hi @kayodekevin,

What theme are you using? please send me the store link, I will check it for you

[kayodekevin]

Hi, thank you for your reply! I am using the dawn theme, https://rz591a-jx.myshopify.com/?_ab=0&_fd=0&_sc=1 

[namphan]

Hi @kayodekevin,

Please go to Customize > Header > Desktop logo position > Top center.

[kayodekevin]

Hi, I have already done this but i would like the bottom part where the menu items are to have a solid black background with white text whilst the top part with the logo remains white.

[namphan]

Hi @kayodekevin,

Please send me the store password, I will check it

[kayodekevin]

Hi Namphan, thank you I will send it now! thuflo

[DaisyVo]

Hi @kayodekevin 

Could you please share the entry password here as well: https://prnt.sc/2Oa1vgbtTcnZ

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.

[kayodekevin]

Hi, thank you! I will attach it now:

https://rz591a-jx.myshopify.com/?_ab=0&_fd=0&_sc=1#
 thuflo

[Made4uo-Ribe]

Thanks for the info, try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (min-width: 989px){
nav.header__inline-menu {
    background: black;
    display: flex;
    max-width: 100%;
    width: 100%;
    justify-content: center;
}
nav.header__inline-menu span {
    color: white !important;
}

header.header.header--top-center.header--mobile-center.page-width {
    max-width: 100%;
    padding: 0;
}

.header__search {
    padding-left: 5rem;
}

.header__icons {
    padding-right: 5rem;
}
}

• And Save.
• Result:
• 

  Let me know if you like to remove the border below the nav.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[kayodekevin]

Hi, mine still doesn't seem to be changing! i added it to the base.css I will show you below, but thank you for taking the time to help!

[Made4uo-Ribe]

Did you add it? I didnt see the code in your base.css. Please, save after pasting. Or you can also paste it on the theme.liquid. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media only screen and (min-width: 989px){
nav.header__inline-menu {
    background: black;
    display: flex;
    max-width: 100%;
    width: 100%;
    justify-content: center;
}
nav.header__inline-menu span {
    color: white !important;
}

header.header.header--top-center.header--mobile-center.page-width {
    max-width: 100%;
    padding: 0;
}

.header__search {
    padding-left: 5rem;
}

.header__icons {
    padding-right: 5rem;
}
}
</style>

• And Save. 
• The refresh the preview. 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[kayodekevin]

I will try it in theme.liquid and see if that works. Thank you, I will be back in a few

[kayodekevin]

Okay so it seems that it worked in the theme.liquid! Thank you! Could i just ask how to get rid of that white border? and also is there a way to get the arrow icon to also be white as it has now been hidden since its also black. Appreciate your help

[Made4uo-Ribe · Accepted solution]

Yes, for arrow and border. Replace on this code. 

<style>
@media only screen and (min-width: 989px){
nav.header__inline-menu {
    background: black;
    display: flex;
    max-width: 100%;
    width: 100%;
    justify-content: center;
}
nav.header__inline-menu span {
    color: white !important;
}

header.header.header--top-center.header--mobile-center.page-width {
    max-width: 100%;
    padding: 0;
}

.header__search {
    padding-left: 5rem;
}

.header__icons {
    padding-right: 5rem;
}
.header__menu-item .icon-caret {
    color: white !important;
}
.header-wrapper--border-bottom {
    border-bottom: none !important;
}
}
</style>

And Save. 

Result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[kayodekevin]

Thank you so much for your help! That worked perfectly, I have been looking everywhere but really grateful for your help! 🙂 Have a great day and thanks again!

[Made4uo-Ribe]

Welcome! Would you mind giving a thumbs up? It would greatly help me. Thank you!

[DaisyVo]

Hi @kayodekevin 

Regarding the design shared in the sample image, I noticed that it comprises two separate sections. However, in their store, the menu is currently placed within a single header block.

Additionally, the menu's width is limited and does not span the full width of the header. As a result, if we change the background color to black, only a portion of the header will appear black, as shown in the example.

If this is acceptable, I can provide the code for implementation: 

@media screen and (min-width: 1024px){
nav.header__inline-menu {
    background: black !important;
}
nav.header__inline-menu * {
    color: white !important;
}
}

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

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[kayodekevin]

Hi Daisy, that worked! but is there no way of getting it to be full length? is it the Dawn theme thats the problem? is so would another free theme be a better choice?

[kayodekevin]

Just wanted to say thank you for your help Daisy! Appreciate the time and effort 🙂

[Made4uo-Ribe]

Hi @kayodekevin 

Please, share your store URL with the password. Thanks!

[kayodekevin]

Hi, thank you! I will attach it now:

https://rz591a-jx.myshopify.com/?_ab=0&_fd=0&_sc=1# 

thuflo

[namphan]

Hi @kayodekevin,

Please send me the code of header.liquid file, I will check it for you

[Made4uo-Ribe]

Hi @kayodekevin 

This is for the footer. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file after the last closing bracket }, add the following CSS code:

@media only screen and (min-width: 989px){
.footer__content-top.page-width {
    display: flex;
    width: 100%;
}

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    flex: auto;
}

.footer-block--newsletter {
    display: flex;
    align-items: flex-start !important;
    margin-top: 0 !important;
    
}
}

• And Save.
• Result:
• 

  Note: This design is only for desktop.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[kayodekevin]

Hi! thank you for your response! I have added the code but doesn't seem to be reflecting like the last one. Should I add it to the liquid theme?

[kayodekevin]

Hi! sorry to disturb, I have added the code to the base.css but it doesn't seem to be reflecting like the last one. Would this work if i added it to the liquid theme or would it require a new format?

[Made4uo-Ribe]

Oh, you butcher your base.css. 😅 Let fix it. Follow carefully the instruction. 

This your current base.css. 

Now make a new line for 3603 add closing bracket }

Add line Line 3618 add closing bracket }

Then delete 3634 line closng bracket. 

And fix spelling for 3630.

Must be px. 

Now when you fix this always and always paste the code the very last }

Paste after this bracket. 

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!