Condiviso transparent menu
If you find this tweak helpful:
Beginners
Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme. Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site.
I have had a few request for a tweak that would result in a menu similar to the Elegant Themes Customer Showcase winner Condiviso. It’s actually a pretty easy tweak that is all done in CSS.
CSS
|
1 2 3 4 5 6 7 8 9 |
#main-header {background-color: rgba(255, 235, 0, 0); box-shadow: none;} #main-header.et-fixed-header {background-color: #FFEB00 !important;} #main-header #logo {display: none;} #main-header.et-fixed-header #logo {display: block;} .top-section {top: -80px; margin-bottom: -80px;} |
You’ll have to add the class top-section to the top section of every page in the Section Module Settings in the page builder. Make sure you insert the class in the CSS Class field, not the CSS ID.
19 Comments
Thanks for this!
Is there a way to limit this effect only to the Home page?
And I notice also that this has caused a small gap to appear between the top two full width sections : (
February 18, 2015
You should be able to add .home to all of the styles in the tutorial and that will limit it to the homepage. Make sure .home is at the beginning of each style followed by a space. As far as the gap, can you give me the URL of the site? If you don’t want to share in comments, you can send it via the contact link at the bottom of every page on my site. Thanks!
February 26, 2015
hi brad, i tried also this small code hack in css. looks fine…
but there is a small gab as reece described above…i think its the 80px gap we need for the header menu (-80px) and now after the there is a grey or transparent gap…on the original condiviso site i see no gap…maybe u know code trick? thanx for advise!
March 28, 2015
Can you send me the URL you’re having problems with Michael? I’m having problems replicating the gap. Or you can email me the link. Thanks!
March 30, 2015
I added the proper CSS to the tweak. You just need to add:
margin-bottom: -80px; to the .top-section class. That should pull the second section up level with the bottom of the first.
March 31, 2015
Thanks for this. I am trying it on a site but the padding adjustment in “.top-section {top: -80px;}” means that there is a big gap between the top section and the following section. Any ideas on how to amend for this?
March 31, 2015
Fixed. Please add margin-bottom: -80px; to the .top-section class. I’ve modified the tweak to reflect the change.
March 31, 2015
Sorry! I just saw that the previous comments were about the same thing!
March 31, 2015
No worries Ella. Did the negative bottom margin on the top section fix your problem?
April 1, 2015
Yes, thanks!
May 12, 2015
Thanks Brad!
Nice idea,
But i need your help:
Is it possible to change the color of the font when “scrolled down” from white to black? My background video is very dark, but my header is white, so the font should change of white on black.
It should be very easy with CSS, but i dont know how 🙁
A Codesnippet would be perfect :>
Regards
Phil
April 17, 2015
Yep pretty easy Phil. Just add this to your CSS: .et-fixed-header #top-menu li a {color: #000;}
That will change the font color of the links only after the user scrolls down and the header switches to fixed
April 19, 2015
Actually you don’t need too… at least in 2.5
set dif font in the theme customizer… both fixed and non fixed will work and switched(out of the box it worked for me)
My only edit was:
.home #main-header { background-color: rgba(0, 0, 0, 0); box-shadow: none;}
.home #main-header.et-fixed-header {background-color: #ffde00 !important;}
I couldn’t find the class for the “drop-down menu background though” but i barely use.
January 9, 2016
This is great, thanks! Just one thing I thought I’d mention. This CSS worked for me except that I had to add !important to the first rule. Result:
#main-header {
background-color: rgba(255, 235, 0, 0) !important;
box-shadow: none;
}
April 29, 2015
I have the following code
#main-header {background-color: rgba(255, 235, 0, 0); box-shadow: none;}
#main-header.et-fixed-header {background-color: #FFFFFF !important;}
#main-header #logo {display: block;}
#main-header.et-fixed-header #logo {display: block;}
.top-section {top: -80px; margin-bottom: -80px;}
and for some reason my logo is not displaying at all :(. Could anyone help me, please?
June 17, 2015
Dear Brad,
Thank you so much for this tweak, it is great ! I’m using it on a website I’m currently developping and I have a little issue : when the user scrolls, the logo appears under the coloured bar. I have no idea how to fix that, do you ?
Thank you so much,
Alix
September 11, 2015
Hi Alix. What version of Divi are you using? I have not tested this tweak since they did the big 2.4 update. Once possible solution would be giving the logo a higher z-index value
September 21, 2015
Hi Brad,
Thanks for this hack. Do you know any way to make it work with a full screen top section without the 80px gap at the bottom? I tried
.top-section {
height: calc(100% + 80px)!important;
}
But no workie.
Cheers
February 7, 2016
I paste the css code and don’t change anything, What i did wrong?
April 29, 2016