CODEWITHSUNDEEP
htmlcss
user15250555
user15250555

Reputation:

Vertical alignment of vertical navbar

I need a vertical navbar that will change the icon to text on hover. But for some reason I can't align the icon and text vertically in the center inside the 'a' tag.

Can someone help?

.sidebar{
  background-color: #555;
  position: fixed;
  height: 100%;
  width: 100px;
  top: 0;
  left: 0;
}
.sidebar a{
  text-align: center;
  display: block;
  padding: 20px;
  height: 90px;
  color: #fff
}
.sidebar a i{
  font-size: 24px;
}
.sidebar a b{
  font-size: 18px;
  display: none;
}
.sidebar a b:hover{
  display: block;
}
.sidebar a i:hover{
  display: none;
}
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<header>
    <div class="sidebar">
        <a href=""><i class="fas fa-home"></i><b>Home</b></a>
        <a href=""><i class="fas fa-home"></i><b>About</b></a>
        <a href=""><i class="fas fa-home"></i><b>Skills</b></a>
        <a href=""><i class="fas fa-home"></i><b>Works</b></a>
    </div>
</header>

Upvotes: 0

Views: 60

Answers (2)

Evren
Evren

Reputation: 4410

I've cancelled padding on sidebar a and added flexbox. Also fixed hovers, I hope it would fix your problem.

.sidebar{
  background-color: #555;
  position: fixed;
  height: 100%;
  width: 100px;
  top: 0;
  left: 0;
}
.sidebar a{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  height: 90px;
  color: #fff
}
.sidebar a i{
  font-size: 24px;
}
.sidebar a b{
  color: white;
  font-size: 18px;
  display: none;
}
.sidebar a:hover b{
  display: flex;
}
.sidebar a:hover i{
  display: none;
}
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<header>
    <div class="sidebar">
        <a href=""><i class="fas fa-home"></i><b>Home</b></a>
        <a href=""><i class="fas fa-home"></i><b>About</b></a>
        <a href=""><i class="fas fa-home"></i><b>Skills</b></a>
        <a href=""><i class="fas fa-home"></i><b>Works</b></a>
    </div>
</header>

Upvotes: 0

Moodland
Moodland

Reputation: 142

Is that what are you looking for? If you want to rotate text you can also add

writing-mode: vertical-rl;


.sidebar{
  background-color: #555;
  position: fixed;
  height: 100%;
  width: 100px;
  top: 0;
  left: 0;
}
.sidebar a{
  text-align: center;
  display: block;
  padding: 20px;
  height: 90px;
  color: #fff
}
.sidebar a i{
  font-size: 24px;
}
.sidebar a b{
  font-size: 18px;
  display: none;
}
.sidebar a:hover b{
  display: block;
}
.sidebar a:hover i{
  display: none;
}
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<header>
    <div class="sidebar">
        <a href=""><i class="fas fa-home"></i><b>Home</b></a>
        <a href=""><i class="fas fa-home"></i><b>About</b></a>
        <a href=""><i class="fas fa-home"></i><b>Skills</b></a>
        <a href=""><i class="fas fa-home"></i><b>Works</b></a>
    </div>
</header>

Upvotes: 1

Related Questions