-
Posts
-
Hi
I would like to have the navigation menu icon with the background permanently transparent. The homepage opens with the “burger” icon but when we scroll down, that area becomes white. How can I change the code, in CSS or in the theme options, to be always transparent and keep the “burger” icon always the same color: a slightly light grey.
Thank you
Just remembered, is it possible to give a 10% background transparency for example? For the navigation bar (burger icon) background only, I mean.
Thank you
Hi,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaHi Victoria,
For example, on this demo: http://kriesi.at/themes/enfold-2017/
The top bar is transparent. When se scroll down, the transparent background becomes white: http://dns.d.pr/9bELgk/3sUDvYCc
I was looking for a solution where we can keep it always transparent (100%) or have some level of transparency such as 10% or 20% so we can see what’s behind the bar when scrolling.Hope this makes sense?
Thank you
Hi,
We should be able to do this, Please include the url to the page in question so we can create the code :)Best regards,
MikeThank you Mike
The page is not live yet, but this is the closest menu we will have: http://kriesi.at/themes/enfold-creative-studio/
I assume the code will be the same if created from the demo?Many thanks
Hi,
Try this code in the General Styling > Quick CSS field:.header_color .header_bg {background-color: transparent!important; }Best regards,
MikeHi Mike,
Thank you for your help. That kind of worked, but we faced some issues with the mobile version.
Let me put this in a simple way:
How to make the “normal” no transparency header always transparent?Since we want it always to be transparent… it makes more sense to have the option “no transparency” selected but with a modified CSS that will make transparent.
And how to set the burger icon color to be light grey, always?
Thank you.
Hi,
Try this code in the General Styling > Quick CSS field:.header_color .header_bg {background-color: transparent!important; } #top #wrap_all .header_color.av_header_transparency {background-color: transparent!important!important; } @media only screen and (max-width: 767px) { .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {opacity: 0 !important;} .responsive #top .av_header_transparency .logo img.alternate {display: block !important;} #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background: transparent!important; position: absolute!important; }}Best regards,
MikeThank you once again Mike.
I just noticed that the header navigation background is not 100% opaque, by default. It is kind of 90% opaque or something. Can this value be adjusted through CSS? This way we can play with percentages (or from 0.0 to 1.0 if I am not wrong) to control that bar’s transparency level.
Many thanks.
Hi Mike
It’s still not public. Here is a screenshot where the navigation menu bar is slightly transparent: http://dns.d.pr/PC2x6M/1Zn8uv43
You can still read the text and see the image.I am assuming the transparency is something like 0.9 (almost opaque). Can I manually change this to, let’s say, 0.4 or even 0.0 if I want it fully transparent for example?
Thank you
- You must be logged in to reply to this topic.