Logo Image on Top of Header Image (3 posts)

  1. grundpup
    Posted 1 year ago #

    I want to put an image on top of my header image, so when the responsive header image shrinks on phones, this image stays pretty readable. Like here in this static html site -

    This is my WordPress version -

    I have a Child Theme and as well I am looking at header.php but not sure where to do the customization. If that's where to do it.

    Thanks in advance!

  2. Jitendra Mishra
    Cyberchimps Support Rep
    Posted 1 year ago #

    Sorry, we do not monitor these forums, please use the official forum:



  3. David Burkhart
    Posted 1 year ago #

    That example is an extremely well-thought-out layout custom design. So, it's good you were only interested in the logo part of it. The rest of that snazzy flexibility is way too much effort for this theme. If you can duplicate that functionality, you should be designing your own theme and demanding serious cash. But, I digress.

    If you can find where the header image is specified (the <img> tag) in the code, add this line after it:

    <img src="/myLogoPath/myLogoFile.png" alt="Logo" style="position:absolute;left:0px;top:0px;width:33%;min-width:200px;min-height:150px;">

    In theory this should give you a logo on top of the header, which starts out at a full size of 320 pixels wide and will shrink with the header image until 200 pixels wide. Of course, this is an over-simplified example of a solution. You will have to tweak the code to meet your particular circumstances. One possible complication with my example I see already is if the browser width ever causes the header image to drop below the minimum width or height of the logo, then the logo will overlap the navigation menu or vice versa.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic