Increasing the size

[samanamarasinghe]

Hi,
How can I increase the size of the card (including the text and the icon). Also increase the spacing between the buttons so the card will be elongated across the screen?

[joseluis9595]

Hi! You can use the styles prop of navbar-card for that, targetting whichever component you want to modify using css.

A quick example of what you are trying to achieve:

type: custom:navbar-card
...
styles: |
  .navbar {
    width: 80vw !important;
  }

  .icon {
    --mdc-icon-size: 36px;
  }

  .navbar .label {
    font-size: 15px;
  }

You can also find some quick and simple examples in the README and search for user submitted examples on the community forum

[samanamarasinghe]

This helps!! Thank you so much, this card is really good. I have 3 questions.

1. The card get centered in the bottom or left. However, If I want to offset it so it will not overelap something else, can I do it?

2. I have a theme 'blackend' in most of my pages. On those pages the icon is white when it is both active or not. How can I change the color of the icon?

3. I have marked one route as selected. On that route button the icon seems to be invisible. Is there a way to get it to display (with a different color). This only happens in pages with the blackened theme.

Again, thank you for the great work!