Support » How-To and Troubleshooting » [Resolved] How to add a relative second-header image or a logo

[Resolved] How to add a relative second-header image or a logo

  • I have been learning a bit while searching and reading, and I believe I am beginning to see an overall picture of how some things are done. However, I have yet to find specific info about adding a “floating logo” or a second image in my header. So, how can I make that happen?

    Here is some code I have already added in style.css (Twenty Twelve Child Theme) that will have to be taken into account as I proceed here:

    /* center header */
    .header-image {
        display: block;
        margin-top: 24px;
        margin-top: 1.714285714rem;
        margin: 0 auto 2em;
    /* add search to header */
    .header-search {
    float: right;
        margin-top: -50px;
    @media (max-width: 650px) {
        .header-search {
        .main-navigation  {
    /* Minimum width of 960 pixels. */
    @media screen and (min-width: 960px) {
        body {
    	background-color: #e6e6e6;
        body .site {
    	max-width: 100%; /* added to attain full-width */

    The Search Box is nicely-placed, and my logic is to now find all the related code to copy over and modify as needed to make a logo show up elsewhere.

    Am I even close?

    Welcome to NoNameYet A.A. Chat!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hi,

    1. Create a new <div> in HTML, insert your <img src
    2. CSS {position:absolute;}

    I am stuck at the beginning of this with only <div id="logo" because I do not know where it will ultimately end, pun acknowledged, and my efforts to get “the big picture” here have been frustrated by the fact I have found 19 <div tags (if that is the correct term) within my theme’s .php files and only 17 </div>.

    Got another clue or two to pass along?!

    Moderator Andrew Nevins


    Forum moderator

    Have you a header.php file within your Child Theme directory?

    Yes, I copied one over from the primary Twenty Twelve theme so I could add a search box…and now something more comes to mind here:

    The header.php in my Child Theme includes all of the original as well as my additions, and I do not know whether both are being accessed or just the one in the Child Theme. In other words: My Child Theme’s style.css has an @import and I understand what is going on there, but I do not know how WordPress handles the matter of same-name (parent/child) .php files.



    Forum Moderator

    The child’s template is always loaded in preference to the parent’s.

    I thank you, esmi, and I would assume that applies to all .php files. Altogether, I have footer.php, functions.php and header.php in my Child Theme (along with style.css, of course).



    Forum Moderator

    I would assume that applies to all .php files

    All theme template files, yes. Anything that is outside of the normal theme template architecture (eg my-custom-script.php) would need to be checked on an individual case basis.

    I know my way around in a welding shop as well as you folks know your ways around here, but I have decided to ask a Developer to do this for me!

    Many thanks for your interactions here and the related things I have learned.

    @noahjonah: Am I getting close?

    <div id="logo" name="circuslogo" img src="http://www.nonameyet.org/wp-content/uploads/circuslogo.png"></div>
    <div id="myDiv" name="myDiv" title="Example Div Element">
    <p>* * * * * * * *</p></div>

    The Subtitle test is showing up fairly close to where I want the logo to appear, but I have yet to make it show.

    Got it.

    What do I need to do to make the Title follow the logo and get Search back to the top?

    Welcome to NoNameYet A.A. Chat!

    Got it again, and now I just need some padding…

    Many thanks!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] How to add a relative second-header image or a logo’ is closed to new replies.