CODEWITHSUNDEEP
htmlcsssass
agentem
agentem

Reputation: 811

How to position text underneath other text on hover without affecting surrounding elements

On hover I have text that comes up (changes opacity from 0-1 and transform translates it's position) on my nav, I'd like each hover label (.small-nav-text) to come up under it's corresponding nav item, but without affecting the position of the other nav items around it. Right now the text is too long so it's pushing the other nav items off to the left and right.

Here's an image of what I'd like to to look like:

navigation

JSFiddle: http://jsfiddle.net/agentemi1y/qtqvvk24/

My scss:

nav {
 li {
  display: inline-block;
 }
 a {
  margin: 0;
  padding: 0 2.1875rem;
  text-align: center;
  font-size: 1.16875rem;
  &:after {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, height 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s, height 0.3s;
    transition: transform 0.3s, opacity 0.3s, height 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  &:hover:before,
  &:focus:before {
    height: 6px;
  }
  &:hover::before,
  &:hover::after,
  &:focus::before,
  &:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
  }
  span:first-child {
    z-index: 2;
    display: block;
  }

  .small-nav-text {
    font-size: 0.875rem;
    z-index: 1;
    display: block;
    padding: 8px 0 0 0;
    color: rgba(0,0,0,0.4);
    text-transform: none;
    opacity: 0;
    border: 1px solid red;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  &:hover .small-nav-text,
  &:focus .small-nav-text {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    transform: translateY(0%);
  }
}

}

My HTML:

<nav>
<p>
    Menu
</p>
<ul>
    <li>
        <a data-scroll href="#why">
            <span>Why</span>
            <span class="small-nav-text">some text here</span>
        </a>
    </li>
    <li>
        <a data-scroll href="#how">
            <span>How</span>
            <span class="small-nav-text">Improving communication</span>
        </a>
    </li>
    <li>
        <a data-scroll href="#product">
            <span>Product</span>
            <span class="small-nav-text">Our flagship product</span>
        </a>
    </li>
    <li>
        <a data-scroll href="#team">
            <span>Team</span>
            <span class="small-nav-text">The gang</span>
        </a>
    </li>
    <li>
        <a data-scroll href="#contact">
            <span>Contact</span>
            <span class="small-nav-text">Let's talk</span>
        </a>
    </li>
</ul>

Upvotes: 0

Views: 358

Answers (1)

Liftoff
Liftoff

Reputation: 25372

Try this.

You can fix this by using relative positioning on your parent and absolute positioning on your child.

That will take it out of the flow of the document, keeping it from affecting your navigation bar.

Here's what I added.

Your nav a

nav a
{
    display: block;
    position: relative;
}

Your nav a .small-nav-text

nav a .small-nav-text
{
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}

You may have to mess with the width of the small-text further if you want all of that text to show up on one line.

Here's the JSFiddle link again.

Upvotes: 1

Related Questions