- This topic has 8 replies, 4 voices, and was last updated 7 years, 1 month ago by Pierre.
August 10, 2016 at 2:47 pm #217249Pierre
How can I recreate the layout of my portfolio site header?
I mean, Logo (or title) on left, MENU in the center and social icons on the right…
I have bought the GP Addon, so I have acces to those…
Thanks, I’M really new to wordpress…
PierreAugust 10, 2016 at 4:12 pm #217282TomLead DeveloperLead Developer
Have you tried setting the navigation position to “float right” in “Customize > Layout > Primary Navigation”?
Let me know 🙂August 10, 2016 at 5:10 pm #217291Pierre
Yes I did but the “menu” goes to the right of the layout instead of the center which is what it should do…
Maybe we need a “float center” option! 🙂
Any other way to put the social icon to the right of the menu?
Thanks, besides those little cosmetic things I neeed to figure I love the theme and add-ons!
PierreAugust 10, 2016 at 5:14 pm #217295Pierre
And when I say what it should do, I mean it’s doing what it is supposed to do since it’s going to the right!!!
And when I try to do thing using “big” margins, it’s completely “destroying” the layout of the mobile menu…August 10, 2016 at 9:57 pm #217327LeoStaffCustomer Support
I’m not sure how to make the menu to float center but I think that option is unavailable is because the majority of users would have more than 3 menu items and it wouldn’t look very good with 5 or 6 menu items.
This page should show you everything you need to know to make the social icon to the right of the navigation: https://generatepress.com/knowledgebase/menu-social-icons/August 11, 2016 at 12:28 am #217337TomLead DeveloperLead Developer
Hmm, unfortunately there’s no such thing as float: center;
The site you linked to has the header split into three sections.
You might be able to do something like this in GP Hooks (set your navigation position to “Hide” first):
<div class="grid-33 logo-area"> <img src="URL TO YOUR LOGO" alt="" /> </div> <div class="grid-33 navigation-area"> <?php generate_navigation_position(); ?> </div> <div class="grid-33 social-icon-area"> Social icons HTML/widget here </div>
It’ll need some tweaking, but it’s probably your best bet.August 11, 2016 at 12:39 am #217341Stacey UsborneStaffCustomer Support
This may work also, you could upload a logo using Menu Plus.
Upload your logo by going to “Customize > Layout > Primary Navigation > Sticky Navigation Logo” – you’ll also want to enable sticky navigation.
From there you can align your logo to the left and select your navigation to center by going to “Customize > Layout > Primary Navigation > Navigation Alignment”
Then, like Leo said you can use this to float your social icons to the right: https://generatepress.com/knowledgebase/menu-social-icons/
It may need a bit of tweaking with CSS.August 11, 2016 at 12:43 am #217344TomLead DeveloperLead Developer
Good idea, Stacey! That’s another good alternative 🙂August 11, 2016 at 8:03 am #217423Pierre
Thanks guys and gals!
Big work rush for the next 4 days, I’ll try what you all recommend on Monday and I’ll keep you posted!
And Leo is bringing up a potential problem of my design which works now because I have only 3 items in the menu… I’ll do a test whit a bigger menu!
- You must be logged in to reply to this topic.