How to modify the nav menu in Refresh Theme like getrael.com?

[JJ_Clarissa]

Hello! I’m currently using Refresh theme and I’d like to have the navigation menu like this site https://www.getrael.com/. Is this possible?

Link to my site preview

[Dan-From-Ryviu]

Hi @JJ_Clarissa ,

You can change it from your store admin > Sale channels > Online store > Themes > Customize > select Header, in Logo > Desktop logo position > Middle center


[tropicalden]

I will assume that by “having the navigation menu like this” you mean having a transparent background. If you want to be exactly like the one in the screenshot, you will need custom coding.

To achieve the transparent effect we will need 3 things:

1. Change the background to transparent

2. Position the navbar at the top

3. Change the font color to black - for contrast purposes

4. Change the Logo image to black - for contrast purposes.

To do that:

• Go to ‘Online Store’

• Click on ‘Themes’

• Click on the three small dots to the left of ‘Customize’

• Click ‘Edit code’

• Go to ‘base.css’ file inside ‘Assets’ directory

• Find .header class

• Add between the curly braces of .header

background: transparent;

position: absolute;

top: 0;

left: 0;

right: 0;

• Add below those curly braces:

.header * {

color: black;

}

• Change the image logo from white to black using an online image editor
• Click ‘Save’

Pending: Change logo from white to black

[JJ_Clarissa]

Hi! Thanks for this. All good, i meant to have the navigation in this style.

[JJ_Clarissa]

Hi! Found the Desktop menu type in the mentioned settings. Thanks again!