How do you make a link in a toolbar without the ugly text?

376 views
Skip to first unread message

gr...@gracefulco.de

unread,
Nov 25, 2017, 4:07:09 PM11/25/17
to angular-material2



I would like the title of my navigation bar (main toolbar element) to look like it does in this picture but also redirect to the main page when clicked.

However, when I add a link element to the text, it looks like this. How do I keep the attractive style of the original toolbar text? I suppose there are some CSS hacks I could do, but I would like to know the best way to do it with the Material2 library.



This the current HTML for the toolbar:
<mat-toolbar color="primary" class="mat-elevation-z6">
 
<span><a routerLink="/crisis-center" routerLinkActive="active">{{title}}</a></span>
 
<!-- This fills the remaining space of the current row -->
 
<span class="fill-remaining-space"></span>
   
<mat-icon class="toolbar-icon">settings</mat-icon>
</mat-toolbar>


Thank you very much in advance.


Boaz Rymland

unread,
Nov 26, 2017, 2:49:04 AM11/26/17
to gr...@gracefulco.de, angular-material2
AFAIK the 'text decoration' of the title link in the 'toolbar' component is not being done by Material and you need to do this manually, with some plain old (and simple) CSS. The font and some other attributes are controlled by MD, but not the link text-decoration.

--
You received this message because you are subscribed to the Google Groups "angular-material2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular-material2+unsubscribe@googlegroups.com.
To post to this group, send email to angular-material2@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular-material2/bba8979d-859e-4095-bcbb-8ebf35b70651%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages