make entire button clickable

Posted on 2014-08-11
Last Modified: 2014-08-11
How do I make the entire button in the navigation (including icon) clickable?  Currently the only "hot spot" of the navigation is the text.  The navigation was done using sprites.
Question by:nsitedesigns
    LVL 58

    Accepted Solution

    Move the <i></i> inside the anchor tag

    In li a {...} change
    display:inline-block to display:block
    Change the padding to padding-left:15px
    Add line-height: 35px;

    Remove the padding from li {...}

    Author Comment

    Well, that fixed it so that more of the button is clickable but now the icons are too far down the page.  I tried bumping them up using the negative background position but that didn't seem to help.  Any other ideas?
    LVL 58

    Expert Comment

    Follow my comment exactly

    Move the <i></i> inside the anchor tag

    Author Comment

    Sorry - my mistake.  Worked like  a charm!

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    Read about why website design really matters in today's demanding market.
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now