Make menu transparent on slider rev

Support
#1

Hi there,

Been trying to figure out how to make the menu transparent and appear on top of the slider rather than having it’s own area, I’ve tried all of the CSS codes in other forum topics but they don’t seem to work for my site? The slider rev is put onto the page using cornerstone function so maybe this is why it’s not working for me?

here’s my site.

Thanks

#2

Any help? Quite urgent.

#3

Hi There.

In order to get help faster, please avoid bumping on your own threads as it pushes your thread to the end of the queue again.

Please add to Theme Options CSS the following code.

  @media(min-width: 980px) {
 .home   .x-main.full {
        margin-top: -155px;
    }}

Hope it helps

#4

Hi thanks for the response! Unfortunately this didn’t seem to change anything…

#5

Hey,

You can try to add the !important after the rule. Like this:

.home .x-main.full {
margin-top: -155px !important;
}}```
#6

Hey, this didn’t seem to work either :frowning:

#7

Hi again,

I checked your site and it seems like you’re using a cache plugin, Always make sure to purge cache after making any change to the site.

Let us know how this goes!

#8

Hi again,

I cleared the cache both times after trying each code and it didn’t work.

Any other ideas?

Thanks a lot

#9

Hey There,

We’ve tried that code on our local environment and it 100% works so you will need to see if there is any cache involved on why the changes are not appearing. Do you use Cloudflare or any hosting specific cache?

#10

Am I right in adding the code to the appearance > customiser > custom css > edit global css?

#11

Hi again,

Yes that’s right, but try moving the above CSS to your child theme’s style.css file and see if this works but make sure to purge the cache after doing this:

Thanks!

#12

Thanks so much it’s worked!!

Although there’s a strange transparent blur/line just beneath the menu? see here how do I get rid of this?

#13

Hi again,

To get rid of shadow beneath the menu, add the following code in your Child Theme’s style.css file as well:

.x-navbar {
    box-shadow: none !important;
}

Cheers!

#14

Thanks for your help that’s great!

One more thing, my site is transparent on Google Chrome, but on IE it’s not showing up as transparent? (see screenshot) how do i fix this?

#15

Hi again,

I checked your site in IE and Edge browsers and it’s displaying transparent. Make sure to clear your browser’s cache and then check your site again.

Hope this helps!