[Resolved] How to position a slider behind logo and nav

[Peter Islin Nielsen]

Hi Tom,

I need to put a slider (Master Slider) behind the site logo and navigation – but only on the front/home page. I’ve accomplished it with negative margins and z-index, but I feels kinda hacky… So, how would you prefer to do it? Maybe hooks is a better choice?

Thanks in advance ?

[Tom]

Hi Peter,

Any chance you can show me what you’ve accomplished so far? I may be able to make it a little less hacky 🙂

[Peter Islin Nielsen]

Yes, of course:
http://www.jupitergroup.com/jupitergroup/

There’s a few problems with the way I’ve done it, though. First of all, the negative top-margin puts the slider up where I want it, but it unfortunately also leaves a lot of unwanted space beneath it. I know it’s because of the negative top-margin. Also, it doesn’t seem to work on Opera for Mac, where there’s a miscalculation positioning the slider 6 pixels lower than expected. Not a biggie, but still annoying 🙂

So, as you can see it’s pretty hacky. I’m sure it can be accomplished better with GP Hooks or nicer CSS…

Thanks!

[Tom]

Hi Peter,

Instead of all of that, I would just do this:

.home .site-header {
    position: absolute;
    width: 100%;
}

It will be an option in the next version of Page Header 🙂

[Peter Islin Nielsen]

Wow, that was efficient! Thanks, Tom – and have a happy new year 🙂

[Tom]

You’re welcome. Happy New Year to you as well! 🙂

[Author]

Posts