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.

How to do a fat (tall) toolbar with background image, burger menu (for splitter) and no bottom border in Onsen UI?

  • I want to achieve this in Onsen UI:

    alt text

    Notice taller toolbar than standard, white overlay burger menu icon (for the standard element) and no bottom border between the image and the first item.

    I think the burger icon is easy (assuming it stays in the right place with a taller toolbar).

    The background image I tried manually setting the CSS property background-image in the browser DOM (using Chrome devtools) on the element and adding the transparent modifier, so <ons-toolbar modifier="transparent"> - unfortunately this got overridden so background image didn’t show at all. I also tried doing the same thing on the within the toolbar and that didn’t go full width and not sure the burger icon would have been on top anyway

    Not sure how to override the toolbar CSS to make a tall/fat toolbar that shows the full height of the image and has no border - I’ve looked at the CSS for the toolbar in the browser DOM in Chrome Devtools but can’t see how to modify it correctly

    Ideally need this to be able to cope with different device widths or portrait/landscape orientation.

    Any suggestions much appreciated. Thanks.

  • Just realised this got answered in my original post two and a half years ago (!), see here: