Hussam Al-hassan Hussam Al-hassan - 2 months ago 37
CSS Question

Display list items horizontally on hover

Here I have a side navigation bar which expands on hover, but I have been trying to get the social icons to display horizontally instead of vertically on hover.

I couldn't find anything related to this subject (unless I overlooked something). Can I get some help please?



.navmenu {
top: 5%;
height: 90%;
width: 50px;
background-color: rgba(51, 51, 51, 0.80);
position: fixed;
border-top: 5px solid black;
border-bottom: 5px solid black;
transition: 0.5s ease;
z-index: 100;
}

.navextend {
border-left: 40px solid rgba(51, 51, 51, 0.80);
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
height: 79.5%;
left: 50px;
position: fixed;
transition: 0.5s ease;
}

#primary_nav_wrap {
z-index: 100;
}

#primary_nav_wrap ul {
list-style: none;
position: absolute;
text-align: left;
margin-top: 40px;
z-index: 100;
left: -15px;
transition: 0.5s ease;
}

#primary_nav_wrap ul li {
padding-right: 0px;
}

.current {
color: crimson;
font-size: 120%;
}

#primary_nav_wrap ul li {
padding: 15px 30px;
display: block;
text-align: left;
}

#primary_nav_wrap ul a {
color: rgba(255, 255, 255, 0.80);
}

#primary_nav_wrap ul li:hover>a {
opacity: 0.5;
}

.navmenu img {
height: 30px
}

.navmenu img:hover {
opacity: 0.5;
}

.social {
bottom: 20px;
margin-left: 7px;
transition: 0.5s ease;
}

.social li {
text-align: center;
}

.navmenu:hover {
height: 98.5%;
top: 0px;
width: 120px;
background-color: rgba(38, 38, 38, 0.80);
}

.navmenu:hover .navextend {
left: 120px;
border-left: 70px solid rgba(38, 38, 38, 0.80);
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
height: 81.3%;
}

.navmenu:hover .social>img {
display: inline;
}

.navmenu:hover .menu {
margin-left: 40px;
font-size: 120%;
}

.navmenu:hover>#primary_nav_wrap ul li {
text-align: center;
}

<div class="navmenu">
<nav id="primary_nav_wrap">
<ul class="menu">
<li class="current">Home</li>
<a href="#">
<li class="link">Services</li>
</a>
<li><a href="#">About<br> us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">EN</a></li>
</ul>
<ul class="social">
<li><img src="Images/_Gmail.svg.png"> </li>
<li><img src="Images/fb-art.png"></li>
<li><img src="Images/twitterlogo_1x.png"></li>
</ul>
<div class="navextend">
</div>
</nav>
</div>




Answer Source

Just apply these two lines in your CSS:

.navmenu:hover #primary_nav_wrap .social { white-space: nowrap; }
.navmenu:hover #primary_nav_wrap .social li { display: inline-block; }

.navmenu {
  top: 5%;
  height: 90%;
  width: 50px;
  background-color: rgba(51, 51, 51, 0.80);
  position: fixed;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
  transition: 0.5s ease;
  z-index: 100;
}

.navextend {
  border-left: 40px solid rgba(51, 51, 51, 0.80);
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  height: 79.5%;
  left: 50px;
  position: fixed;
  transition: 0.5s ease;
}

#primary_nav_wrap {
  z-index: 100;
}

#primary_nav_wrap ul {
  list-style: none;
  position: absolute;
  text-align: left;
  margin-top: 40px;
  z-index: 100;
  left: -15px;
  transition: 0.5s ease;
}

#primary_nav_wrap ul li {
  padding-right: 0px;
}

.current {
  color: crimson;
  font-size: 120%;
}

#primary_nav_wrap ul li {
  padding: 15px 30px;
  display: block;
  text-align: left;
}

#primary_nav_wrap ul a {
  color: rgba(255, 255, 255, 0.80);
}

#primary_nav_wrap ul li:hover>a {
  opacity: 0.5;
}

.navmenu img {
  height: 30px
}

.navmenu img:hover {
  opacity: 0.5;
}

.social {
  bottom: 20px;
  margin-left: 7px;
  transition: 0.5s ease;
}

.social li {
  text-align: center;
}

.navmenu:hover {
  height: 98.5%;
  top: 0px;
  width: 120px;
  background-color: rgba(38, 38, 38, 0.80);
}

.navmenu:hover .navextend {
  left: 120px;
  border-left: 70px solid rgba(38, 38, 38, 0.80);
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  height: 81.3%;
}

.navmenu:hover .social>img {
  display: inline;
}

.navmenu:hover .menu {
  margin-left: 40px;
  font-size: 120%;
}

.navmenu:hover>#primary_nav_wrap ul li {
  text-align: center;
}
.navmenu:hover #primary_nav_wrap .social { white-space: nowrap; }
.navmenu:hover #primary_nav_wrap .social li { display: inline-block; }
<div class="navmenu">
  <nav id="primary_nav_wrap">
    <ul class="menu">
      <li class="current">Home</li>
      <a href="#">
        <li class="link">Services</li>
      </a>
      <li><a href="#">About<br> us</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">EN</a></li>
    </ul>
    <ul class="social">
      <li><img src="Images/_Gmail.svg.png"> </li>
      <li><img src="Images/fb-art.png"></li>
      <li><img src="Images/twitterlogo_1x.png"></li>
    </ul>
    <div class="navextend">
    </div>
  </nav>
</div>