Archived topic
Header Layout
7 replies · Started by Rob on November 25, 2018
Hi there
I wonder if you could help, Ive spent 2 days messing with CSS, Header Widgets and Hooks.
I basically want the Logo on the left, search on the far right.
And in the middle, Fontawesome icons (phone and email) with inline phone number and email address.
Creating 2 Header Widgets, they seem to stack vertically. Contact Details being on the top, and search being on the bottom, not phone etc on the left, and Search on the right.
Here is the link, to how I want it.
Can you help at all? Its driving me crazy :(
Hi there,
if you want to add the two widgets i can provide the CSS to make them inline. Let me know :)
Thanks, sorry added then back :)
Hi there,
this should get you started:
.header-widget {
max-width: 100%;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header-widget .widget {
padding: 0;
}
.header-widget .widget-title {
margin-bottom: 0;
}
.header-widget .custom-html-widget>* {
margin-right: 10px;
}The widgets are quite long so they clash with the nav on narrower screen widths, so need to think what you want to do about responsiveness ( or shortening them :) )
Great, get what you mean about the length of the content, I've moved the email to the topbar, works great thanks! :)
I just need to sort the mobile header out now. If the Phone just could sit under the logo, and then the search under the number.
If you fancy helping with that too? ;) Tell me to go away if not haha.
Massive help either way, as usual :)
This should give you the basics.
@media (max-width: 768px) {
.header-widget {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}Brilliant, thankyou so much :)
You're welcome
