WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Overlay image over menu (13 posts)

  1. John O.
    Member
    Posted 3 years ago #

    I'm trying to have an image that is currently placed just above my menu sit right on top of the menu. For example, i want the logo to overlap the menu to look like its sitting right on the menu. I need to know how to allow the image to overlay on top of the menu. RIght now, when i adjust padding it just pushes everything down and doesn't enter the menu container.

    If you need to know... below is the code i've used, plus some css, to add the image. Im using the Duster theme.

    echo '<div id="top-image"><img src="http://example.png" /></div>';
    get_header();?>
  2. degamer12
    Member
    Posted 3 years ago #

    Put a div around the code you put in the post above. Give this div a position:relative. Lets say you named the div 'testdiv'. Then your code would be:

    <div id="testdiv">
    echo '<div id="top-image"><img src="http://example.png" /></div>';
    get_header();?>
    </div>

    Then in your style add the following:

    #testdiv {position:relative;}
    #top-image img{position:absolute;top:0px;left:0px;}

    Just puzzle a bit with the top and left attribute till it stands where you want it to.

  3. John O.
    Member
    Posted 3 years ago #

    I tried it and its giving me a Parse error: syntax error, unexpected '<' on line 7 error in index.php. Any idea why that is happening?

  4. degamer12
    Member
    Posted 3 years ago #

    oowh my fault. Didn't closed the php up there. Probably the code should be

    ?><div id="testdiv"><?php
    echo '<div id="top-image"><img src="http://example.png" /></div>';
    get_header();?>
    </div>
  5. John O.
    Member
    Posted 3 years ago #

    Ok no error now... but it seems to have made my #page disappear. The page behind posts, for example, is gone. I can just see my background. Hope that makes sense. Any idea why thats happening?

  6. John O.
    Member
    Posted 3 years ago #

    and the image is behind the menu... i need it to sit on top...

  7. degamer12
    Member
    Posted 3 years ago #

    Oowh haha another fault of mine. Sorry kinda sleepy I guess. You should put the echo in your header.php. Not in the index. Then in the header.php, use the method I presented earlier. I hope you get what I mean. So the code in your header.php should look something like:
    `
    ?><div id="testdiv">
    <?php
    echo 'the image';
    code to call the menu;
    ?>
    </div>

  8. John O.
    Member
    Posted 3 years ago #

    code to call the menu? whats that? You mean get_header();?> ??

  9. degamer12
    Member
    Posted 3 years ago #

    No inside your header.php there is a wordpress code that generates the menu.

  10. John O.
    Member
    Posted 3 years ago #

    I cant seem to find that, would it be <nav id="access" role="navigation"> ?

  11. John O.
    Member
    Posted 3 years ago #

    i dont see a call to "get" menu or access or anything like that. I see get search form and get a bunch of other things. Any help with this or possibly another solution would be great. I essentially already had the image exactly where i wanted it (refer to my first post). I just need it to move down so its overlapping the menu a little bit...

  12. John O.
    Member
    Posted 3 years ago #

    anyone?

  13. csleh
    Member
    Posted 3 years ago #

    the menu might be this:
    <?php wp_nav_menu( ( ) ); ?>

    but it's all done in css just like the second posting.
    I see two options:
    - absolutely position the div "top-image", AS LONG AS it's inside a relatively-positioned container -- and that container ALSO has the navigation
    such as:

    <div class="container" style="position:relative;">
          <div id="top-image" style="position:absolute; top:0; left:0;"?><img /></div>
          <div id="navigation">nav</div>
    </div>

    OR
    - use negative margins and z-index to move the image
    such as:

    <div id="top-image" style="margin-bottom:-14px; margin-left:-14px;z-index=100;"><img></div>
    <div id="nav" style="z-index:1;">navigation</div>

Topic Closed

This topic has been closed to new replies.

About this Topic