Archived topic
How do I add multiple links inside the header?
5 replies · Started by Mario on July 26, 2020
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/
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.
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!
You're welcome
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?
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.