CODEWITHSUNDEEP
cssnavmaterialize
Cycliflus
Cycliflus

Reputation: 43

Navbar - Materialize CSS - Logo Alignment

I am using the materialize CSS library and creating a nav bar the following way:

<div class="navbar-fixed">     
<nav>
          <div class="container">
        <div class="nav-wrapper">
          <a href="#Main" class="brand-logo"><p><img src="public/images/logo.png" /></p></a>
          <a href="#" data-activates="mobile-demo" class="button-collapse button right"><span class="btn-open"></span></a>
          <ul class="right hide-on-med-and-down">
            <li><a href="#link1">Link1</a></li>
            <li><a href="#Link2">Link2</a></li>
            <li><a href="#Link3">Link3</a></li>
            <li><a href="#Link4">Link4</a></li>
          </ul>
        </div>
          </div>
      </nav>
</div>

However the image is not vertically aligned. I did try use the helpers of materialize CSS but still no success.

Any ideas what is wrong?

Upvotes: 3

Views: 6563

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

Materialize doesn't provide a helper class in this case, so just add your own:

.logo {
    display: inline-block;
    height: 100%;
}

.logo>img {
    vertical-align: middle
}

Demo: http://www.codeply.com/go/466ZvBYbG2

Upvotes: 4

Related Questions