Menu icon Foundation
Skew top bar hover but not text

In order to get a parallelogram type background on hover in my Foundation 5 top bar I have added this css:

.top-bar-section ul li:hover:not(.has-form) > a {
  -webkit-transform: skew(-20deg); 
  -moz-transform: skew(-20deg); 
  -o-transform: skew(-20deg);
}
            

         

However, it skews the text within it as well. Is there any way to target the hover color without targeting the text?

Also, I am using SCSS as well if that is helpful in finding a solution.

top barcssscsshover

In order to get a parallelogram type background on hover in my Foundation 5 top bar I have added this css:

.top-bar-section ul li:hover:not(.has-form) > a {
  -webkit-transform: skew(-20deg); 
  -moz-transform: skew(-20deg); 
  -o-transform: skew(-20deg);
}
            

         

However, it skews the text within it as well. Is there any way to target the hover color without targeting the text?

Also, I am using SCSS as well if that is helpful in finding a solution.

Preston McPeak about 5 years ago

Well the CSS you have now says it will skew the <li> Perhaps putting the skew onto the anchor tag? Have you tried applying the skew to a mixin like $topbar-button?

Alley Hector about 5 years ago

I'm skewing the part that Foundation uses for its hover. Where else would be better? How would you implement $topbar-button as a mixin?

Below is the html for how Foundation uses the top bar if that is helpful:

      <section class="top-bar-section">
         <ul class="right">
           <li>
            <?php
                $secondaryMenu = fuel_nav(array('group_id' => 'Secondary', 'depth' => 1,  'active' => uri_path(), 'cascade_selected' => FALSE, 'return_normalized' => TRUE));

                echo $this->menu->render($secondaryMenu, 'active', NULL, 'basic');
            ?>             
          </li>  
        <li> <a href="https://www.Facebook.com/ProntoCycleShare" target="_new"><i class="fa fa-facebook"></i></a></li>
        <li><a href="https://www.twitter.com/CyclePronto" target="_new"><i class="fa fa-twitter"></i></a></li>
        </ul>
    </section>

Preston McPeak about 5 years ago

You could try and have the text or icon font skew the opposite direction on hover?

Alley Hector about 5 years ago

I tried that. It only makes the top half of the right side of the rollover go straight up instead of skewed. Not sure why.

Preston McPeak about 5 years ago

Odd, if you have something I can tweak with, I'd love to try and help.

Alley Hector about 5 years ago

You can take a look at the nav here:

http://dev.prontocycleshare.com/