[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
    Posts
  • #1377453
    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/

    #1377753
    David
    Staff
    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.
    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.

    #1379930
    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!

    #1380209
    David
    Staff
    Customer Support
    #1382519
    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?

    #1382718
    David
    Staff
    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.