Archived topic
Header Layout Issues - Menu Float Right with Header Widget
8 replies · Started by Patrick on August 26, 2022
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
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;
}Hi Fernando,
Thank you. I'll try that and report back.
Patrick
You’re welcome 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
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!
Hi there,
try this CSS to set the menu bar items line-height:
.menu-bar-items :is(input, a) {
line-height: 1em;
}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
See my reply here :)
Glad to hear that worked.
