Transparent menu bar like on App Landing Page demo

• dimitris

  said

  Hello, guys
  Is it possible to make the menu bar transparent in skin 1 like on http://themeforest.net/item/vellum-responsive-wordpress-theme/full_screen_preview/6914246

• jeffw

  said

  When referencing the demo website please always use the actual demo website URLs because ThemeForest URLs always just open the exact same demo front page in a frame. The demo website is here → http://demo.vellumwp.com/

  If you can show me the issue on a live web page I will be glad to take a look. I cannot help with custom CSS requests unless I can see the issue on a live web page.

• dimitris

  said

  Thank you jeff for your reply!

  I saw on http://demo.vellumwp.com/home-pages/runway/ that you can make the menu bar transparent and i wanted to try it on my website which is not online yet.
  Ideally i would like to have a transparent horizontal bar that when scrolls-down the bar remains docked with a colored background.
  Is there a way to achieve this?

• jeffw

  said

  The masthead on the demo page you reference is being styled by some custom CSS. I think something like this might do what you want…

  @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
    }
    .dockedNav #masthead {
      background-color: Black !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: 0
    }
  }

  Go to Appearance > Theme Options > Custom CSS and add that CSS to your Custom CSS box, or add it to your custom stylesheet. You may need to experiment with property values to get to look right for your specific situation.

• dimitris

  said

  Thank you jeffw for your quick response!
  Unfortunately there is an issue i am not capable to solve: When scroll back to top the bar doesn’t go at its initial position but seems it gets cropped from the top. If you thing this is an easy to fix please help. If not that’s really ok, i can go without the transparent menu bar.

• jeffw

  said

  If you can show me the issue on a live web page I will be glad to take a look. I cannot help with custom CSS requests unless I can see the issue on a live web page.

• dimitris

  said

  Great!
  When gone live, I ‘ll let you know.

• dimitris

  said

  Hello jeff,
  i used the css you gave me and worked fine except a small issue. When scrolling down there is a hiccups on the appearance of menu bar.
  Can you please check it out: http://www.mywonderlist.com

  thank you

• jeffw

  said

  The same thing happens on our demo website so I don’t think there will be anything we can do about it. I’ll run the question past our development team and I’ll let you know if they have a solution.

• dimitris

  said

  hi @jeffw Any solution yet?

• jeffw

  said

  Not to my knowledge, no. I’ll ask our development team for an update on this issue. As soon as I know more I’ll let you know.

• jeffw

  said

  @dimitris

  I’ve discussed this with our development team and they think it’s happening because we’re using an “overlapping” navigation (meaning it is not in the page flow but appearing over the top of existing content) but still activating a feature intended to act as a placeholder when the navigation docks. In other words, we’re inserting an extra element into the page, in the flow of the content, when the navigation would normally start to dock. That way the page doesn’t “shift” on a normal page when the navigation docks and removes from the flow. In this specific case (the transparent masthead) it’s working against us.

  Our development team suggested that we try a hard override of the element display…

  #DockedNavPlaceholder, #DockedNavPlaceholder[style] { display: none !important; }

  Go to Appearance > Theme Options > Custom CSS and add that CSS to your Custom CSS box, or add it to your custom stylesheet.

  We’ve added that CSS to our demo website and it does seem to have fixed the problem. → http://demo.vellumwp.com/home-pages/runway/

• kbenakole

  said

  I had the same hiccups too upon scrolling down. I wanted to try placing this code in my custom css but first I went to your demo and noticed that the nav doesn’t stick. Will my nav stop to stick if I place this code? I still want a sticky nav upon scrolling. I love how when I scroll the nav flips and covers, the effect, if not for the hiccups…

• kbenakole

  said

  Ah, this codes solves this hiccups. Check http://cimnethub.com. Thanks guys.

• dimitris

  said

  Ah great, issue solved!
  Thank you