Hi, my site is evergreenkc.co and I am having quite a bit of trouble with the mobile navbar after making my navbar transparent. It looks especially bad when I open up the navbar button on mobile. I was curious if it’s just possible to have a navbar thats transparent on desktop, yet solid on mobile.
Here is what happens when I open up the navbar on mobile - looks really bad.
Hello @Curdabur,
Thanks for asking. 
Please add following CSS to have solid background color on mobile:
.x-nav-wrap.mobile {background-color: #000;}
Thanks.
I already have that in there but it doesn’t make the actual navbar have any background, it only makes the drop down have a background (as shown in the original picture). Is there another recommendation you have?
Hi there,
Please try this:
@media (max-width: 480px) {
.x-navbar {
background-color: rgba(0,0,0,0.87);
}
}
Hope this helps.
I am having the same problem- I would like a transparent navbar as is currently showing, but a background when the navigation button is active.
.x-nav-wrap.desktop {
display: none;
}
.x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.mobile.in, .x-nav-wrap.mobile.collapsing {
display: block;
}
.x-navbar {
border-bottom-color: transparent !important;
box-shadow: none !important;
background-color: transparent;
}
.page .masthead {
left: 0;
position: absolute;
right: 0;
top: 0;
}
.x-nav-wrap.mobile {background-color: white !important;
}
Would be really grateful for some help on how to sort this.
Hi there,
I have checked your site and you seem to have gotten it sorted already.
Please let us know in case you are still not able to figure it out.
Thank you so much for looking Jade- sorry, I was not clever enough to work it out.
The Transparent Navbar is only on this page https://www.ancamasmor.com/event-february-aviemore-development-cairngorms-community-rothiemurchus/.
(Because this is an event promoted by our community council/ architects, so we want to remove our branding) -
But I haven’t changed the Navbar on the rest of the site, just this page. Put I can’t keep the transparent navbar without messing up the mobile navigation button.
Hi There,
You can add this to Theme Options > CSS
.page-id-6350 .x-navbar {
background-color: rgba(255,255,255,1);
}
Hope it helps,
Cheers!
Jade thanks for the reply- but I want to keep the navbar transparent. (sorry for the confusion), hence the CSS
.x-navbar {
border-bottom-color: transparent !important;
box-shadow: none !important;
background-color: transparent;
}
But I want the background display properly if the mobile navigation button is active. Is this possible?
Many thanks for your help,
Alexandra
Hi There,
Please add the following CSS and let us know if it helps.
Otheriwse provide a mockup to clarify what you want to achieve.
.x-nav-wrap.mobile.in, .x-nav-wrap.mobile.collapsing {
padding: 2%;
margin-top: 80px;
border-radius: 1em;
}
Hope it helps!
Hey there! I’m having this Issue as well.
I have a website with a Transparent Header. But I’d like to have a colored full screen drop down menu on mobile and still keep the transparent desktop header. Could someone help me with this?
Hi Jon,
What you are trying to do, is possible with a custom Header using Header Builder which is exclusively available with Pro not the X, and add the Humberger menu elements for the specific breakpoints and Navigation Inline elements only for other breakpoints.
If you are using the X, I would suggest you upgrade to the Pro theme, please go through the process here: https://theme.co/docs/converting-from-x-to-pro
And also go through the following article on Header Builder.
And then you can add the following Navigation element for the desktop:
And then you can add the following Navigation elements for smaller screen:
And adjust the Navigation by using the Customize > Hide During Breakpoint option to show/hide in the specific screen size.
NOTE: I would request you not add your comment to the closed ticket, rather suggest you create a new ticket for further assistance.
Thanks