[Support request] Header layout

[Pierre]

Hi Guys,

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…

Portfolio

I have bought the GP Addon, so I have acces to those…

Thanks, I’M really new to wordpress…

Pierre

[Tom]

Hi Pierre,

Have you tried setting the navigation position to “float right” in “Customize > Layout > Primary Navigation”?

Let me know 🙂

[Pierre]

Hi Tom,

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!

Pierre

[Pierre]

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…

[Leo]

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/

[Tom]

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.

[Stacey Usborne]

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.

[Tom]

Good idea, Stacey! That’s another good alternative 🙂

[Pierre]

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!

Thanks!

Pierre

[Author]

Posts