CODEWITHSUNDEEP
htmlcssresponsive-design
avghdev
avghdev

Reputation: 89

Responsive Nav Bar Bug

I'm attempting to make an responsive nav bar, however when it resizes this happens:

Image

How would I go about making it so the navbar doesn't do this text clipping thing? (as it gets closer together it gets worse)

Here's my code:

HTML

<div id="menuContainer">
    <a href="index.html"><img id="logoimg" src="imgs/logo.png" height="70px" /></a>
    <ul class="menul">
            <li class="menuli"><a target="_blank" href="http://eastofseattle.bpt.me/">Buy Tickets</a></li>
            <li class="menuli"><a href="#">About</a></li>
            <li class="menuli"><a href="sponsor.html">Sponsors</a></li>
            <li class="menuli"><a href="index.html">Home</a></li>
    </ul>
</div>

CSS:

#menuContainer {
    background-color: white;
    margin: 2vw;
    height: 10vh;
    position: relative;
}

.menul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.menuli {
    display:inline-block;
    float: right;
}

.menuli a {

    font-size: 2.7vh;
    width: 9vw;
    height: 10vh;
    text-align: center;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    color: black;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    line-height: 10vh;

}

.menuli a:hover {
    background-color: #ff3333;
} 

#logoimg {
    float: left;
    height: 9.23vh;
    display: inline;
    margin-right: 20px;
    vertical-align: middle;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}

Upvotes: 0

Views: 276

Answers (3)

pranav niraj
pranav niraj

Reputation: 64

fOR Best Result Always Use Bootstrap (100% Responsive )

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Case</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a href="index.html"><img id="logoimg" src="imgs/logo.png" height="70px" /></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a target="_blank" href="http://eastofseattle.bpt.me/">Buy Tickets</a></li>
                <li><a href="#">About</a></li>
                <li><a href="sponsor.html">Sponsors</a></li>
              </ul>
            </li>
            <li><a href="index.html">Home</a></li>
          </ul>

        </div>
      </div>
    </nav>

    </body>
    </html>

Upvotes: 0

Doe
Doe

Reputation: 48

just remove the width from .menuli a and add a padding to it

#menuContainer {
    background-color: white;
    margin: 2vw;
    height: 10vh;
    position: relative;
}

.menul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.menuli {
    display:inline-block;
    float: right;
}

.menuli a {
    padding: 0px 10px;
    font-size: 2.7vh;
    height: 10vh;
    text-align: center;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    color: black;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    line-height: 10vh;

}

.menuli a:hover {
    background-color: #ff3333;
} 

#logoimg {
    float: left;
    height: 9.23vh;
    display: inline;
    margin-right: 20px;
    vertical-align: middle;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}
<div id="menuContainer">
    <a href="index.html"><img id="logoimg" src="imgs/logo.png" height="70px" /></a>
    <ul class="menul">
            <li class="menuli"><a target="_blank" href="http://eastofseattle.bpt.me/">Buy Tickets</a></li>
            <li class="menuli"><a href="#">About</a></li>
            <li class="menuli"><a href="sponsor.html">Sponsors</a></li>
            <li class="menuli"><a href="index.html">Home</a></li>
    </ul>
</div>

Upvotes: 3

CodeWeis
CodeWeis

Reputation: 856

is it something like this?

#menuContainer {
    background-color: white;
    margin: 2vw;
    height: 10vh;
    position: relative;
     display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      justify-content: space-between;
}

.menul {
    list-style-type: none;
    margin: 0;
    padding: 0;
   /* overflow: hidden;*/
      display:flex;
      flex-direction:row;
      justify-content: space-around;
      width:60%;
}

.menuli {
   display:inline-block;
   float: right;
}

.menuli a {

    font-size: 2.7vh;
    width: 9vw;
    height: 10vh;
    text-align: center;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    color: black;
    text-decoration: none;
    /*display: inline-block;*/
   white-space: nowrap;
    /*overflow: hidden;*/
    line-height: 10vh;

}

.menuli a:hover {
    background-color: #ff3333;
} 

#logoimg {
    float: left;
    height: 9.23vh;
    display: inline;
    margin-right: 20px;
    vertical-align: middle;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
<div id="menuContainer">
    <a href="index.html"><img id="logoimg" src="imgs/logo.png" height="70px" /></a>
    <ul class="menul">
            <li class="menuli"><a target="_blank" href="http://eastofseattle.bpt.me/">Buy Tickets</a></li>
            <li class="menuli"><a href="#">About</a></li>
            <li class="menuli"><a href="sponsor.html">Sponsors</a></li>
            <li class="menuli"><a href="index.html">Home</a></li>
    </ul>
</div>

Upvotes: 0

Related Questions