Docs

[nonenone]

Hi there,

I have two questions:

1-How to make the website’s menu semi transparent on scroll? (like this website http://www.lunatic.com.au/)

2-How can I make section 1 E have one background?

To know what I mean please follow these steps:

-Login to the website.
-Go to the Home Page.
-Click on Edit with Cornerstone.
-On Layout scroll down to section 1 E.
-Choose the mobile view.

I would like section 1 E background to be one background but currently I have a white colour above the logo and when I click on the mobile menu the white colour expands.

How can I get rid of this white colour and which code or setting is causing this? I would like all of the background to be one background (one colour or one image).

[nonenone]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in!

1. Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.x-navbar').addClass("x-nav-trans");
	$(window).scroll(function(){
		if( $(this).scrollTop() > 100 ) {
			$('.x-navbar-fixed-top').addClass("x-nav-trans");
		}else{
			$('.x-navbar-fixed-top').removeClass("x-nav-trans");
		}
	});
});

And then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-nav-trans {
background-color: rgba(255,255,255,0.4) !important;
}

2. I’m not able to edit your homepage with Cornerstone, can you please grant us the administrative rights so we can take a look?

Thanks!

[nonenone]

This reply has been marked as private.

[Lely]

Hi There,

1.) Please update this CSS:

.x-nav-trans {
    background-color: rgba(255,255,255,0.4) !important;
}

To this:

.x-navbar.x-nav-trans {
    background-color: rgba(255,255,255,0.4) !important;
}

2.) That area is your logobar. It’s background is set to be transparent, so it is seeing the white background you have set for your site. We can add the following CSS to make it black on mobile:

@media (max-width: 979px){
.x-logobar {
    background-color:#000000;
}
}

Hope this helps.

[nonenone]

Hi,

1-I would like the menu to be transparent on the video background section and then become semi- transparent on scroll. Also the current on scroll menu is too small, how to make it bigger?

2-Now with this code there are three colours, black, grey and white when the menu is clicked. I would like the background to be a one background (weather a one colour or an image).

[Rad]

Hi there,

1. Change this CSS

.x-navbar.x-nav-trans {
    background-color: rgba(255,255,255,0.5) !important;
}

to this

.x-navbar.x-nav-trans.x-navbar-fixed-top {
    background-color: rgba(255,255,255,0.5) !important;
    padding: 10px 0px;
}

2. In that case, what color do you prefer?

Thanks!

[nonenone]

1-Worked perfectly! thank you.

2-I just want it to be one background whether it’s a one colour or an image (not like what I have now which is multiple colours and shades).

[Rue Nel]

Hello There,

Thanks for the updates!

2] To change the background color in smaller screens, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

@media(max-width: 979px){
  .site .x-btn-navbar, 
  .site .x-btn-navbar:hover {
      color: #fff;
  }

  .site .x-logobar,
  .site .x-navbar-wrap,
  .site #x-section-13 {
    background-color: red !important;
  }    
}

Hope this helps.

[nonenone]

Thank you for this.

How can I remove smaller screens and mobile menu?

[Christopher]

Hi there,

Please clarify what do you want to remove from mobile devices?

Thanks.

[nonenone]

I would like to remove the whole menu in smaller screens and mobile

[Thai]

Hi There,

Please add the following CSS:

@media (max-width: 767px){
    .x-navbar-wrap {
        display: none !important;
    }
}

Hope it helps 🙂

[Author]

Posts