[Support request] Header Layout Issues – Menu Float Right with Header Widget

[Patrick]

Hi there,
Thank you SO much for your help yesterday with header layout issues. You predicted I might be back for help with how a Primary Menu will play with a Header Widget and you were right!

To make this easy to see, I’ve put a link to the picture of the problematic header in the private information section.
I’ve also shown there my ideal header. I think a LOT of CSS might be needed for that?
For those who can’t see it, I’m trying to float the logo left, a social media widget and search bard side by side floating top right and the Primary Menu floating right under those elements.

Thank you so much,
Patrick

[Fernando]

Hi Patrick,

Can you try adding the Social Icons through a Block Element – Hook: hooked to menu_bar_items? Then, add a WP Search Block.

Then, try adding this CSS:

.main-navigation .inside-navigation.grid-container {
    flex-direction: column-reverse;
}

[Patrick]

Hi Fernando,

Thank you. I’ll try that and report back.

Patrick

[Fernando]

You’re welcome Patrick!

[Patrick]

Hi Fernando,
Some improvements from that – thanks!

* I switched off the Lightweight Social media widget
* Set up a block element for social media icons, separate one for search (both are a bit stretched, but I’ll get to that).
* Re: the CSS – I sent up a new Hook item, pasted your CSS tip and set hook to wp_head (this is my first time with this part, so this could be causing the issue).

The Primary Menu remains in the wrong place – see http://www.planetpatrick.net – I think we’re nearly there but I’ve made a booboo somewhere!!

Patrick

[Patrick]

Update: I can see the CSS should just have been added using the Customizer with Simple CSS – that’s improved things a lot!

Now, if you ideas on the size of those new block elements not being so ‘stretched’ – I’m guessing this might be another CSS element or a typography setting. I’ll see what I can find 🙂

Thank you again!

[David]

Hi there,

try this CSS to set the menu bar items line-height:

.menu-bar-items :is(input, a) {
    line-height: 1em;
}

[Patrick]

Hi David,
That worked beautifully.

Any thoughts on where that random white line has appeared from?

I can’t see anything in the code that is definitely it.

All the best,
Patrick

[David]

See my reply here 🙂

https://generatepress.com/forums/topic/oversized-hook-item-in-header-and-random-white-line/#post-2324521

Glad to hear that worked.

[Author]

Posts