Docs

[AlCAt]

Hi,

I would like my navbar to be transparent on mobile and tablet. The background would only be revealed when triggering the menu. Can you help me with the CSS? 🙂

Thanks!

[AlCAt]

This reply has been marked as private.

[Christopher]

Hi there,

Please find and remove following code :

@media only screen and (max-width: 979px) {
.x-navbar {
    background-color: rgba(0,0,0,1) !important;
}
}
/*Mobile Nav bar background*/ 
.x-navbar {
  background-color: transparent !important;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9998;
}

html { margin-top: 32px !important; }
	* html body { margin-top: 32px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 46px !important; }
		* html body { margin-top: 46px !important; }
	}

Add this:

@media (max-width:979px){
.x-nav-wrap.mobile {
    background-color: rgba(0,0,0,0.5);
    padding: 10px;
}
header.masthead.masthead-stacked {
    position: absolute;
    top: 53px;
    z-index: 999;
    width: 100%;
    height: 0;
}
}

Hope it helps.

[AlCAt]

Hey Christopher,

Thank you for the reply!

I removed the CSS except for the HTML part that I couldn’t find.

I have applied the new CSS but the bar is still showing and is not placed on top.

[Christopher]

Hi there,

Please add this code :

@media only screen and (max-width: 979px){
.x-navbar {
    background-color: transparent !important;
}
}

It will give you following result :

Hope it helps.

[AlCAt]

Working great! Is there a way to bring the menu higher? 🙂

[Rupok]

Hi there,

Thanks for writing back. It’s just under the Navigation button, so not sure how do you want to bring it higher. You can use this CSS to eliminate some spacing above :

.x-navbar .mobile .x-nav {
    margin: 5px auto 20px;
}

If you still need help, kindly point us what you are trying to achieve.

Cheers!

[AlCAt]

Hi Rupok,

Thank you for the code. Unfortunately it didn’t change anything. In the customizer mobile preview, the menu appears lower than in your screenshot. I have a same issue when viewing the website on my phone.

I have attached a screenshot

[Christopher]

Hi there,

Please update your code to :

a.x-btn-navbar {
    margin: -23px auto 20px;
}

Hope it helps.

[AlCAt]

Thank you very much! 🙂

[Thai]

If you need anything else please let us know.

[Author]

Posts