[Resolved] how to make my header/navigation/menu like that of apple.com

[allan]

hi,

sorry i don’t know how to ask this question, i just need to make the nav/header/menu be like that of apple.com or just simply copy how apple.com menu/header behaves.

thanks,

[Tom]

Hi there,

Is there a specific aspect of it you like/want to achieve?

[allan]

Hi Tom,

thanks for the reply. Basically, I want to achieve 2 things:

1. transparency upon scroll. I’m not sure if it’s the header or menu/nav (in apple.com homepage)
2. there’s a 2nd layer of menu in https://www.apple.com/iphone-x/, so that when you scroll, the first menu (the dark grey) disappears so that what is left is only the menu that is white/transparent.

Thank you very much in advance Tom.

-allan

[Tom]

1. You can set the background color of the sticky nav:

.main-navigation, .main-navigation ul ul {
    background-color: rgba(255,255,255,0.7);
}

2. You can use the Secondary Nav add-on to build a second menu – then only the primary menu will be sticky.

[allan]

thanks.

[Tom]

You’re welcome 🙂

[Author]

Posts