Support » Themes and Templates » Overlay image over menu

Viewing 12 replies - 1 through 12 (of 12 total)
  • 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>';

    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.

    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?

    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>';

    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?

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

    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”>
    echo ‘the image’;
    code to call the menu;

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

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

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

    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…


    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>

    – 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>

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Overlay image over menu’ is closed to new replies.