Bootstrap Navbar Header Text Overlaps on Smaller Screens

Question

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;
}

Eduardo Arruda Pimentel · Answer 1 · 2016-05-20T04:06:12.870

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

score 0 · Answer 2 · edited May 23 '17 at 12:23

0

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

edited May 23 '17 at 12:23

Community

1
1

answered May 20 '16 at 00:42

Janet

101
2

Bootstrap Navbar Header Text Overlaps on Smaller Screens

2 Answers2