vicg vicg - 4 years ago 242
HTML Question

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

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 scss.

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

.top-bar a {
display:inline-block;
padding: 40px;
&: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>

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download