Specific Horizontal Menu and Header For Home Page and Childs

Hi there,

For #1:
This is set on the customizer settings. It's on Appearance > Customize > Layout > Sticky Navigation and set the dropdown to "On".

For #2:
This is already the default layout.

For #3:
Can you clarify a bit more? Does this mean there would be no menu or perhaps, a different menu and is not sticky?

For #4:
You may need to use the Merge setting of Header Element as shown here - https://share.getcloudapp.com/JruDQxx4
https://docs.generatepress.com/article/header-element-overview/

For #3:
Can you clarify a bit more? Does this mean there would be no menu or perhaps, a different menu and is not sticky?

This would be the menu 2: https://thefashionglobe.com/articles (centred and different menu which is sticky)
And this would be menu 3: https://thefashionglobe.com/audrey-hepburn (vertical menu left and right sticky)

Hi Hich,

Can you link me to the site that you are working on?

I would recommend a different approach from Elvin's:

1. Turn off sticky navigation at Appearance > Customize > Layout > Sticky Navigation, we'll try a CSS solution when you link me to the site.

2. Set Navigation location to float right at Appearance > Customize > Layout > Primary Navigation.

3. Does it really have to merge? Or setting header background color to black works as well? If so, go to Appearance > Customize > Colors > Header, try set its background color to #000000.

Hi Ying!

Awesome! I will try to follow your approach and see how it goes.
As for the website in question you can use this link: https://wordpress-273320-2007441.cloudwaysapps.com/new

Background black is just fine. I'm considering multiple options for the menu and header in case it is complex to set up...

Thanks :)

Hi Hich,

I just checked your site, didn't see a header/navigation is added to the NEW page, did you disabled the navigation for this specific page?

The home page has the header, but the navigation location is NOT set to Float right.

Let me know when you activate navigation on the NEW page, I'll help you with CSS solutions :)

Hi Ying!

Thanks a lot for following-up, I just made some updates to the home page and menu here: https://wordpress-273320-2007441.cloudwaysapps.com/

It needs to look like this: https://thefashionglobe.com

I don't know if my approach was good. I only used the GeneratePress Customizer and noticed that needed to systemically add the background color of #181818 to the navigation menu, items, bar and header.

The other aspect that I need to figure out is how to build the mobile version of the menu. So I'm considering various options to maybe simplify the menu and make it consistent for all the pages?

First, I'd like to make the navigation menu sticky and merge it with the content below to display the content 100% on the screen.

My idea is to use the maximum the options of the GP theme customizer before using CSS if possible.

I only used the GeneratePress Customizer and noticed that needed to systemically add the background color of #181818 to the navigation menu, items, bar and header.

That's correct :)

For the mobile menu, you can use Off canvas menu. Assign another set of menu to it in appearance > menu.
https://docs.generatepress.com/article/off-canvas-panel-overview/

For sticky navigation, try this CSS:

.home #masthead {
    position: sticky;
    margin-bottom: -140px; /*your header height*/
    top: 0;
    z-index: 99999;
}

The reason that I suggest using CSS instead of the sticky navigation in the customizer is that:
1. You don't need any transition when scrolling, so CSS is a better choice than JS(sticky navigation of GP)

2. Sticky navigation is a clone of the primary navigation, and it will appear on the entire site. Since you'll use different navigation on different pages, it only makes things more complecated.