For a while now, I've been struggling to create a simple header for the homepage of my web app using mat-toolbar. However, no matter what I try, I just can't seem to get it to display the way I want. Here's the code I've been working with:
.maintooly {
background-color: rgba(0,0,0,.7)
}<mat-toolbar color="primary" class="main-tooly">
<span id="product-name">
HOMEPAGE
</span>
<div class="vertical-line title-line">
|
</div>
</mat-toolbar>Essentially, I want the header to look like this:
https://i.sstatic.net/7W4T9.png
But unfortunately, it currently looks like this:
https://i.sstatic.net/VanKO.png
In short, I can't seem to get the items in the header to display side by side, and changing the color or any other styling seems impossible. Can someone please point out what I'm doing wrong and how to fix it?