CODEWITHSUNDEEP
htmlcssmaterialize
iscream
iscream

Reputation: 790

How to adjust height and area of nav links in Materialize CSS?

I have a brand-logo in my navbar and to make it fit and look good, I had to increase the height of my navbar. However, after doing so the nav links stay in the position as if the height never changed. To fix that I had to add a margin to the ul tag. Even though that did push down the links enough, the hover effect does not extend to surround the full height of the navbar. How do i fix this?

html:

<nav class="deep-orange darken-2">
        <div class="nav-wrapper container">
            <a class="brand-logo" href=""><img src="logo.png" alt=""></a>
            <ul class="hide-on-med-and-down right nav-links">
                <li><a href="">Home</a></li>
                <li><a href="">Admission</a></li>
                <li><a href="">Mentors</a></li>
                <li><a href="">Location</a></li>
            </ul>
        </div>
    </nav>

css:

.brand-logo img {
    height: 95px;
}

nav {
    height: 100px;
}

.nav-links {
    margin-top: 15px;
}

Upvotes: 0

Views: 476

Answers (1)

Sean Doherty
Sean Doherty

Reputation: 2378

Ok, quick answer is line-height:

nav {
  height: 100px;
}

nav ul li,
nav ul li a,
.brand-logo {
  line-height: 100px;
}

https://codepen.io/doughballs/pen/vYNGGYW

Materialize nav links all get their spacing via line height, which is passed down from nav height, and when you chnage the height manually with CSS , you also need to change the line height.

Also - Materialize has two nav heights, mobile and above, and they are set at certain breakpoints. The absolute best way to do this si suing sass - you change the height of the nav once, and then all the line heights are updated from this one variable.

If this is something you're interested in, let me know and I'll update the pen.

You don't need to do anything crazy with margins - use the same conventions that Materialize uses.

Upvotes: 1

Related Questions