[Support request] Header Layout

[Daniel]

Hi,

I am trying to create a header similar to the website below:

https://saha.org.uk

In desktop view, I want the logo on the left and the phone number and email address stacked on the right (right aligned).

In mobile view, I want the logo to be centred and the telephone number and email address to appear below the logo (inline and centred).

Any idea how I can create this? I have been playing around with CSS all afternoon but just can’t get it how I want it 🙂 Any help would be most appreciated.

Dan

[David]

Hi Dan,

so the logo is added to the site identity, and the header set to align left.
Then add a Custom HTML widget to the Header Widget area and add your links.

Might need to throw a little CSS at it for text alignment and such and to reorder the mobile stack. If you can set up and share a link we can help.

[Daniel]

Hi David,

Thanks for the reply.

I’ve managed to achieve mostly what I wanted with the following code:

.site-logo {
width: 165px;
height: auto;
margin-top: 20px;
}

.header-widget {
margin-bottom: 0px;
padding-bottom: 20px;
margin-top: 20px;
text-align:right;
}

@media (max-width: 768px) {
.inside-header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: column;
}
.site-branding {
order: 2;
-webkit-order: 2;
text-align:center;
}
.site-logo {
order: 3;
-webkit-order: 3;
display: block;
margin-left: auto;
margin-right: auto;
width: 165px;
}
}
.header-widget {
order: 4;
-webkit-order: 4;
}

.textwidget {
margin-bottom: -20px;
}

@media (max-width: 768px) {
.textwidget {
text-align:center;
}
}

@media (max-width: 768px) {
.header-widget .widget_lsi_widget {
display: none;
}
}

@media (max-width: 768px) {
.header-widget .textwidget {
font-size:5px;
}
}

It could probably be tidied up a bit, but it’s working for now.

One other thing: I would like the font size in the header text widget to be smaller on mobile. Do you know any code for achieving that? I can’t get it to work.

Dan

[David]

Hi Dan can you share a link to the site? you can edit your original topic and use the Site URL field for privacy.

[Author]

Posts