Archived topic
SPLIT HEADER LOGO AND ADD SOCIAL ICONS INSIDE
5 replies · Started by FunkyCss on October 6, 2021
Hi there,
I have started my header and splited the logo as you show in your documentation here - https://docs.generatepress.com/article/centering-logo-navigation/
And the result is in the hidden link.
What I need to do is to make the menu li to come a bit closer to logo , left and right and the search icon & burger menu to go right.
Also is possible to add somehow SVG icons of social media in the menu , or is better to use Social Icon plugin of Tom there.
I would like to do it excactly like the image I sended above.
Any help to start with would much apreciated.
Friendly Regards
Andreas
Hi there,
tricky one.. probably best to get all the elements in place first and then we can take a look.
Add your social icons using the Block Element and the GenerateBlocks button block. Select the before_header_content hook to place them inside the header container. Once its in place i can take a look at the layout.
Hello David,
Thanks for the fast reply
I just added a custom HTML element with SVG there as you said.
Try this CSS:
@media(min-width: 1024px) {
#primary-menu {
max-width: 960px;
margin: auto;
}
}You will need to consider adjusting the above min-width in the media query and the mobile menu breakpoint as on smaller desktop screens the menu items will crash into the logo.
David this make it work ! Absolutely amazing with some CSS!!
Thank you so much!
I really apreciate your help!
Awesome - glad to hear that!
