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

 

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

  1. 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 : (

    Reece

    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!

      Brad (admin)

      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!

        michael

        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!

          Brad (admin)

          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.

          Brad (admin)

          March 31, 2015

  2. 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?

    Ella

    March 31, 2015

    • Fixed. Please add margin-bottom: -80px; to the .top-section class. I’ve modified the tweak to reflect the change.

      Brad (admin)

      March 31, 2015

  3. Sorry! I just saw that the previous comments were about the same thing!

    Ella

    March 31, 2015

    • No worries Ella. Did the negative bottom margin on the top section fix your problem?

      Brad (admin)

      April 1, 2015

      • Yes, thanks!

        Ella

        May 12, 2015

  4. 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

    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

      Brad (admin)

      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.

      ron

      January 9, 2016

  5. 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;
    }

    Andrew

    April 29, 2015

  6. 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?

    Camilo

    June 17, 2015

  7. 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

    alix.heuer@gmail.com

    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

      Brad (admin)

      September 21, 2015

  8. 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

    John

    February 7, 2016

Post a Reply

Your email address will not be published. Required fields are marked *