Help with creating headers


#1

Im new to the angular and ionic but I want to design the exact same header as below for my small project but I seem to be getting it wrong. Below is what I seek to achieve.

This is what I’ve been able to do so far.

Also I wanted it such that when I scroll up, the segment hides and when I scroll down it appears again.
Also if you click on the my school header at the top it should switch to another page and vice versa… I know it’s a lot, I’m learning a lot and moving fast too. Any help would be much appreciated.


#2

The main differences I can see are:
-color: a quick fix could be setting the color to 'primary and edit the scss ‘primary’ variable.
-width: the width of the elements on top is set to fit the content, while the one in your example is a constant value. Adding ‘width: fit-content’ and ‘display: inline-block’ should do the trick.

For the scrolling part you can check this post made by another user: Hide header on scroll

For the third question I’m not sure what you’re asking. Hopefully I can help if you can give more details.


#3

I am trying out your solutions thank you.
The last point, I meant when you look at the sample app above, “accra” appears like normal text but is actually clickable and switches to another page. I want to produce the same logic but can’t seem to.

And not to sound dumb, I’m really learning because this is all new to me but where do I input those attributes you suggested? The ones about width, etc


#4

A Ionic app should be developed as an Angular web app (at least for the UI). The attributes I mentioned are CSS variables, one of the three fundamentals of web development (HTML, CSS, JavaScript). You don’t sound dumb at all, but I would suggest to look at web development basics before using a framework as Ionic.

For the third question, I suppose with ‘page’ you are referring to an internal view of your app, not an external link. In this case you should catch a click event on the title to execute a function, that will change the active view using the NavController API. You can find a very detailed description of said API on Ionic official documentation.


#5

-> The last point, I meant when you look at the sample app above, “accra” appears like normal text but is actually clickable and switches to another page.

<ion-header no-border>

  ...

  <ion-navbar transparent>
    <ion-title>
      <button ion-button clear icon-right color="light" (click)="toggleLocation()">
        {{ location }}
        <ion-icon name="arrow-down"></ion-icon>
      </button>
    </ion-title>
  </ion-navbar>

</ion-header>

See: https://github.com/Robinyo/big-top/blob/master/src/pages/events/events.html


#6

Thank you. I’m looking that up. And I’ll do the basics and come back to my Angular ionic project. I used to think I was a web dev Pro until I met ionic and Angular. Totally lost. :joy::joy:

Thanks for the amazing help. Trying out the solutions. Will give updates tomorrow.


#7

Great Sôlutiôn. I’ll try that and remove the drop down. I simply need it to switch to the next page when clicked on. And the other page vice versa. Amazing tip. Thanks.