Master Slider Under Banner/Menu

[guerrerom]

Before I try tweaking CSS and breaking something… is there a way to have the logo/menu header overlay (appear in front of) Master Slider? What I’d like to achieve is the header with the logo and menu appear with some transparency atop Master Slider running in the background.

[Hans (Support Admin)]

Yes you can do that.

Set the top header background color to Transparent (located in the Color Settings tab)

Add the following css to the Custom CSS field of the Custom Code section of Integral Options.

.navbar-default {box-shadow: none;}

[guerrerom]

Accomplished and saved, but the Master Slider hasn’t made its way to the top of the page. Assuming that the transparency setting is working, the slider seems to be inside a <div> that’s pinned beneath the header… it’s not floating to the top of the page.

On the Welcome Page I have 0 top, bottom padding. The Enable Image Slider and Set slider as background are both “on” and Master Slider is set to full width.

[guerrerom]

Hans – I cautiously tried some tweaks to the CSS for Master Slider and the Header, but have yet to find a trigger that works. I’ve removed the padding in the Master Slider container so now the slider lies directly beneath the header. Could it have something to do with “absolute” placement?

Cheers

[Hans (Support Admin)]

Add the following CSS to your Custom CSS field in Custom Code section of Integral Options.

This removed the padding at the top of the Master Slider.

.hero.masterslider {
padding: 0;
}

Combined with removing the box-shadow and making the background transparent for the top header, I believe you will have what you want to accomplish.

[guerrerom]

Hans – that worked! But… now with the slider tucked underneath the header transparency is not working. The Integral Options/General Settings/Colors/Header Background Color is definitely checked to be transparent. And .navbar-default {box-shadow: none;} has been added to the CSS.

I opened the editor and starting looking as the CSS file – is this the relevant CSS?:

.navbar-default {
background: #fff;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
height: auto;
width: 100%;
z-index: 1000;
}

It doesn’t seem so because I tried changing the rgba parameters and they had no effect. Where should I be looking.

What I’m seeing is a plain white header with no transparency.

Thanks for your on-going support on this!

[Hans (Support Admin)]

@guerrerom

if you edit the style.css file on line 481 change the properties to the following,

.navbar-default {
background: none !important;
box-shadow: none;
height: auto;
width: 100%;
z-index: 1000;
}

Let me know if that works.

• This reply was modified 7 years, 6 months ago by Hans (Support Admin).

[guerrerom]

Unfortunately no change. I even deleted the entire snippet of this “navbar-default” CSS without a change which led to believe that the behavior is being driven from some other code element.

My default browser is FF 51.0.1, but I also tried it in Chrome 56.0.2924.87 without a change.

I see that the navigation element sits inside the “navbar-header” div but I cannot find any related CSS for it in style.css. I turned on FF’s debugger and though it identified a good number of errors I could find nothing associated with the header/navbar that could cause a problem.

I did find a inline style sheet, dynamic.css, with the following code snippet and wondered if this was overriding style.css – here the piece I’m referring to:

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > .active > a {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}

and a few lines below this there is:

.navbar-default {
background-color:#ffffff;
}

Could this be controlling the behavior of the header?

You’re help is greatly appreciated Hans!

[Hans (Support Admin)]

@guerrerom

You may need to disabled recently added plugins to see if one of those is causing an issue.

Also, can you provide me with admin access to your site so I can have a look?

Select “Set as private reply” when replying.

[guerrerom]

This reply has been marked as private.

[guerrerom]

This reply has been marked as private.

[Hans (Support Admin)]

@guerrerom

Oh right, I forgot you are working locally.

I tested the changes on our remote dev site, and it worked.

If it’s displaying errors then something is up and a plugin could be conflicting.

I also used Firebug to test the CSS changes and it works as well.

So let me know if you find anything after debugging.

[guerrerom]

This reply has been marked as private.

[guerrerom]

This reply has been marked as private.

[Hans (Support Admin)]

Ehhhh yeah, I think you’re right.

When you apply changes in Integral Options it prints them out in the theme header, so it looks like your changes are not taking effect, which is probably due to your environment (XAMPP).

Try uploading to a remote server. I’m sure it will work them.