Monaca Onsen UI Discord Chat Github Repo

Extra tall navbar header for OnsenUI/PhoneGap app, with SVG background?



  • I’m building an app using Onsen UI and PhoneGap that requires having an extra tall header on one of the pages, with an SVG background image, but hamburger menu icon would be on top. So needs to be like:

    alt text

    Header image is above the horizontal line, below that it’s just a regular Onsen UI layout with various content (e.g. a list).

    Image does need to be full width as shown and scale to fit whatever device it’s shown on (phone or tablet).

    Is this possible, and if so how? Couldn’t see anything obvious in the docs.

    Thanks



  • Try something like this…

    <style>
    #bg1 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%; 
    background-image: url("![bighd.jpg](https://videohive.img.customer.envatousercontent.com/files/241571641/bighd.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=eff7aca73a2933133204ac6800f993bf");)
    }
    </style>
    
    <ons-page id="myPage">
    <ons-toolbar style="height: 120px;" id="MainToolbar">
    <div
    	<div class="left" id="MainToolbar_leftDiv">
    		<ons-toolbar-button id="bg1" style="color: #ffffff;"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
    	</div>
    </ons-toolbar>
    <div id="hiddenspace" style="height: 72px;"><!--Hidden Space to Account for Header Height Increase--!></div>
    <ons-card>
        <img src="![download_image_onsenui_01.png](https://monaca.io/img/logos/download_image_onsenui_01.png") alt="Onsen UI" style="width: 100%">
        <div class="title">
          Awesome framework
        </div>
          <ons-list>
            <ons-list-header>Bindings</ons-list-header>
            <ons-list-item>Vue</ons-list-item>
            <ons-list-item>Angular</ons-list-item>
            <ons-list-item>React</ons-list-item>
          </ons-list>
      </ons-card>
    </ons-page>