3. Transparent Toolbar

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Transparent Toolbar

  • G

    Recently I am writing with transparent Toolbar. It works fine with using background-image.

    <ons-page>
  <ons-toolbar modifier="transparent">
     <div class="left"><ons-back-button></ons-back-button></div>
  </ons-toolbar>
</ons-page> 
<style>
  .page__background {
    background-image: url(..)
  }
</style>

    But if when I add div, or carousel in the page__content just like the following code:

    <ons-page>
   <ons-toolbar modifier="transparent">
     <div class="left"><ons-back-button></ons-back-button></div>
  </ons-toolbar>
 <img src="images/... " style="width:100%;"> 
</ons-page>

    then it will have a transparent toolbar, under the toolbar it shows the image.

    If I put the following css, it goes fine.

    <style>
  .page__content
    { 
      top: 0 !important;
    }
</style>

    My question is: is this the correct way to do with Transparent Toolbar? If yes, then how to link up toolbar–transparent with page__content?

    Best Regards,
    Gobi

    0