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

Home Forums Support How do I add multiple links inside the header?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1377453

    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.

    Customer Support

    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.

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


    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!

    Customer Support

    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?

    Customer Support

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.