Having some trouble positioning my logo on the top left corner of the navbar. It keeps ending up in an awkward spot alongside the brand name.
https://i.stack.imgur.com/XZjV9.png
If anyone has any tips on how to properly align the logo and brand on the navbar, I would greatly appreciate it!
Here is a snippet of the HTML code:
<nav id="navbar">
<div className="nav-wrapper">
<Link
to={this.props.auth ? "/dashboard" : "/"}
className="left brand-logo"
>
<img src={Logo} alt="logo" className="photo" />
<div id="logo">Logo</div>
</Link>
<ul className="right">{this.renderContent()}</ul>
</div>
</nav>
And here is the corresponding CSS styling:
#navbar {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
#logo {
display: inline-block;
height: 100%;
padding-left: 20px;
}
.photo {
width: 64px;
height: 64px;
}
Currently utilizing materialize CSS for the design of the navbar.