Move header image to left: add html to right

Hi there,

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

ty

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.

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.

Do you need logon credentials?

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.

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

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

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

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!

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 ?

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

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%;
    }
}

Thank you so much!