Modify Toolbar text size

Ionic Framework ionic-v3
1

Hi,

I am new to Ionic 2 framework. I really like it the way it is but as per one of the requirement, i need to have a header and a subheader in the section. The first title should be smaller and the second title should be large.

heading1 - font size 10
Heading2 - font size 20

Here is how my code looks like

    > <ion-header>
>     	<ion-toolbar [color]="themeColor">
>     		<ion-title text-center>
>     			<svg width="30" height="5">
>     				<line x1="0" y1="0" x2="30" y2="0" style="stroke:rgb(255,255,255);stroke-width:2" />
>     			</svg>
>     			{{pageTitle1}}
>     			<svg width="30" height="5">
>     				<line x1="0" y1="0" x2="30" y2="0" style="stroke:rgb(255,255,255);stroke-width:2" />
>     			</svg>
>     		</ion-title>
>     	</ion-toolbar>
>     	<ion-navbar [color]="themeColor">
>     		<ion-title class="list-title">{{pageTitle2}}</ion-title>
>     	</ion-navbar>
>     </ion-header>

I tried setting up the variables.scss with the below variables but no effect.
$navbar-ios-height: 10rem;
$navbar-md-height: 10rem;
$navbar-wp-height: 10rem;
$toolbar-ios-height: 5rem;
$toolbar-md-height: 5rem;
$toolbar-wp-height: 5rem;

Let me know how i can achieve it.[details=Summary]This text will be hidden[/details]

2

Having a similar issue … I would like to create a smaller toolbar under the navbar but the $navbar-ios-height: does not seem to work. It seems to be hardcoded to the toolbar height $toolbar-ios-height so I cannot make the navbar and the toolbar different heights.

3

Why not just use plain css/scss instead of overriding the scss variables?

Ion-title{
    Font-size:xx;

    List-title{
        Font-size:xx;
    }
}

Place it in the style sheet for the page and it will work.