Menu & Revslider Overlap

Support
#1

I’m trying to get my rev slider image to overlap my menu. So the menu is transparent at the top and the image peaks through. I’m also trying to remove “my blog”, and only have the logo (that I still need to upload) appear only when you scroll down. I only need this look on the homepage.

Currently I have the following code in my CSS:

.x-navbar.x-navbar-fixed-top {
background: rgba(0,0,0,0.9);
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
height: absolute;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 50px;
padding-top: 20px;
transition: all 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 50px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
margin-top: 5px;
}

.x-navbar-static-active .x-navbar.x-navbar-fixed-top .desktop .x-nav > li.x-menu-item-woocommerce > a, .x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top .desktop .x-nav > li.x-menu-item-woocommerce > a {
padding-top: 10px;
}

#2

Hey @Golder_webteam,

You don’t CSS for this effect in Pro. Please see this similar setup. If you don’t like that setup, please give us the URL of your page so we could check the possibilities.

Thanks.

#3

I’ve actually opted to use X

#4

Hi there,

Kindly provide us with the URL of your site so that we can check it and provide you with some suggestions.

Thank you.

#5

Here you go: https://dangeroustoaster.com/

#6

Hi,

Thank you for providing your site url.

Please replace your css code with this.

.home .x-navbar-wrap {
    position:absolute;
    width:100%;
}

.home .x-brand {
    display:none;
}

.home .x-navbar {
    background-color: transparent;
}

.home .x-navbar.x-navbar-fixed-top {
   display:block;
   background: rgba(0,0,0,0.9);
}

.home .x-navbar .desktop .x-nav > li > a {
   color: hsl(110,82%,57%);
}

Hope that helps.

#7

This worked! Thank you! Question though, when I do get my hands on a logo, how can I make that appear only when you scroll away from the rev slider?

#8

Hi there,

This code will hide the logo area by default:

.home .x-brand {
    display: none;
}

So to make it appear when you scroll down, you can add this CSS:


.x-navbar.x-navbar-fixed-top .x-brand {
    display: block;
}

Hope this helps.

#9

Thanks so much for this! One last thing, is there away to drop the text a bit? it sits very high once you start scrolling with the logo now installed.

#10

Hi there,

Please update this code:

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 50px;
    padding-top: 20px;
    transition: all 0.5s ease;
}

to

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 50px;
    padding-top: 40px;
    transition: all 0.5s ease;
}
#11

Sorry, which code am I updating? The one that you mention first is the one that isn’t in yet.

#12

Your current code has 20px top padding in the CSS. Please increase it to 40px.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.