logo and navbar over slider

A clarification: it’s not really the nav bar that is wrapping wrong – it’s just a responsiveness issue stemming from the top margin adjustment. I am now in the painstaking process of manually adjusting it based on the queries set out here:
https://www.themesandco.com/snippet/media-queries-responsiveness/

I think this method works for getting the logo and nav on top of the slider, but if there is a simpler or more elegant way to do it, I’m all ears (or eyes, more accurately).

I’d also be interested in the code for the styles of the Unity nav bar if you get there.

Hi Katie, thanks for your efforts.
I’m just trying your css in my child one and it works except for the navbar on top of slider effect.
I’m testing it with chrome and safari both the latest version.
here you are my css file filled with your code:

/*
Theme Name: customizr-child
Version: 1.0
Description: A child theme of Customizr
Template: customizr
*/

@import url("../customizr/style.css");

/* NAVBAR ON THE TOP OF THE SLIDER */

/* Adjusting the top margin of the carousel */
.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;
}

/* 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;
}

/* 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;
}

/* END OF NAVBAR ON THE TOP OF THE SLIDER */

Hi Ryan,

Class style should be:

.home .tc-header
NOT .home .tcheader

I apologize, I made a mistake when I typed in my code above – it was late!

That change should make it work for Safari and Firefox … interestingly, it still won’t work in Google Chrome and I need to dig into that a bit.

I also decided to take out the float right navbar code and the code to move navbar up a bit and use the relevant code from this snippet.

Worked beautifully – I may have added some margin between each menu item too.

And now I am using the following media queries – when the screen shrinks below 979 I don’t want the image under the header stuff anymore, it just stacks like the demo site. Have not tested on all devices but it’s a start.
(This time I will cut and paste!):

/*slider responsiveness */

@media (max-width: 1200px) {
 .carousel-inner {
margin-top: -112px;
}
}

@media (max-width: 979px) {
.carousel-inner {
margin-top:0px;
}
}

If anyone knows how to make this work in Chrome please post…and I am afraid to check IE!! I considered hooking the slider to the top of the page and then putting the header items in that div but I don’t want them in there when I resize it for small devies so wasn’t sure if that would be more trouble than not (although I suspect it would solve the Chrome issue).

Hi Katie,
I made the change you suggested, but it nothing change.
I re-up here my css, (it’s definitely kiddin’ me!).
Anyway, thank you very much Katie!

/*
Theme Name: customizr-child
Version: 1.0
Description: A child theme of Customizr
Template: customizr
*/

@import url("../customizr/style.css");

/* NAVBAR ON THE TOP OF THE SLIDER */

/* Adjusting the top margin of the carousel */
.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 .tc-header {
background-color: transparent;
border-top: none;
border-bottom: none;
z-index: 200;
}

/* 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;
}

/* 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;
}

/* END OF NAVBAR ON THE TOP OF THE SLIDER */

Hi, I am trying to figure out the same thing . Any help appreciated.This site has done the same but menu is not transparent.Apart from that there is a big white space above slider in mobile devices.

Did anyone else get this solved by any chance? I’m trying to get a navbar over a slider, similar to https://www.macrotive.com/

Any help would be greatly appreciated.

If you require assistance then, as per the Forum Welcome, please post your own topic instead of tagging onto someone else’s topic.

I am now closing this 7 month old topic as it references an older version of WordPress.