How to add padding to anchor tags in Top Bar in Foundation 6?


Tags: html,css,zurb-foundation-6

Problem :

I am trying to increase the clickable area of an anchor tag using padding in a Foundation 6 Top Bar using scss. Foundation 6 for some reason doesn't seem to allow this. I've tried setting the display property to inline-block and block but padding still doesn't affect the size of the link.

You can increase the padding of the li elements but that doesn't increase the clickable area of the link.

I don't really know how this can be tested without the foundation 6 scss project already installed so I'm just posting straight html and css.

So here is the css I added to the app.scss file

.top-bar a {
  display: inline-block;
  padding: 40px;
}
.top-bar a:hover {
  background: lightblue;
}

Here is some example html

<!DOCTYPE html>
<html class="no-js" lang="eng">
<head>
    <meta charset="utf-8">
    <base href="/">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">


</head>
    <body>       
    <nav class="top-bar columns">
            <ul class="top-bar-left menu ">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>

            </ul>
    </nav>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/what-input/what-input.js"></script>
    <script src="bower_components/foundation-sites/dist/foundation.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
    <script src="js/app.js"></script>

</body>
</html>


Solution :

Here is one, totally exaggerated to make the point, you can make it what ever size.

<a  href="stuff.html"><div class="container6"><p>1</p></div></a>

and

<style>div.container6 {
    height: 10em; background-color:blue; width:10em;
    display: flex;
    align-items: center;
    justify-content: center;
}</style>

    CSS Howto..

    If div is visible, than show that content in other div with jQuery

    How to make JQuery + CSS Verticle Tabs

    How to insert css code in php?

    CSS how to align vertically center div floating elements of menu?

    How to skew image with CSS?

    In Ember how to use a view to change a css property and then view it?

    How to clear the parent css

    How can I get an image to always appear to the right of some associated text using HTML and/or CSS?

    How to display components horizontally with CSS

    How to create a curve tail for speech bubble with CSS?

    How to remove space between two buttons in a table row or “column”?

    Why is border radius not showing up in IE?

    how to use text-indent only with element not ont it's :before Selector?

    How to render no-table HTML form into two columns with CSS using classes?

    jQuery how to rapidly change color on divs with click

    How to display an image using an img tag and css and class instead of src attribute

    Why does the dropdownlist show under the div

    CSS: How to display image icon before each h3 in CSS?

    How to manipulate the CSS at runtime

    how to align text input in Angular-Material tool bar?

    How to select a certain element in CSS by numerical position

    How to create custom shapes with pseudo classes in CSS3

    How to show middle of image in div using css?

    How to change menu from on hover to on click

    How to apply effect just to background image and not text

    CSS: Background in front of image - how to prevent it?

    How to force wrapper div to keep its optimal width according to its children

    How to make a scroll customization for mobile application?

    How do I animate background image size on hover smoothly in css?

    How to ignore body element style when there is a class at element inside