Member Avatar for SimonIoa

Hello i want to make a gradient header on ion-navbar on my ionic 3 project.

home.html
<ion-header><ion-navbar color="primary">

variables.scss

$colors: ( primary: linear-gradient(red, yellow),

This doesnt work. color="primary" works if i put a single color value (e.g. #333)

Any idea how to make it gradient?

Edited by Dani because: Moved to correct forum
  • 2 Contributors
  • 1 Reply
  • 4K Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by SkinHead
Member Avatar for SkinHead

You cannot make a gradiant using 'color' - it can only have a single value. You need to use 'background. Have a look at https://codepen.io/cathydutton/pen/dPPpWj..

Or just Google 'CSS Gradiant' to get a list of online gradiant generators.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.