[Resolved] Adding social links/icons and phone number to header

[Mark]

Hello

I’m sure this has been asked and answered but I wasn’t able to find it. I’m using the BB theme and page builder on a site and I want to change out the theme to GP.

I would like to know how to recreate the header I currently have here https://scan2core.com/

Thank you!

[Mark]

I should also show you the site where I’m rebuilding it at and where I’m at thus far on the header. https://webdesignbymark.net/

[Adrian Cojocariu]

Hey. You can use the widgets section and I think you can add a floating widget in the right side of the header, just like a floating menu.

Try that and let me know if it works!

[Leo]

Hi there,

Adrian is right. You can use header widget for that: https://docs.generatepress.com/article/header-widget/

For social icons I would recommend Tom’s lightweight social icons plugin: https://en-ca.wordpress.org/plugins/lightweight-social-icons/

[Mark]

Thanks for your suggestions! I’ll see what I can do in the morning.

[Leo]

Sounds good 🙂

[Mark]

Okay so, I got them where I want them. Now, one more thing. When it goes to mobile view, I need the logo, phone number, and social icons to be viewable and stack like they do here https://scan2core.com/ How do I make that happen?

Thank you!

[Leo]

Try turning off mobile header: https://docs.generatepress.com/article/mobile-header/

[Mark]

I did that. Now it’s a mess when it goes mobile. Did I do something wrong?

[Mark]

So I got the social to center on mobile but, I need the logo to be smaller and on top. And the bg image to be replaced with a different one. One that just has a “concrete image” bg.

[Leo]

You can replace the background image size to auto in the customizer, or switch it out for mobile with this CSS:

@media (max-width: 768px) {
    .site-header {
        background-image: url(https://URL-HERE);
    }
    .site-header .header-image {
        max-width: 200px;
    }
}

I’ve included the CSS to resize the logo on mobile as well.

Let me know.

[Mark]

Thank you! That’s very close but I need it all to stay in within the bg image and have the logo be on top of the number and social icons.

[Leo]

That’s a bit tough but this solution should still work: https://generatepress.com/forums/topic/is-it-possible-to-make-header-widget-display-below-logo-on-narrow-screens/#post-38451

[Mark]

Thanks a bunch Leo! I just wanted to confirm that using CSS, as suggested in the above post made by Tom, and switching the order, works perfectly.

@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;
}
.site-logo {
order: 3;
-webkit-order: 3;
}
.header-widget {
order: 4;
-webkit-order: 4;
}
}

[Leo]

No problem!

[Author]

Posts