- This topic has 5 replies, 2 voices, and was last updated 3 years, 9 months ago by David.
-
AuthorPosts
-
July 26, 2020 at 9:47 pm #1377453Mario
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/July 27, 2020 at 4:29 am #1377753DavidStaffCustomer SupportHi 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.
July 28, 2020 at 8:23 pm #1379930MarioThank 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!
July 29, 2020 at 2:18 am #1380209DavidStaffCustomer SupportYou’re welcome
July 30, 2020 at 9:27 pm #1382519MarioOkay, 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?
July 31, 2020 at 2:08 am #1382718DavidStaffCustomer SupportTry 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.
-
AuthorPosts
- You must be logged in to reply to this topic.