Side menu transparent navigation

ionic-v1
1

Hello,

I’m thinking how set background to none or transparent, navigation bar at the top of the screen.

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-light transparent-nav">
            <ion-nav-back-button>
            </ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left" width="200" expose-aside-when="large">
        <ion-header-bar class="bar-stable">
            <h1 class="title">Options</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
               <ion-item nav-clear menu-close href="#/map/home" class="item item-icon-left" >
                    <i class="icon ion-map"></i>Map
                </ion-item>
               <ion-item nav-clear menu-close href="#/map/help" class="item item-icon-left" >
                    <i class="icon ion-help"></i>Help
                </ion-item>
			</ion-list>
		</ion-content>
	</ion-side-menu>
</ion-side-menus>

I would like to have only one icon on the top, if someone click on that, side menu appear from the left.

2

This can be done with just a little CSS. Check out the codepen example here:

3

There is also the bar-clear class that you can put on the ion-nav-bar that accomplishes this.

4

Thanks @brandyshea Indeed bar-clear work perfectly. I had struggle because div with map was surrounded by which by itself added padding? Anyway, thanks for help.