WordPress.org

Ready to get started?Download WordPress

Forums

header image behind hnav bar (12 posts)

  1. bull_677
    Member
    Posted 9 years ago #

    can someone give he a hint with getting my horizontal nav bar on top of my header image?
    http://www.tothisend.com
    would also like to get the header title (to this end) on top of the image also...thanks!

  2. fouriertransform
    Member
    Posted 9 years ago #

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

  3. fouriertransform
    Member
    Posted 9 years ago #

    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.

  4. fouriertransform
    Member
    Posted 9 years ago #

    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.

  5. bull_677
    Member
    Posted 9 years ago #

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

  6. fouriertransform
    Member
    Posted 9 years ago #

    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.

  7. bull_677
    Member
    Posted 9 years ago #

    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?

  8. bull_677
    Member
    Posted 9 years ago #

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

  9. fouriertransform
    Member
    Posted 9 years ago #

    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.

  10. bull_677
    Member
    Posted 9 years ago #

    I did that and they haven't moved...

  11. bull_677
    Member
    Posted 9 years ago #

    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-transform:lowercase;
    text-align: right;
    float: right;
    top: 310px;
    left: 400px;
    width: 475px;

  12. bull_677
    Member
    Posted 9 years ago #

    Fixed!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.