CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Karabas Barabas
Karabas Barabas

Reputation: 85

Navbar with different font-size elements

I am new to CSS and making navigation bar which:

  1. Has full screen responsive width and buttons width is customized in %.
  2. Contains various font-sized text on buttons
  3. Anchor text must be centered inside of it
  4. All button area must be clickable and underlined on hover

I have done 1-3 using tables but totally stuck on 4.

I'll be thankful for pointing me with some solution!

My html:

<nav class="navbar navbar-default  ">
  <div>
    <ul class="nav navbar-nav">
      <li><a href='#'>ONE</a></li>
      <li><a href='#'>TWO</a></li>
      <li><a  href='#'><i class="fa fa-cog"></i>THREE</a></li>
    </ul>
  </div>
</nav>

My css:

.navbar-default div {
    display:table;
    width: 100%;
}
.navbar-default ul {
    display:table-row;
}
.navbar-default ul li {
    display: table-cell;
    height:60px;
    text-align: center;
    vertical-align: middle;
    width:33%;
    border: solid 1px black;
}

.navbar-default ul li a {
    vertical-align: middle;

    border: solid 1px black;
    border-bottom: 3px solid black;
    text-decoration: none;
}
.navbar-default ul li:last-child a {
    font-size:38px; 
}
.navbar-default ul li a:hover,
.navbar-default ul li a:active {
    border-bottom: 3px solid #ffd460!important;
}

Same code on Jsfiddle

Upvotes: 1

Views: 1468

Answers (1)

L&#225;ďa Durch&#225;nek
L&#225;ďa Durch&#225;nek

Reputation: 1219

Try this:

.navbar-default div {
    display:table;
    width: 100%;
}
.navbar-default ul {
    display:table-row;
}
.navbar-default ul li {
    display: table-cell;
    height:60px;
    text-align: center;
    vertical-align: middle;
    width:33%;
    border: solid 1px black;
}

.navbar-default ul li a {
    vertical-align: middle;      
    border: solid 1px black;
    text-decoration: none;
    display: block;
    line-height: 60px;
    height: 60px;
}
.navbar-default ul li a span {
    border-bottom: 3px solid black;  
}
.navbar-default ul li:last-child a span {
    font-size: 38px; 
}
.navbar-default ul li a:hover span,
.navbar-default ul li a:active span {
    border-bottom: 3px solid #ffd460!important;
}
<body>
<nav class="navbar navbar-default  ">
  <div>
    <ul class="nav navbar-nav">
      <li><a href='#'><span>ONE</span></a></li>
      <li><a href='#'><span>TWO</span></a></li>
      <li><a  href='#'><span><i class="fa fa-cog"></i>THREE</span></a>
      </li>
    </ul>
  </div>
</nav>
</body>

Upvotes: 1

Related Questions