Overlay image over menu

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="https://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.

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="https://example.png" /></div>';
get_header();?>
</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”>
<?php
echo ‘the image’;
code to call the menu;
?>
</div>

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…

anyone?

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>