CODEWITHSUNDEEP
htmlcss
Vaibhav
Vaibhav

Reputation: 215

navbar-brand text flows out of navbar

While making a navbar for my page, the navbar-brand text simply flows out of the navbar if it gets too big. The interesting thing is that this doesn't happen with the the other list items of my navbar. It doesn't matter how much I increase the font size for the list items, the navbar simply grows with them. Here's the HTML-

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="index.php">Brand Name</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a class="navbar_text" href="activities.php">Activities</a></li>
        <li><a class="navbar_text" href="result.php">Results</a></li>
        <li><a class="navbar_text" href="about_us.php">About Us</a></li>
    </ul>
</div>

And the CSS-

.navbar-nav {
float: right;
}

.navbar {
    background-color: #282343;
}

.navbar_text {
    color: #9B9BD4;
    font-family: 'Arvo', Georgia, Times, serif;
    font-size: 39px;
    line-height: 70px;
}

.navbar-brand {
    color: #9B9BD4;
    font-family: 'Arvo', Georgia, Times, serif;
    font-size: 59px;
    line-height: 70px;
}

I want the brand text to be bigger than the list items. Please help.

Upvotes: 0

Views: 1381

Answers (3)

Pooja Jain
Pooja Jain

Reputation: 46

You can do it by changing the line-height to 70px and padding to 0px of .navbar-brand. Try this css .

.navbar-brand {
color: #9B9BD4;
font-family: 'Arvo', Georgia, Times, serif;
font-size: 59px;
line-height: 50px;
padding: 0px;

}

Upvotes: 1

DMrFrost
DMrFrost

Reputation: 911

If you want your contents to stay within your nav bar div, you can set their css styes

  max-height: 90%;
  max-width: 50px;

This will keep them neatly contrained inside of your nav div, while the nav itself can continue to resize. Setting the max value will also allow your elements to continue to scale, but never leave your parent div. max-height 90% will insure that your contents ae never bigger than 90% of the height of your nav bar. (Adjust the values as you need)

Upvotes: 1

Yael Rozanes
Yael Rozanes

Reputation: 15

Maybe it's because you used the "float:right" selector. When you use {float} - the element "goes out" of his borders in order to put himself at the place that was defined by you (right).

Upvotes: 0

Related Questions