CODEWITHSUNDEEP
htmlcss
Grant9196
Grant9196

Reputation: 139

Navigation bar -- links don't work

On the navigation bar, the link only works if I hover over the TEXT however it doesnt work if I hover underneath or above the text (between the 1 px horizontal lines and the text) here is a link to the jsfiddle http://jsfiddle.net/hp20wcrd/

<!DOCTYPE html>
<html>
<head>
<style>
.menu {
    font-family: Verdana, Arial; 
    position:fixed; 
    background:transparent;
    width:100%; 
    top:100px; 
    left:0; 
    height:25px;       /* decide on this as some stage */
    padding: 0;
    text-align:center;
    font-size: 12px;
    font-weight: 600;  /* decide on this as some stage */
    padding-top: 10px;  /* decide on this as some stage */
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.ty-menu__items {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width:100%;
    text-align: center;
}

.ty-menu__item {
    display: inline-block;
    padding-right: 50px;
    padding-left: 50px;
    }

a:link, a:visited {
    display: block;
    width: 100%;
    font-weight: light;
    color: #494949;
    background: transparent;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    padding-bottom:7px;  /* decide on this as some stage */
    background: transparent;
    border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
    color: #9B9B9B; /* decide on this as some stage */
}
</style>
</head>
<body>
<div class="menu">
<ul class="ty-menu__items">
  <li class="ty-menu__item"><a href="#home">home</a></li>
  <li class="ty-menu__item"><a href="#news">news</a></li>
  <li class="ty-menu__item"><a href="#contact">contact</a></li>
  <li class="ty-menu__item"><a href="#about">about</a></li>
</ul>
</div>
</body>

</html>

Upvotes: 2

Views: 91

Answers (5)

kevinyuliawan
kevinyuliawan

Reputation: 156

Put the padding on the a tags, and let those take up the space. The li tags will simply take the size of the a tags.

I put together this jsfiddle (I commented out what wasn't needed): http://jsfiddle.net/g5o9dun9/

.menu {
  font-family: Verdana, Arial; 
    position:fixed; 
    background:transparent;
    width:100%; 
    top:100px; 
    left:0; 
 /*   height:25px; */      /* decide on this as some stage */
    padding: 0;
    text-align:center;
    font-size: 12px;
    font-weight: 600;  /* decide on this as some stage */
/*  padding-top: 10px; */ /* decide on this as some stage */
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

.ty-menu__items {
    /* position: absolute; */
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* width:100%; */
    text-align: center;
}

.ty-menu__item {
    display: inline-block;
    margin:0px 50px;
  }

.ty-menu__item a{
    padding:20px
}

a:link, a:visited {
    display: block;
    width: 100%;
    font-weight: light;
    color: #494949;
    background: transparent;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    padding-bottom:7px;  /* decide on this as some stage */
    background: transparent;
    border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
    color: #9B9B9B; /* decide on this as some stage */
}

Upvotes: 0

MrEhawk82
MrEhawk82

Reputation: 819

I added padding for the anchor tag and dropped the padding-top on .menu

edit: i also added padding-bottom to the .menu to match your hover selector 

.menu {
font-family: Verdana, Arial; 
position:fixed; 
background:transparent;
width:100%; 
top:100px; 
left:0; 
height:25px;       /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600;  /* decide on this as some stage */
padding-bottom:7px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}

.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}

a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a {
padding:7px 0px;
}
a:hover, a:active {
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* decide on this as some stage */
}

Upvotes: 0

Alex Char
Alex Char

Reputation: 33228

You can add padding in a element instead:

.menu {
  font-family: Verdana, Arial;
  position: fixed;
  background: transparent;
  width: 100%;
  top: 100px;
  left: 0;
  height: 25px;
  /* decide on this as some stage */
  padding: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  /* decide on this as some stage */
  /* decide on this as some stage */
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  padding-bottom: 10px;
}
.ty-menu__items {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.ty-menu__item {
  display: inline-block;
  padding-right: 50px;
  padding-left: 50px;
}
a:link,
a:visited {
  display: block;
  width: 100%;
  font-weight: light;
  color: #494949;
  background: transparent;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  padding-top: 10px;/*add padding top*/
  padding-bottom: 10px;/*add padding bottom*/
}
a:hover,
a:active {
  padding-bottom: 7px;
  /* decide on this as some stage */
  background: transparent;
  border-bottom: 3px solid #9B9B9B;
  /* decide on this as some stage */
  color: #9B9B9B;
  /* decide on this as some stage */
}
<div class="menu">
  <ul class="ty-menu__items">
    <li class="ty-menu__item"><a href="#home">home</a>
    </li>
    <li class="ty-menu__item"><a href="#news">news</a>
    </li>
    <li class="ty-menu__item"><a href="#contact">contact</a>
    </li>
    <li class="ty-menu__item"><a href="#about">about</a>
    </li>
  </ul>
</div>

Upvotes: 3

Shomz
Shomz

Reputation: 37711

It's because you gave padding to the ul element and its parent, not the actual anchor, which is the "clickable" area. Something like this should work (with removing the extra padding on the ul element):

.ty-menu__item a {
    padding: 8px 0 6px;
}

See it here: 

.menu {
	font-family: Verdana, Arial; 
    position:fixed; 
    background:transparent;
    width:100%; 
    top:100px; 
    left:0; 
    height:32px;       /* decide on this as some stage */
    padding: 0;
    text-align:center;
    font-size: 12px;
    font-weight: 600;  /* decide on this as some stage */
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}

.ty-menu__items {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width:100%;
    text-align: center;
}

.ty-menu__item {
    display: inline-block;
	padding-right: 50px;
	padding-left: 50px;
	}

.ty-menu__item a {
    padding: 8px 0 6px;
}

a:link, a:visited {
    display: block;
    width: 100%;
    font-weight: light;
    color: #494949;
    background: transparent;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    padding-bottom:7px;  /* decide on this as some stage */
    background: transparent;
    border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
    color: #9B9B9B; /* decide on this as some stage */
}
<div class="menu">
<ul class="ty-menu__items">
  <li class="ty-menu__item"><a href="#home">home</a></li>
  <li class="ty-menu__item"><a href="#news">news</a></li>
  <li class="ty-menu__item"><a href="#contact">contact</a></li>
  <li class="ty-menu__item"><a href="#about">about</a></li>
</ul>
</div>

http://jsfiddle.net/hp20wcrd/14/

Upvotes: 0

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Try this (your a is not all clickable, you must create vertical full clickable on your a using padding)

CSS

.menu {
    font-family: Verdana, Arial; 
    position:fixed; 
    background:transparent;
    width:100%; 
    top:100px; 
    left:0; 
    height:35px;       /* decide on this as some stage */
    padding: 0;
    text-align:center;
    font-size: 12px;
    font-weight: 600;  /* decide on this as some stage */
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.ty-menu__items {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width:100%;
    text-align: center;
}

.ty-menu__item {
    display: inline-block;
    padding-right: 50px;
    padding-left: 50px;
    }

a:link, a:visited {
    display: block;
    width: 100%;
    font-weight: light;
    color: #494949;
    background: transparent;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 0px;
}

a:hover, a:active {
    padding-bottom:7px;  /* decide on this as some stage */
    background: transparent;
    border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
    color: #9B9B9B; /* decide on this as some stage */
}

DEMO HERE

Upvotes: 4

Related Questions