[Support request] How do I add multiple links inside the header?

[Mario]

I am trying to achieve the same effect as in this website: https://childswish.org/

The header has multiple links and even a donation link/image.

I am trying to replicate this effect in my own website using GeneratePress

Is there any way to do this?

I still need to buy a domain to where I’m working on this.
http://pmn.ad6.myftpupload.com/

[David]

Hi there,

that would actually be quite tricky to do and keep it responsive. But you could try this:

1. Create a new Menu for your Primary Navigation.
For the columns we need 3 x Parent items ( which will be hidden ) give them a Label eg. Menu Column 1, a # URL and this CSS Class: menu-label-hidden
2. Below each menu add a sub menu for each of the columns links.
3. Set the Customizer > Layout > Primary Navigation –> Location to Float right.
4. Add this CSS to your site:

@media (min-width: 769px) {
    .main-navigation li.menu-label-hidden>a {
        visibility: hidden;
        opacity: 0;
        height: 0;
    }

    #site-navigation.main-navigation ul ul {
        visibility: visible;
        opacity: 1;
        position: static;
        left: unset;
        height: auto;
        pointer-events: auto;
    }
}

5. For your Mobile Menu i would suggest using the Off Canvas Panel and separate menu without those hidden labels.

6. The buttons and social icons can be added to the header widget.
https://docs.generatepress.com/article/header-widget/

It will require some CSS – but if you can get the elements in there i can help with that.

[Mario]

Thank you so much for the suggestion! The 3-column setup works like a charm. I’ll keep jamming away with the rest when time allows, but the hard part is behind me now, and I appreciate your help!

[David]

You’re welcome

[Mario]

Okay, I was able to add the elements. But I need your help again on the icons.

You’re right. I don’t know how to make the header menu move slightly left to un-collapse the social icons.

What do you recommend?

[David]

Try this to position the nav between logo and header widget and to inline the two header widget buttons:

@media(min-width: 769px) {
    .inside-header {
        display: flex;
    }
    .header-widget {
        order: 10;
        top: unset !important;
        text-align: right;
    }
    .header-widget aside:not(:last-of-type) {
        display: inline-block;
        margin-left: 20px;
    }
    .main-navigation {
        margin-left: 40px;
        margin-right: auto;
    }
}

I assume there are some style controls for the social icons – which will need aligning right.

[Author]

Posts