Monaca Onsen UI Discord Chat Github Repo

Transparent Toolbar



  • 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