[Resolved] customizing the header and navigation menus

[David]

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?

[Nanette]

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

[David]

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?

[Nanette]

oh yes indeed

[David]

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

[Nanette]

Okie Dokie will try it now.

[Nanette]

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

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

[Nanette]

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….

[David]

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 🙂

[Nanette]

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

[David]

So in Customizer > Layout > Header there is:

Use Navigation as Header

I just had a peek. Check that 🙂

[Nanette]

Okie Dokie

[Nanette]

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.

[David]

Awesome – so glad to hear that.

[Nanette]

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

[Author]

Posts