Black Friday Sale! Get up to $40 off GP Premium!Learn more

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

Home Forums Support Site Title and Tagline are skewing to the right

  • This topic has 12 replies, 3 voices, and was last updated 3 years ago by Leo.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #426048
    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!

    GP Premium 1.5.3
    #426164
    Leo
    Staff
    Customer Support

    Hi there,

    Yup that would be the reason.

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

    Let me know.

    #426196
    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).

    #426356
    Leo
    Staff
    Customer Support

    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?

    #426435
    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.

    #426464
    Tom
    Lead Developer
    Lead Developer

    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.

    #426842
    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.

    #427041
    Leo
    Staff
    Customer Support

    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.

    #427101
    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.

    #427110
    joyw

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

    #427213
    Leo
    Staff
    Customer Support

    Yup that will also work 🙂

    #428217
    joyw

    Ok, thanks!

    #428369
    Leo
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.