Hi Guys, this topic has been introduced several times in the support forums. I’ve seen tons of code to get it done but didnt work for me…
So, could you help me to get that transparent navbar in my site? Currently the slider is above the masthead: thevalhallacommunity.com
Thanks so much!
Hi There,
Thank you for writing in, please add this to Theme Options > CSS
.masthead.masthead-inline {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.x-navbar {
background-color: transparent !important;
border-width: 0 !important;
}
Hope it helps,
Cheers!
It worked smooth! but when i scroll down and pass the slider it continues being transparent, which i would rather avoid. I would like to have it like usual in the rest of the web.
Thank you very much and happy christmas! 
Hi There,
Could you please provide us with a screenshot of this issue? as I could not understand your concern here.
Thanks!
I think the problem could be solved with javascript code.
In the slider i want the navbar to display just the way it’s now, but in the rest of the page when i scroll down i want a semi-transparent background behind the navbar.
Hi there,
Please replace the above CSS with this.
.home .masthead.masthead-inline {
height: 0px;
}
.home .x-navbar {
background-color: transparent !important;
border-width: 0 !important;
}
.home .x-navbar.semi {
background-color: rgba(252, 252, 252, 0.80) !important;
border-bottom: 2px solid rgba(204, 204, 204, 0.8) !important;
}
Then add this code to your global custom javascript.
jQuery( function($) {
$(window).scroll( function() {
var offset = $('.home .x-slider-container.below').height();
if ( offset <= 0 ) return false;
if ( $( this ).scrollTop() >= offset ) {
$('.home .x-navbar').addClass('semi');
} else {
$('.home .x-navbar').removeClass('semi');
}
} );
} );
Hope this helps.
it worked!!! Thank you very much, awesome support.
You’re most welcome.
one more question
is there any way to prevent this from happening in devices in which the menu is displayed into a button?
The results are pretty good in pc or tablets where the menu is full displayed with each link in the navbar but it doesnt work visually in devices where the menu is dropdown type
Mobile:
So the idea is to restrict this to pc and devices where full menu is displayed. I hope this could be done.
Thank you very much again!
Hi There,
To do that, let’s wrap this block of code into @media (min-width: 980px) media query.
.home .masthead.masthead-inline {
height: 0px;
}
.home .x-navbar {
background-color: transparent !important;
border-width: 0 !important;
}
.home .x-navbar.semi {
background-color: rgba(252, 252, 252, 0.80) !important;
border-bottom: 2px solid rgba(204, 204, 204, 0.8) !important;
}
e.g.
@media (min-width: 980px) {
.home .masthead.masthead-inline {
height: 0px;
}
.home .x-navbar {
background-color: transparent !important;
border-width: 0 !important;
}
.home .x-navbar.semi {
background-color: rgba(252, 252, 252, 0.80) !important;
border-bottom: 2px solid rgba(204, 204, 204, 0.8) !important;
}
}
Hope it helps,
Cheers!
it worked, i tested and it displays as usual in under 1024px (i modified it) width devices, fine!
Concerning the font color in the links, i’m experiencing some visual discomfort. In the slider the background tends to be dark, so the links setup would be perfect being white or grey. Meanwhile at the rest of the page the background of the navbar is white (with less opacity, but white overall) so the links are perfectly displayed being red or darker.
The code i’m using is:
@media (min-width: 1024px) {
.home .masthead.masthead-inline {
height: 0px;
}
.home .x-navbar {
background-color: transparent !important;
border-width: 0 !important;
}
.home .x-navbar.semi {
background-color: rgba(252, 252, 252, 0.95) !important;
}
}
So would be anyway to display different link and link hover colors into the slider and below it?
Thank you very much.
Hi there,
I am sure you will understand that the questions and the request are outside of our support scope and is part of the customization. My colleagues did their best to make it as you want but from now on the customization will be on your shoulders.
It is recommended that you get familiar with the CSS and its selectors. For more information:
Or you can hire a freelancer developer in the X Facebook User Group.
To answer the last part of your question please kindly add the CSS code below:
@media (min-width: 1024px) {
.home .x-navbar:not(.semi) .desktop .x-nav > .current-menu-item > a,
.home .x-navbar:not(.semi) .desktop .x-nav > li > a {
color: white;
}
.home .x-navbar:not(.semi) .desktop .x-nav > li.current-menu-item > a > span,
.home .x-navbar:not(.semi) .desktop .x-nav > li > a:hover > span {
box-shadow: 0 2px 0 0 white;
}
.home .x-navbar:not(.semi) .x-nav > li.x-menu-item-woocommerce > a .x-cart {
color: white;
}
}
Thank you for your understanding.
I appreciate all the support!
Thank you very much to all of you guys!
Glad that we could be of a help
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.