Move header image to left: add html to right

[Charles]

I’m sure I knew this once, but could you remind me please how to make two columns in the header — image on the left, custom html with buttons on the right?

TIA

[David]

Hi there,

you can add your HTML to the Header Widget. This will sit automatically to the right of your site logo.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Charles]

ty

[Charles]

I’m entering my image with the header element, and the buttons html is in the header widget. But it’s not exactly showing up to the right of the image.

[David]

If you can share a link to your site we can take a look at fixing that.
You can edit your original topic and use the Site URL field to share the link privately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Charles]

Do you need logon credentials?

[David]

I don’t need admin access just to be able to view the front end.
If that a requires a log in then you can send it via the Account Issue form here:

https://generatepress.com/contact/

Please add the URL of this support topic to the form so we can track.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Charles]

YOu’ll let me know if you want the admin access?

[Leo]

Sounds like David just needs to view the live site if you can provide that access.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Ok – got the Login.

1. Do you want the Navigation full width below the Logo and Custom HTML ?
If so can you move it to Below Header in Customizer > Layout > Primary Navigation.

2. The Custom buttons how should they be displayed ? Do you want them in a row or a column ?

Let me know

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Charles]

Hi,

Thank you.

Yes, I think the navigation should be as you describe.

I guess two rows of three buttons would be good. I can blank one or more out if I need to later.

Will the buttons move below the logo on mobile?

Thank you Dave!

[David]

Couple of things.

1. Can you crop your logo – it current has a lot of transparent space around it.

2. In Customizer > Layout > Primary Navigation – set the Location to Below Header.

Question:

Would it make more sense to use the Secondary Navigation instead of the Header Widgets ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Charles]

I think I recropped the image but buttons still arent to the right of it. ty

[David]

Ok if you can do #2 here:
https://generatepress.com/forums/topic/move-header-image-to-left-add-html-to-right/#post-1313798

Then you can adjust the size of your logo in Customizer > Site Identity –> Logo width.

Then add this CSS:

.inside-header, .header-widget .btn-group {
    display: flex;
    align-items: center;
}
.header-widget .btn-group {
    flex-wrap: wrap;
}
.header-widget {
    order: 10;
    max-width: unset;
    margin-left: auto;
}

@media (max-width: 768px) {
    .inside-header {
        flex-wrap: wrap;
    }
    .site-logo, .header-widget {
        flex: 1 0 100%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Charles]

Thank you so much!

[Author]

Posts