Docs

[playgroundmm]

Hi,

I’m trying to set the nav bar to have transparency with a fixed menu in the Integrity stack at this URL
http://www.playgroundmultimedia.com/teal/

I have added the following CSS which works as I want when the menu is set to ‘static’ but when I set the menu to ‘fixed’ there seems to be an extra white background and I can’t seem to get rid of it.

.x-navbar {
background-color: rgba(47, 144, 152, 0.5);
border: medium none;
box-shadow: none;
margin-bottom: -91px;
}

When you scroll down the page the effect I’m after is working.

Wordpress 4.7.2
X : 4.6.4
Cornerstone: 1.3.3

[Christopher]

Hi there,

Are you referring to bottom margin? if so, please add this code:

.x-navbar-fixed-top-active .x-navbar-wrap {
    margin-bottom: 0;
}

Hope it helps.

[playgroundmm]

ok yep turns out it was the bottom margin – I had to set it to -91px though to get the effect I was after.

Thanks for your help 😉

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[playgroundmm]

Hi again,

I’ve just added my first WooCommerce product to the site and the product page is kind of up behind the menu due to the css we added….

.x-navbar-fixed-top-active .x-navbar-wrap {
margin-bottom: -90px;
}

you can see an example here: http://www.playgroundmultimedia.com/teal/product/the-portarlington/

What do I need to do to make it so that all pages sit properly down from the menu as they normally would?

Cheers

[Paul R]

Hi,

Please change your code to this.

.home .x-navbar-fixed-top-active .x-navbar-wrap {
     margin-bottom: -90px;
}

Hope that helps.

[playgroundmm]

ok I did that but now I’ve lost the transparency of the nav bar.

I just want the nav bar to be transparent throughout the entire site. I’ve attached 2 screenshots to help show you.

Cheers

[Paul R]

Hi,

Upon checking, I can see you did not replace the code.

Please replace the code in your custom css that reads

.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: -0px;
}

with this

.home.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: -90px;
}

Hope that helps.

[playgroundmm]

Hi,

no that last css doesn’t do what I need – it keeps the white background behind the nav bar like in my screenshots

[Rad]

Hi there,

Please change it to this

.home .x-navbar-fixed-top-active .x-navbar-wrap {
margin-bottom: -90px;
}

Cheers!

[playgroundmm]

Hi,

the home pahe was already doing what I need it to do before adding in your CSS. The problem is that this CSS is basically lifting every page up by 90px so it you look at this URL you will see that the page content is now behind the menu: http://www.playgroundmultimedia.com/teal/product/the-sandringham/

How do I stop this from happening?

cheers

[Christopher]

Hi there,

If you update your code with the following, the probblem should be fixed :

.x-navbar-fixed-top-active .x-navbar-wrap {
    margin-bottom: -90px;
}

Please see the attachment.

Hope it helps.

[playgroundmm]

nope. I tried that earlier.

If I use:
.home .x-navbar-fixed-top-active .x-navbar-wrap {
margin-bottom: -90px;
}

then the nav bar and content is in the correct position across the whole site but there is no nav bar transparency (on the home page I should be able to see the diagonal lines of the background image through the nav bar) – there seems to be a white layer between the nav and the content behind.

If I change the CSS to:
.x-navbar-fixed-top-active .x-navbar-wrap {
margin-bottom: -90px;
}

then then transparency effect works throughout the site because it has lifted all the content UP by 90px which means that the white layer behind the nav bar doesn’t get seen but it also means the content in the other pages ( eg: http://www.playgroundmultimedia.com/teal/product/the-balnarring/) has the nav bar in front of it.

[Paul R]

Hi,

Please change the code to this.

.home.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: -90px;
}

There should be no space between .home and .x-navbar-fixed-top-active

Thanks

[playgroundmm]

Brilliant, thank you.

[Author]

Posts