customizing the header and navigation menus

Hi there,

just a couple of other questions as it's going take a bit of customization and we want to cover all bases.

What is the intention on mobile:

1. will both Primary and Secondary Navigation elements still be required?
Or you can create a Off Canvas Panel to contain both menus and have only the one toggle

2. Will the logo still overlap the navigation?

I can create an off-canvas panel to contain both that would probably be best for mobile. Would you agree?

Yes, i think its best there is only a single mobile menu.
Is it okay for me to make some edits to the site navigation and add some CSS directly to the site?

oh yes indeed

So lets try and do this with the sticky nav:

1. Create a new Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/
Give it a title eg. Nest Secondary Navigation inside Primary
Add this to the content text area:

<?php generate_secondary_navigation_position(); ?>

Select: inside_navigation Hook
Check Execute PHP
Set Display Rules tab Location: Entire Site.

2. Customizer > Layout > Secondary Navigation.
Set Container: Full Width, Inner Container: Contained, Alignment: Right, Location: No Navigation

3. Customizer > Layout > Primary Navigation
Same container settings as Secondary Nav - except leave the Location as it is.

4. Customizer > Layout > Header
Check the Navigation as Header

5. Customizer > Layout > Sticky
Enable the Sticky option

6. Add this CSS:

.main-navigation:not(.slideout-navigation) .main-nav,
#secondary-navigation {
    flex: 1 0 100%;
}

#secondary-navigation {

    margin-left: calc(-100vw / 2 + 1200px / 2);
    margin-right: calc(-100vw / 2 + 1200px / 2);

}

.main-navigation:not(.slideout-navigation) .main-nav {
    max-width: 1200px;
}

.navigation-branding {
    position: absolute;
    left: 0;
    z-index: 100;
}

.site-logo img {
    height: auto;
    width: 130px;
}

May need a little tweaking, once thats done we can look at the Mobile

Okie Dokie will try it now.

4. Customizer > Layout > Header
Check the Navigation as Header

I went there ut I don't see where I do that?

Also, when I put in the CSS, do I put it in the Additonal CSS and is there a special place to put it? Top under header....

Can you go to Customizer > Layout > Primary Nav - does it have the option to add a logo to it the nav? If so add the logo there.

Add the CSS at the very top of the Additional CSS for now :)

So I put the CSS on the top in Additional CSS

The Customizer > Layout > Primary Nav does not have a place to add the Logo, I can upload it here: Customizing ▸ Layout > Sticky Navigation

So in Customizer > Layout > Header there is:

Use Navigation as Header

I just had a peek. Check that :)

Okie Dokie

OMGOD!!!! It worked. I just need to change the Logo so it isn't Transparent. I am so excited!!!!! thank you, Leo, and Tom for all your help. So appreciative.

Awesome - so glad to hear that.

I gave my reviews. The best choice I made for my clients was choosing Generate Press for building a website.