Transparent menu bar like on App Landing Page demo

• hbusic

  said

  Hi,
  I have read the post regarding the transparent menu like on the ‘App Landing Page’ at: http://para.llel.us/support/groups/vellum/forum/topic/transparent-menu-bar/
  Jeffw posted code that works perfectly on bigger screens but not on the iPad although your demo works just fine.

  Can you PLEASE tell me how to make the transparency work on smaller screens as well. THANKS a lot.

  Normal at big screen: http://leti-leti.com/upi2m/naziv-projekta/
  NO transparency on iPad: https://www.dropbox.com/s/uk2c89gpoapizba/IMG_0447.PNG?dl=0
  Your demo with working transparency: https://www.dropbox.com/s/l96g7ikmxvyq7qi/IMG_0446.PNG?dl=0

  HB

  EDIT: I have removed @media rule and still no change.
  My code now looks like this:

  /* Transparent menu bar*/
    #masthead {
      background-color: transparent !important;
      position: absolute !important;
      width: 100% !important;
      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
    }
    #masthead .site-title a.logo-image {
      margin: -7px 0 0
    }
    .dockedNav #masthead {
      background-color: #FFFFFF !important;
      position: fixed !important;
      -webkit-box-shadow: 0 0px 8px rgba(0,0,0,.25) !important;
      -moz-box-shadow: 0 0px 8px rgba(0,0,0,.25) !important;
      box-shadow: 0 0px 8px rgba(0,0,0,.25) !important
    }
    .dockedNav #masthead .site-title a.logo-image {
      margin: -7px 0 0
    }
  }
  

• jeffw

  said

  The CSS I posted is the exact CSS used on our demo website so if it isn’t working on your website that’ll most likely be because of changes or additions you’ve made on your website, or because an additional plugin you have installed is preventing that CSS from working properly.

  To troubleshoot this issue you should first deactivate all plugins (all at the same time) except those required and recommended by the theme to make sure the additional plugins you have installed are not causing any issues. If the problem goes away, reactivate your additional plugins one at a time (individually, not incrementally) until you find the one responsible and let us know. If the problem persists after all additional plugins are deactivated (all at the same time), please leave them all deactivated, let us know and we will work from there.

• hbusic

  said

  Hi @jeffw,
  No change on the menu after your suggestion.
  I have created new test site with fresh install of Vellum theme and Business Demo Pack. Only activated plugins are Visual Composer and Revolution Slider. Custom CSS has this code:

  /* Transparent header*/
    #masthead {
      background-color: transparent !important;
      position: absolute !important;
      width: 100% !important;
      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
    }
    #masthead .site-title a.logo-image {
      margin: -7px 0 0
    }
    .dockedNav #masthead {
      background-color: #FFFFFF !important;
      position: fixed !important;
      -webkit-box-shadow: 0 0px 8px rgba(0,0,0,.25) !important;
      -moz-box-shadow: 0 0px 8px rgba(0,0,0,.25) !important;
      box-shadow: 0 0px 8px rgba(0,0,0,.25) !important
    }
    .dockedNav #masthead .site-title a.logo-image {
      margin: -7px 0 0
    }

  Link to the test site: http://leti-leti.com/test/
  NO transperancy on the menu on iPad: https://www.dropbox.com/s/eok5657bsaq17ke/IMG_0448.PNG?dl=0

  Thanks for your help,

  HB

• jeffw

  said

  Okay. I’ve make a note of what you said and when I can find some time I’ll take a look at it, see if I can figure out what the problem is.

• jeffw

  said

  The problem is caused by the docked top banner. That is not compatible with the CSS that moves the content under the masthead, it causes the page to shudder at a certain point when scrolling. You’ll notice that on the demo website the demo App Landing Page doesn’t have a docked top banner, and the reason for that is because it conflicts with the custom CSS that restyles the masthead.

  After I first posted the CSS in this topic three months ago Andy has changed that CSS on the demo website to this…

  @media screen and (min-width: 768px) {
    #masthead {
      background-color: transparent !important;
      position: absolute !important;
      width: 100% !important;
      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
    }
    #masthead .site-title a.logo-image {
      margin: -15px 0 0;
    }
    #DockedNavPlaceholder, #DockedNavPlaceholder[style] { 
      display: none !important; 
    }
  }

  In the original custom CSS it was the .dockedNav #masthead styling that was causing the problem with the iPad not displaying the transparent masthead, instead it always displayed the docked top banner. If you use the above CSS instead you should get the transparent masthead on an iPad. But alas, the price you pay for this is no docked top banner.

• hbusic

  said

  @jeffw Thank You very much for the solution and your effort. I will use it.

  All the best,

  HB