CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Su_toL
Su_toL

Reputation: 167

Bootstrap Navbar Header Text Overlaps on Smaller Screens

I'm currently in the process of learning Bootstrap, and decided to make myself a simple personal website. At the very top left, in the navbar, I want to put my name. On the right I want to have three menu options (about, projects & Contact). However, upon resizing the text for my name (up to 60px using CSS), the website looks okay on a computer (after some modifications to the navbar size), however when I open the site on my phone, the text overlaps. My first name and my last name are written on top of each other, with the navbar items from the right underneath it.

I'm not sure if I'm missing something simple (like using a different Bootstrap class), but I've looked extensively for a solution with no results. Below is the relevant HTML/CSS files.

HTML: 

  <nav class="navbar navbar-default">
     <div class="container-fluid">

        <!-- Name -->
        <div class="navbar-header">
            <a href="#" class="navbar-brand" id="myNameHeader">My Name Goes Here</a>            
        </div>

        <!-- Menu Items -->
        <div>
            <ul class="nav navbar-nav navbar-right" id="right_menu_items">
                <li><a href="index.html">About</a></li>
                <li class="active"><a href="projects.html">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS: 

.navbar>ul>li>a {
   padding-top: 5px;
   padding-bottom: 5px
}

.navbar {
  min-height: 80px;
}

#myNameHeader {
  font-size: 60px;
  padding-top:20px;
  padding-bottom: 40px;
  position: relative;
}

#right_menu_items {
  padding-right: 10px;
  padding-top: 14px;
}

Upvotes: 1

Views: 577

Answers (2)

Eduardo Arruda Pimentel
Eduardo Arruda Pimentel

Reputation: 518

To correct this you need to set line-height of your text. This will prohibit your text overwrites on himself. 

#myNameHeader {
  font-size:60px;
  line-height:60px;
  padding-top:10px;
  padding-bottom:10px;
}

But there is another problem, when you do that, your text overwrite the navbar menu. The reason is because twitter boostrap navbar-brand has a fixed height equals to 50px. To fix, just change navbar-brand to "auto".

.navbar-brand {
  height:auto;
}

Check my code on copen: http://codepen.io/eMineiro/pen/reEYXY

Upvotes: 1

Janet
Janet

Reputation: 101

Try changing the nav class to navbar-static-top as per bootstrap navbar menu overlaps text

Upvotes: 0

Related Questions