How to add a logo on the Ionic Sidemenu?

Navigation
2

I want to add a logo on the sidemenu but it does not fit, I guess it should be in the css file with a div obviously. This is how it is until now:

Code: 

<ion-side-menus>
<ion-side-menu side="left">
    <ion-header-bar class="bar-balanced">
      <img src="notilogia.jpg" width="50" height="50"/>
    </ion-header-bar>
    
    <ion-content>
    <ion-list>
         <a class="item item-icon-left" ui-sref="app.inicio" menu-close><i class="icon ion-home"></i> Inicio</a>
     <a class="item item-icon-left" ui-sref="app.notigestion" menu-close><i class="icon ion-clipboard"></i> Notigestión</a>
     <a class="item item-icon-left" ui-sref="app.politica" menu-close><i class="icon ion-person-stalker"></i> Política</a>
     <a class="item item-icon-left" ui-sref="app.deporte" menu-close><i class="icon ion-ios-football"></i> Deporte</a>
     <a class="item item-icon-left" ui-sref="app.tendencia" menu-close><i class="icon ion-bowtie"></i> Tendencia</a>
     <a class="item item-icon-left" ui-sref="app.gastronomia" menu-close><i class="icon ion-fork"></i> Gastronomía</a>
     <a class="item item-icon-left" ui-sref="app.amazon" menu-close><i class="icon ion-ipad"></i> Amazon</a>
     <a class="item item-icon-left" ui-sref="app.salud" menu-close><i class="icon ion-ios-pulse"></i> Salud</a>
    <a class="item item-icon-left" ui-sref="app.acerca" menu-close><i class="icon ion-help-circled"></i>Acerca</a>
    </ion-list>
    </ion-content>
</ion-side-menu>

    <!--contenido-->
    <ion-side-menu-content>
    <ion-nav-bar class="bar-balanced">
        <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>
    
        <!--insertar contenido-->
        <ion-nav-view name="content"></ion-nav-view>
        
    </ion-side-menu-content>

</ion-side-menus>

I want to adjust it to the menu but above all, that the image has a little longer. (It should be noted that my css file has absolutely nothing)

    
asked by Juan Motta 15.07.2016 в 22:27
source

1 answer

1

The problem is here: 

<ion-header-bar class="bar-balanced">
  <img src="notilogia.jpg" width="50" height="50"/>
</ion-header-bar>

Right now you are making the image that makes the logo is square and has a size of 50x50 pixels. A size that exceeds the size of the header (with padding).

The solution would be either to extend the ion-header-bar high (although I do not know if that's what you want because the icon would remain square); or change the values of width and height in the image that makes the icon so that it fits better to what you want and the size of the menu bar (for example, try to put <img src="notilogia.jpg" width="60" height="35"/> or some value that is proportional to the aspect of the image that you use).

    
answered by 17.07.2016 в 19:51
Doubt with Pyserial on Mac Mirror Sql Server Ip Public