First of all, I want to say I LOVE BeaverBuilder! It’s made my job 100x easier and allowed me to create some beautiful stuff. My question is; How do you call to the mobile css? I’ve already used your amazingly helpful support forums to find out how to create a transparent header and it looks awesome. But, I want the background navigation on mobile to be black (it just looks better than transparent on mobile). I’ve looked through the css documentation and the support forums and haven’t been able to find any information on the css for mobile. Any help would be appreciated. The site I’m working on is http://www.new.ariseconstruction.net
Great to know you’re loving the product! Custom CSS for mobile requires the use of media queries. You just basically wrap your custom CSS with these so it only gets applied when the width condition is met.
@media screen and (max-width: 300px) {
element {
/* CSS here */
}
}
You can check the link above for more information.
Awesome! Works! However, the sub links (under home) still have a white background and they’re going behind an image element from the bb plugin. Tried adjusting the z axis with no results. Any ideas?
You can fix the sub menu by changing the z-index of header.fl-page-header-primary to 2 or any number higher than that. It should look like this.
.fl-page-header-primary {
position: relative;
z-index: 2; /* Can change the value higher depending on content */
background: none;
}
You can change the background of the submenu by targeting this class header .fl-page-nav ul.sub-menu. Lastly, the User Voice Forums is fine from my end both on Chrome and FF. Check screenshot. http://imgur.com/3Ilo7AC
.fl-page-header-primary {
position: relative;
z-index: 999999999999;
background: none;
}
and still not working. the “reviews” section goes behind the large logo image I have above the slider.
That’s because you added another block of CSS for the same element that was already called earlier. Check the screenshot. http://imgur.com/8v4xTjd
Since there was already another block of CSS for .fl-page-header-primary and it was loaded first, the second block for the same targeted element is ignored, hence the strike-through. You can delete the new block of CSS then just change the previous block’s z-index value.
