Header Overlay position problem

  • Hello All,

    I’m having a small issue setting the position of a header overlay image of a book cover for a writer’s website I’m creating in wordpress.

    I know where the basic header overlay controls are (under “header” in “Customize”. But it only seems to allow a limited amount of movement where the book cover is always too high and overlaying either the author’s name to the left or the navigation links to the right.

    Also I can’t seem to get the overlay text to go to the left bottom of the page…at best it will go to the center bottom or extreme right bottom.

    I’ve included a picture of what the page looks like now with a box and arrow of where I’d like the cover and text to be.
    Here is the screenshot: https://i.postimg.cc/q75JQrXz/booksite.png

    In the screenshot, the book cover is at the centered postion..but I can set the cover to the right but it is still too high and covers the navigation links.

    Also there is a variable number setting available (forgot the label name) that doesn’t seem to effect anything.

    Maybe there is some extra css code I can add to fix this in a jiffy? I’m not sure what ID that would go to though.

    Has anyone dealt with this issue or similar successfully before that might have a fix? Thanks.

    • This topic was modified 3 years, 7 months ago by trat444.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi ??

    This should be doable with CSS. You want to be looking at positioning. Does this fiddle help at all? Example positioning with CSS

    Note, I’ve not included any responsive break points in the example, but these could be added to adjust the positioning for different device types.

    Cheers,
    Philip

    • This reply was modified 3 years, 7 months ago by corenominal. Reason: Note about responsive postioning
    • This reply was modified 3 years, 7 months ago by corenominal. Reason: Updated fiddle
    Thread Starter trat444

    (@trat444)

    Thank you. I will try this out next time I’m working on the site. So essentially do I have to replace the original html and css or can I just add this to the “additional css” section under “Customize”?

    I guess that’s a stupid question. I wish the code was easy to search so I could find what controls what…because I otherwise know how to make edits to css once I find the code that is controlling what I want to change.

    Wordpress sometimes confuses me because there is the css in the wordpress editor and then there is the cpanel code. Is it safe to assume the html part I change is in cpanel?

    Thanks again!

    • This reply was modified 3 years, 7 months ago by trat444.

    Thank you. I will try this out next time I’m working on the site. So essentially do I have to replace the original html and css or can I just add this to the “additional css” section under “Customize”?

    The code I provided was just an example of how to position elements. You might not need to replace the existing HTML, you might be able to adjust/edit the existing CSS.

    I guess that’s a stupid question. I wish the code was easy to search so I could find what controls what…because I otherwise know how to make edits to css once I find the code that is controlling what I want to change.

    You should be able to find the elements by opening your browser’s Inspector. Right click on your page and choose “Inspect”. See: Using the browser inspector

    WordPress sometimes confuses me because there is the css in the wordpress editor and then there is the cpanel code. Is it safe to assume the html part I change is in cpanel?

    I’m not sure of your set-up, but it sounds like you are not editing the files in a traditional editor. You might be able to edit your theme’s CSS directly within WordPress by choosing “Appearance -> Theme Editor” from the WP menu.

    Hope this helps! ??

    Thread Starter trat444

    (@trat444)

    I’m baaaaack. Well, your suggestion partially worked! Thank you for getting me this far! Although, I was able to get the book image exactly where I wanted it with the code you provided…I had to change the identifier for the image and I still haven’t figured out how to control the .author-text.

    I tried many identifier changes based on what I saw in the css but so far nothing has worked to give me separate control over the header media text.

    So once more I’m seeking help for this final push! I figure it’s just some missing code I can add to the css but I don’t want to break it by guessing. I’m hoping someone will know what’s needed. The wordpress theme I’m using right no is: Bold Photography by Catch Theme.

    • This reply was modified 3 years, 6 months ago by trat444.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Header Overlay position problem’ is closed to new replies.