Archived topic
Creating a Site Header
6 replies · Started by Rob on November 28, 2021
Hi,
I am in need of some help trying to create the header layout depicted in the attached image.
As you can see I need to integrate social icons into the navigation but also add contact details directly underneath the navigation but still within the header section. I just can't figure out how to do this despite using Elements.
What is the best approach to achieve this please?
Thanks
Rob
I was hoping that I could use a Block Element but there does not appear to be a way to add in the navigation using that approach.
However if I try to use the Site Header element I can't see how to add the extra contact information directly underneath the navigation.
I tried to create a hook to add the contact info but can't get it to line up on the right hand side underneath the primary navigation so I am struggling now.
Hi Rob,
Any idea what you want it to present on mobile?
And can you link us to your site so we can see your current structure?
Let me know :)
Sure - I have added the link.
For mobile I will use the hamburger menu
Give this CSS a try:
@media (min-width: 769px) {
.gb-container.gb-container-babe7ffb.alignfull {
order: 3;
margin-left: auto;
}
.inside-header.grid-container {
align-items: flex-start;
}
}Let me know :)
It worked - thanks so much - I really appreciate your help.
You are welcome :)
