Nav bar header design

Store Design
,
1

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.

image001.PNG
image001.PNG2816×398 142 KB

1 Like
2

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

3

Hi @kayodekevin ,

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

4

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

5

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

6

Hi @kayodekevin ,

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

Screenshot.png
Screenshot.png1010×788 42 KB

7

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.

1 Like
8

Hi @kayodekevin ,

Please send me the store password, I will check it

9

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.

10

Hi @kayodekevin

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

11

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

12

Hi, thank you! I will attach it now:

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

13

Hi, thank you! I will attach it now:

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

thuflo

14

Hi @kayodekevin ,

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

15

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;
}
}

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

16

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!

Screenshot 2025-01-20 at 15.21.12.png
Screenshot 2025-01-20 at 15.21.12.png1920×1080 283 KB

17

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

image (9).png
image (9).png1162×550 376 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

18

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 tag and paste the code below before the tag.
  • 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!

1 Like
19

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?

20

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