[Resolved] Site Title and Tagline are skewing to the right

[joyw]

Hi,
My primary navigation menu was changed to float left which I wanted but as a result, the site title and tagline which were previously centered is now skewing right. I think it may be because I’ve set my logo with a rather large pic image. How do I get them back to the centre?

Related to that, my original intention was to have that image in the header area with the site title and tagline on top of it. How do I achieve that?

Lastly I’m just starting to build up the site. Would you recommend using a child theme with GP or is it ok to just build right on GP.

Thank you so much for your help!

[Leo]

Hi there,

Yup that would be the reason.

That picture might be more suitable for the header background image?

Let me know.

[joyw]

Thanks for the reply. I’ve done as you suggested, deleted the pic logo and used it as a background header image instead. The title and tagline are still skewed right (despite choosing center for header alignment) and the header pic image seems to be just zoomed in on the top left part of the image (I’ve toggled between 100% width, size(auto), cover and contain to no good results).

[Leo]

It doesn’t look like you have room for the logo to be center since the navigation took half the width?
https://s33.postimg.org/ommlkeyhb/2017-11-16_1530.png

What layout are you trying to achieve?

[joyw]

I’d like the picture you saw originally to be the background header image, the title and tagline in the center and the main navigation menu to float left within the header area. Sorry about the confusion over the logo, please forget the logo, I’ve deleted and left the logo blank now.

As things stand now, I can live with the title and tagline skewing right but can you advise as to how to get the background image pic not to be so zoomed in? Thanks again for your help.

[Tom]

The background image is set to cover, so it will zoom in until it covers the element area.

Removing the fixed attachment should zoom it out a little bit.

[joyw]

I’ve tried changing the attachment from ‘fixed’ to either ‘attachment’ or ‘local.’
As well, tried changing the image from cover to size(auto) or 100% width.
Also referred to https://docs.generatepress.com/article/backgrounds-overview/
Please let me know if I’m missing something basic as I’m new at this.

[Leo]

So what’s the problem now? The header looks good to me?

Keep in mind that background images are not responsive and sometimes tricky to deal with.

It might make it easier if you crop that image to 1320 x 190px (your header container size) so it fits perfectly.

[joyw]

So the problem is that I had to try quite a few different images in that header space to see what that pronounced zooming in effect translates to. Then move the site title/tagline and navigation menu to suit that image. It just didn’t seem to be an efficient way of doing things hence my asking for help.

Tom had suggested it was because I’ve set the image to cover so I tried the other settings. He suggested not fixing the attachment so I tried that. I’ve changed the image to what seems the best of the lot but it is still too zoomed in and I originally wanted the navigation menu to float in the left lower header space.

Thanks for the cropping tip, I’ve tried it and it looks marginally better. I’m running into similar problems with background images in other areas e.g. footer area. Sounds like you’re saying the background images are just finicky by nature. If there’s nothing else I can try then appreciate all the help thus far and the topic can be marked resolved.

[joyw]

Reading your answer again, Leo, I just had a thought – would it help if I increase the header container size?

[Leo]

Yup that will also work 🙂

[joyw]

Ok, thanks!

[Leo]

No problem!

[Author]

Posts