Slider Settings - Below Masthead but Not Completely

[madelinekatestudios]

Hello,

I have activated the “slider below masthead” to show a full-screen hero scene revolution slider. I have my navigation set to be transparent at first, but as you scroll it becomes opaque. Upon first load of the home page, I can see that the slider is not pushed all the way up to the top of the page.

In screenshot one you can see how the navigation is transparent, so the white logo/text is hidden on the white background where the slider is missing. In screenshot two, you can see as I scroll down the elements in the navigation that should appear.

I have tried adding CSS to my page unfortunately have not been successful. I can provide login credentials if needed. Thank you!

[ruenel]

Hello Madeline,

Thanks for writing in! Your site is under construction mode. Regretfully the given WP access does not work for us.

Please double-check it. Thanks.

[madelinekatestudios]

I updated the secure note with the passcode to bypass the under construction page.

[ruenel]

Hello Madeline,

Only the password for the under-construction works for us. Anyway, you are having this issue because the Navbar Top Height setting is less than the actual height of your navbar. Please go to X > Theme Options > Header > Navbar and set the Navbar Top Height to 108 pixels.

We would love to know if this has worked for you. Thank you.

[madelinekatestudios]

Hey there,

That is very bizarre. That is the password that I use and how I am logging into the site actively. I updated the secure note to make sure there are no spaces anywhere for the easiest copy and paste experience.

That did not fix the issue. I want the slider to be all the way at the top of the page, underneath of the header. I changed the navbar height to 0 and that worked it shows properly in the theme options preview, but on the live site it is still not all the way to the top of the page.

This screenshot below is how I want it to appear. That way when the site loads users will see the navigation menu on top of the colorful slider, and as they scroll down the nav bar changes to a color.

[madelinekatestudios]

I’m sorry that did seem to work, I changed the navbar height to 0. It is showing up properly now.

But new question - how do I remove that line/shadow that is at the bottom of the nav bar?

[nabeel]

Hi Madeline,

Setting the Navbar Top Height to 0 will cause issues later on, please reset it to 108 pixels which is the actual height of your header via X > Theme Options > Header > Navbar.

To show slider under the main menu, you can add the following code in the Theme Options > CSS:

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

You can then remove the bottom border from the menu with the following code:

.x-navbar {
    border-bottom: none;
    box-shadow: none;
}

We’d love to help further but this would require further custom development and it is outside the scope of our support. X header was not designed for in depth customization so we often receive header related customization questions or requests and this was the reason why a header and footer builder was created and an advanced X version was formed now called Pro. Please consider upgrading to Pro so you can build a custom header yourself without custom coding. In case you upgrade to Pro and you get stuck with the options, we’re here to assist all the way.

Hope this helps!

[madelinekatestudios]

@nabeel

.x-navbar {
    border-bottom: none;
    box-shadow: none;
}

Hi there,

Thank you for your help. I understand you are saying you cannot help me anymore, but I need one small thing tweaked. The CSS was for the home page only, I need this to be on all pages.

Thank you!

[christian]

Hey Madeline,

Remove .home in all your codes.

Please learn CSS as well as the browser’s element inspector for the rest of your CSS needs.

Thanks.