Making a logo break out of the ion-nav


#1

So I’m trying to make this design in Ionic 3.

So I need to have the logo break out of the ion-navbar.

I currently have this.

I can’t figure out how to let the bottom of the logo not be overflowed by the ion-content. I already tried playing around with the z-index.


#2

I assume you’ve put your logo in the navbar. Instead, place it outside of the navbar, but inside the ion-header.

Then give the logo a class and add this CSS:

.logo {
position: absolute;
height: 60px;
top: 30px;
left: calc(50% - half_image_number_pixels);
}

the numbers are just an example, you can play around with it. Good luck with the relegation of your club :slight_smile:


#3

Thanks that helps a bit it now looks like this.

But now the content starts a little lower even when ion-header has a height of 0px.

The fixed-content and scroll-content has a margin-top of 126px now :frowning:


#4

That’s weird. This is due to the fact that ion-content calculates it’s distance from the top dynamically and it seems to be the case that the logo is ‘seen’ by the ion-content. Could you show me the exact HTML and scss you’re using now? Because I’ve tried it out over here and the image I’m using flows nicely over the content and the content has the usual 56px margin at the top.


#5

I played around with it a little and now it’s the opposite >.<’ it’s under the header.

h1 {
  background-image: url(../assets/img/nec.svg);
  background-repeat: no-repeat;
  background-size: 70px;
  text-indent: -9990px;
  width: 70px;
  height: 70px;
  margin: 0 !important;
  padding: 0;
  position: relative;
  left: calc(50% - 35px);
  top: -40px;
}

ion-header {
  background-color: rgba(0, 0, 0, 0) !important;
  height: 30px;

  ion-navbar {
    background: black !important;
    height: 30px;
   }
}

<ion-header>
  <ion-navbar>
  </ion-navbar>
  <h1>N.E.C. Nijmegen</h1>
</ion-header>

<ion-content class="has-header has-footer">


#6

What about just using an absolute placed img instead of a background image on an H1? Seems a little bit of abusing that HTML tag :wink:

ion-header {
  background-color: rgba(0, 0, 0, 0) !important;
  height: 30px;

  ion-navbar {
    background: black !important;
    height: 30px;
   }
}

btw, If you want to set the background color of these items, use color=“dark” (make dark in your themes/variables.scss black). If you want to control the height of this single navbar it’s okay to do it through CSS, but if you want to change the height of all the navbars (on every page), it’s better to adjust it inside your variables.scss. The documentation for those global variables can be found over here:


#7

Thanks for the tips. the css that i’m editting now is in the variables.scss :slight_smile:

Changing from h1 to div doesn’t change a thing sadly.


#8

But those two are tend to behave as display block. Using only an img tag doesn’t, so the behavior is differently. When I test out the first setup (logo inside the header, not in the navbar) with just an <img src=...> it seems to work :slight_smile: without pushing down the content, rather overlaying it.


#9

Ow I read over that sorry. I changed it to img but still the content is behind the header. But overlaying it shouldn’t happen either. The ion-content should start when the black bar ends.


#10

Have you tried setting the z-index of the image to a high value?