logo and navbar over slider

Take a look at the Snippets and you should find something to help

This one is probably what you want.

Thanks Dave,
I’ll take a look immediately.

Ok, I’ve read but I can’t figure out how to set my needs.
Please consider I’m a beginner and I’m still learning.

Thanks.

Could you explain why that snippet doesn’t so what you want for clarification?

Here an example on what I’d like to achieve: https://unity3d.com

Could you link your site too?

Maybe the title:
logo and navbar on the top of slider

is better and cleaner than:
logo and navbar over slider

I’m sorry but I cannot change title.

Of course:

https://www.nobrainmorefear.com

Try using this CSS:

.tc-header {
 position: relative;
}

.tc-header .brand .site-logo {
 position: absolute;
 bottom: 0;
 z-index: 201;
}

Ok Andrew, now I’ve got logo in the middle and on the top of navbar, but navbar is still above the slider.
Half way done.
However thank you I really appreciate!

Sorry, I forgot you wanted it on the slider when i looked at that example site

Don’t worry Andrew, I appreciate your help!
Actually I’m trying to figure out how to unhook and re-hook slider to have it on the very top of the page.
Now I need to get this navbar (and logo too) “z-index matter I think..” on the top of the slider, but it’s tricky for me… argh!!!

It’s also tricky thinking where it’ll fit in for mobile.

Yes! mobiles too! “Damn devices ;-)”.
Well, it’s saturday late afternoon.
It’s time to quit for a bit.
By the way I’m looking at your blog, very interesting.

Thank you again!!!

Hi Ryan,

I’m trying to do the same thing. I got pretty far by doing the following:

Adjusting the top margin of the carousel using this CSS (in my Child Theme!):

.carousel-inner {
margin-top: -10%;
z-index:-1;
}

Making the header transparent and getting rid of the line at top (if you wish) and assigning it a z-index of 200:

.home .tcheader {
background-color: transparent;
border-top: none;
border-bottom: none;
z-index: 200;
}

(Notice I used .home – that is because I still wanted the gray line under the header on my interior pages)

I also moved the nav menu and got rid of the tagline like this (you might not want this in yours if you want your menu centered – there is a Snippet in the theme documentation for centering the navigation, I wanted mine to float right):

/* Remove the Tagline */

.navbar-wrapper .navbar h2 {
display: none;
}

/*move navbar up a bit*/
.navbar-wrapper {
margin-top: -20px;
}

/*float nav bar right*/
.navbar .nav {
float:right;
}

Also got rid of the navbar box:
/* Remove Navbar box */
.navbar .navbar-inner {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

So everything looks pretty good (have not figured out how to add the transparent box behind menu items yet)

. . . EXCEPT when I start resizing my screen. The nav bar is wrapping wrong. I think this is a media query thing and I need to dig into those but if anyone has already invented that wheel I’d love to hear about it!

I also tried rehooking the slideshow to the very top of the page (there is a snippet on the site documentation for this too) but that pushed the logo and nav bar under the slider , so not so helpful for what we are trying to do. I decided to go back to the negative top margin method…

Help welcome…