Support » Installing WordPress » header image behind hnav bar

Viewing 11 replies - 1 through 11 (of 11 total)
  • You’ll need to use layers [div], and make the title and nav bar a separate layer from the rest of the page, making sure you get the z-index such that this new layer appears on top, not underneath (otherwise you won’t see it, and you won’t be able to click the links, either!). This is a straightforward html thing. Let me know if you need further help…

    Ok, sorry, I’ve just look at your code, and obviously you already have divs/layers, you just need to specify their location on the page. The two layers you need are the ID=”menu” and ID=”header”.
    You’ll either need to edit your index.php (or header.php, whichever this section is in), or better still, change the style sheet, which will involve finding the section of your theme’s tyle.css file marked #menu and #header.

    Try this, then –
    1. Find in your code the <div id="menu"> and replace it with <div id="menu" style="position:absolute; top:310px; left:400px;">
    2. Find, below that, <div id="header"> and replace it with <div id="header" style="position:absolute; top:310px; left:135px;">
    You can fiddle with the numbers to get the placement exactly where you want: they refer to the number of pixels from the top and from the left that the layer will start (always goes from the top left corner).
    3. You might now have issues with the colour of the mouseover links, as they get hidden a bit on the background – this is something you can change in the stylesheet if you need to.

    Actually, forget that – on reflection, probably the best thing to do is to stick these numbers directly into your stylesheet – apologies for posting so many time before thinking things through properly! In the style.css file, find the section referring to .menu and .header. There’ll already be some position info in there, you’ll just need to change the numbers.

    that would be in the header.php file ?
    thanks for the help btw!

    no, try the stylesheet first – in your admin dashboard, go to PRESENTATION > theme editor and then select your theme’s stylesheet (style.css). Then look for the #menu and #header sections. They might already have entries for top and left – if so, change the numbers to the ones I suggested. If not, add the lines:
    top: 310px;
    left: 135px;

    to the #header section, and
    top: 310px;
    left: 400px;

    to the #menu section.
    making sure you add these lines in between the curly brackets, where all the other entries are. And of course if you don’t like these new positions, keep on changing them until you’re happy – obviously to move the header up, decrease the top: number, and to move the thing further left, decrease the left: value.

    well your suggested changes in header.php seem to get them up there… Would it be better to try and do it in the style sheet?

    they are in the right spot except when you adjust the size of the window they don’t move and everything else does.

    Yes, it would, on reflection, because the new changes in the header are overruling the stylesheet. Even though it works, it’s bad form (and pointless and inefficient) to have conflicting values. I forgot about the stylesheet, I’m sorry! I was a little bit too hasty to answer…heh.
    So yeah, probably best change the header back to how it was, removing the style=”…” bits, and just plug the new position values into the stylesheet, as I mention in the post above. Apologies for the confusion.

    I did that and they haven’t moved…

    style sheet reads
    #header {
    float: left;
    width: 200px;
    margin: 0px;
    padding: 0px;
    text-align: left;
    top: 310px;
    left: 135px;
    height: 20px;
    #hmenu {
    margin: 2px 5px 0 0;
    text-align: right;
    float: right;
    top: 310px;
    left: 400px;
    width: 475px;


Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘header image behind hnav bar’ is closed to new replies.