CODEWITHSUNDEEP
zurb-foundation
RightHandedMonkey
RightHandedMonkey

Reputation: 1728

How to size links to content instead of 100% container width using zurb foundation side nav

I'm using foundation as a basis for the site design and developing a nav bar for the side of the screen. I want to use Foundation's side nav because it has dividers and nice method for graying out or marking nav links as 'active'. The problem I'm having is that the clickable area for the link extends the width of the container instead of the text content of the link. I feel that is confusing and I don't want that experience for my users.

Zurb Foundation Code:

<section class="section">
     <ul class="side-nav no_padding_top">
        <h5 >What can I do here?</h5>

        <li class="">
            <a href="#" >View Popular</a>           
        </li>
        <li class="">
            <a href="#" >View Top Rated</a>         
        </li>
        <li class="">
            <a href="#" >Browse Categories</a>          
        </li>
     </ul>
</section>

In the picture below I show the way the zurb site nav is rendered (bottom) with a border around the clickable area. I want to limit the click area around the link text (top), ie. the clickable link is the size of the text, not the container. How can I override the default zurb foundation behavior to do that?

I've put a border around how the link is rendered. I want to render it like the top style, but the zurb site nav extends the click area of the link.

Upvotes: 0

Views: 172

Answers (1)

jameswilliamiii
jameswilliamiii

Reputation: 878

It is because the link is set to display:block. Override it with:

.side-nav li a {
  display: inline-block;
}

Upvotes: 1

Related Questions