[Resolved] Menu Design & Featured Image

[fabiosilva]

Hi!
I’d like to create a very smilar menu and Featured Image (behind the menu) similar to this image:
https://ibb.co/WFX8XD2

I know it will take a lot of CSS settings to be perfect. But, before that, I need to figure out how I can assemble the basic structure, so I can handle the customizations.

NOTE: For reasons of confidentiality, I send the original website to admins.

I hope you can help me! It is the first time with the GP and I am really enjoying its potential.

Thank you so much

[Leo]

Hi there,

I believe the header element module should help:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/transparent-header-and-navigation/

Let me know 🙂

[fabiosilva]

Hi Leo!

The feautered image (full screen), is solved! After all, it’s very simple. 🙂

But menu…I’m losing my mind! 🙁 The left logo.. and two navigations… Is there any way?

Alternatively, I thought I’d disable the GP menu layout and create myself (with html / css). But is there any code (php or shortcode) to call the main menu?

[Tom]

Hi there,

You’ll want to create two menus, one for the primary navigation and one of the secondary navigation (you need to activate the Secondary Navigation module).

Then, set them both to “Float Right” and upload a logo.

Once you do that, can you link us to your site so we can help you get the rest of the way?

Thanks!

[fabiosilva]

Hi,

Yes, I made it. It’s getting close to what I want (I’m not sure, yet).
But is there a way to change the order of navigations? The secondary navigation appear on top, and I want put down below from the primary navigation (on mobile too).

I can provide the website link, But I can not do it in public.

Thank you so much.

[Leo]

Can you edit the original topic and add it in the private URL field?

[fabiosilva]

Edited.

Thank you.

[Tom]

Try this CSS:

.inside-header {
    display: grid;
    grid-template-areas: "logo primary-nav"
                         "logo secondary-nav";
    grid-template-columns: auto 1fr;
}

.site-logo {
    grid-area: logo;
}

#site-navigation {
    grid-area: primary-nav;
    margin: 0;
}

#secondary-navigation {
    grid-area: secondary-nav;
    margin: 0;
}

Depending on your browser compatibility needs, you might want to run that CSS through this tool: https://autoprefixer.github.io/

[fabiosilva]

I think that this can work better. 🙂 I’ll test it better.

But, if i want create my own menu, using GP elements to inject html code, exist any shortcode to call navigations’s? -» Maybe is not necessary!

EDITED: I’ll do some customizations and then come back to give feedback. In fact, every time I explore GeneratePress, I discover it’s amazing!

[fabiosilva]

Good news! I’m close to reaching the final result! 🙂

Just two more situations:
1 – Is there any way I can control when the menu (hamburger) should or should not appear? (for example, with CSS media)

2 – The mobile menu appears in this order:
– SECOND NAVIGATION –
– LOGO –
– FIRST NAVIGATION –
https://ibb.co/4tLzLJS
  And I want it to appear:
– LOGO –
– FIRST NAVIGATION –
– SECOND NAVIGATION –
https://ibb.co/9qFnq50

Thank you for your help.

[Tom]

Give this a shot:

@media (max-width: 768px) {
    .inside-header {
        display: flex;
        flex-direction: column;
    }

    .site-logo {
        order: 1;
        width: 100%;
    }

    #site-navigation {
        order: 2;
        width: 100%;
    }

    #secondary-navigation {
        order: 3;
        width: 100%;
    }
}

Let me know 🙂

[fabiosilva]

Hi Tom,

Solved.

And about this:
“1 – Is there any way I can control when the menu (hamburger) should or should not appear? (for example, with CSS media)” ?

[Tom]

Are you trying to get the mobile toggles to show up earlier?

[fabiosilva]

Yes, on primary navigation.

But on second navigation, I want disable mobile toggle definitively.

[Tom]

As of right now you’d need to do this: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

If you want to update to 2.3 (currently in alpha testing), you can use a simple filter: https://generatepress.com/generatepress-2-3/

For the Secondary Nav, this should help: https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

[Author]

Posts