CODEWITHSUNDEEP
htmlcsshyperlinkheaderparagraph
TheChasers
TheChasers

Reputation: 65

Can't select or click links on text elements in <a> tags

I have coded my navigation bar however my links are not clickable nor am I able to highlight the text. I am not sure why... I have put them onto <a> tags and added href="#" but it still isn't clickable. I was maybe wondering if it was the display: # or position: # I have added in styling that may have caused this? I mean on my footer the a tag seems to be working perfectly.

Could someone have a look and see if you see anything unusual that I may of missed

body{
    margin: 0;
    border: 0;
    padding: 0;
}
/* Navigation */
.header{
    width: 100vw;
    height: 6vh;
    background: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header div{
    flex: 1;
}
.header-logo{
    padding-left: 5vw;
}
#header-logo{
    height: 4vh;
}
.header-nav{
    text-align: right;
}
.nav-container{
    padding-right: 5vw;
}
.nav-list1{
    font-family: Oswald;
    font-weight: 500;
    font-size: 1em;
    display: initial;
    padding: 0.25vh 1.25vw;
}
.nav-list2{
    font-family: Oswald;
    font-weight: 500;
    font-size: 1em;
    display: initial;
    border-style: solid;
    border-width: 5px;
    padding: 0.25vh 1vw;
    border-image: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
    -moz-border-image: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
    -webkit-border-image: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
    border-image-slice: 1;
}
.nav-list2:hover{
    background: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
}
/* End Navigation */

/* Slideshow */
.section1{
    background: url(files/home-slideshow-001.jpeg);
    height: 94vh;
    background-size: cover;
}
#overlay{
    font-family: Oswald;
    text-transform: uppercase;
    font-size: 3vw;
    font-weight: 700;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* End Slideshow */
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Home</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Oswald:400,500,600,700" rel="stylesheet">
    </head>
    <body>
        <div class="header">
            <div class="header-logo">
                <a href="http://www.#.com">
                    <img id="header-logo" src="files/w-logo.png">
                </a>
            </div>
            <div class="header-nav">
                <span class="nav-container">
                    <a class="nav-list1" href="http://www.#.com/home">Home</a>
                    <a class="nav-list1" href="http://www.#.com/home">About</a>
                    <a class="nav-list1" href="http://www.#.com/home">Services</a>
                    <a class="nav-list2" href="http://www.#.com/home">Contact</a>
                </span>
            </div>
        </div>
        <div class="section1">
            <div id="overlay">
                <h1>header</h1>
            </div>
        </div>

Upvotes: 0

Views: 1880

Answers (6)

harryzcy
harryzcy

Reputation: 27

The <div id="overlay"> covers the page, you need to set z-index to make sure it's underneath

Upvotes: 0

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4281

Try the code snippet attached, I have changed the following in the your snippet.

#overlay {
 position: relative;
}

and

since you want to remove text getting highlighted in tag, you can use

text-decoration:none;


body {
  margin: 0;
  border: 0;
  padding: 0;
}


/* Navigation */

.header {
  width: 100vw;
  height: 6vh;
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header div {
  flex: 1;
}

.header-logo {
  padding-left: 5vw;
}

#header-logo {
  height: 4vh;
}

.header-nav {
  text-align: right;
}

.nav-container {
  padding-right: 5vw;
}

.nav-list1 {
  font-family: Oswald;
  font-weight: 500;
  font-size: 1em;
  display: initial;
  padding: 0.25vh 1.25vw;
  text-decoration: none;
}

.nav-list2 {
  font-family: Oswald;
  font-weight: 500;
  font-size: 1em;
  display: initial;
  border-style: solid;
  border-width: 5px;
  padding: 0.25vh 1vw;
  border-image: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  -moz-border-image: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  -webkit-border-image: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  border-image-slice: 1;
  text-decoration: none;
}

.nav-list2:hover {
  background: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
}


/* End Navigation */


/* Slideshow */

.section1 {
  background: url(files/home-slideshow-001.jpeg);
  height: 94vh;
  background-size: cover;
}

#overlay {
  font-family: Oswald;
  text-transform: uppercase;
  font-size: 3vw;
  font-weight: 700;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* End Slideshow */
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Oswald:400,500,600,700" rel="stylesheet">
</head>

<body>
  <div class="header">
    <div class="header-logo">
      <a href="http://www.#.com">
        <img id="header-logo" src="files/w-logo.png">
      </a>
    </div>
    <div class="header-nav">
      <span class="nav-container">
                    <a class="nav-list1" href="http://www.#.com/home">Home</a>
                    <a class="nav-list1" href="http://www.#.com/home">About</a>
                    <a class="nav-list1" href="http://www.#.com/home">Services</a>
                    <a class="nav-list2" href="http://www.#.com/home">Contact</a>
                </span>
    </div>
  </div>
  <div class="section1">
    <div id="overlay">
      <h1>header</h1>
    </div>
  </div>

Upvotes: 0

mblancodev
mblancodev

Reputation: 506

When you want to do navegation bar you should do it into a < nav > tag and them the like this :

    <nav class="header-nav">
            <div class="nav-container">
                <a class="nav-list1" href="http://www.#.com/home">Home</a>
                <a class="nav-list1" href="http://www.#.com/home">About</a>
                <a class="nav-list1" href="http://www.#.com/home">Services</a>
                <a class="nav-list2" href="http://www.#.com/home">Contact</a>
            </div>
        </nav>

Other thing, you can add to the navbar a z-index property so it will always stay on top of other things.

Upvotes: 0

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

The #overlay element has been absolutely positioned and taken out of the normal document flow, this causes the element to "sit above" the .header element, resulting in the observed behaviour.

Create a new stacking context by declaring a position property with the value of relative on .header so that a z-index property with the value other than auto can be declared, e.g:

.header{
    width: 100vw;
    height: 6vh;
    background: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    /* additional */
    position: relative; /* required to declare a z-index property */
    z-index: 1;
}

Code Snippet Demonstration:

body{
    margin: 0;
    border: 0;
    padding: 0;
}
/* Navigation */
.header{
    width: 100vw;
    height: 6vh;
    background: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    /* additional */
    position: relative; /* required to declare a z-index property and create new stacking context */
    z-index: 1;
}
.header div{
    flex: 1;
}
.header-logo{
    padding-left: 5vw;
}
#header-logo{
    height: 4vh;
}
.header-nav{
    text-align: right;
}
.nav-container{
    padding-right: 5vw;
}
.nav-list1{
    font-family: Oswald;
    font-weight: 500;
    font-size: 1em;
    display: initial;
    padding: 0.25vh 1.25vw;
    color: white;
}
.nav-list2{
    font-family: Oswald;
    font-weight: 500;
    font-size: 1em;
    display: initial;
    border-style: solid;
    border-width: 5px;
    padding: 0.25vh 1vw;
    border-image: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
    -moz-border-image: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
    -webkit-border-image: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
    border-image-slice: 1;    
}
.nav-list2:hover{
    background: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
}
/* End Navigation */

/* Slideshow */
.section1{
    background: url(files/home-slideshow-001.jpeg);
    height: 94vh;
    background-size: cover;
}
#overlay{
    font-family: Oswald;
    text-transform: uppercase;
    font-size: 3vw;
    font-weight: 700;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* End Slideshow */
<div class="header">
            <div class="header-logo">
                <a href="http://www.#.com">
                    <img id="header-logo" src="https://placehold.it/200x100">
                </a>
            </div>
            <div class="header-nav">
                <span class="nav-container">
                    <a class="nav-list1" href="http://www.#.com/home">Home</a>
                    <a class="nav-list1" href="http://www.#.com/home">About</a>
                    <a class="nav-list1" href="http://www.#.com/home">Services</a>
                    <a class="nav-list2" href="http://www.#.com/home">Contact</a>
                </span>
            </div>
        </div>
        <div class="section1">
            <div id="overlay">
                <h1>header</h1>
            </div>
        </div>

Upvotes: 1

Sander
Sander

Reputation: 23

You have a div with the id "overlay" that prevents clicks from getting to the link. It basically shields the underlying webpage from clicks.

You can solve this by either deleting the overlay or by lowering the overlay so the click events above it will still work. You can do this by adding some space to the "overlay" css "top" property.

Upvotes: 0

dave
dave

Reputation: 1430

You #overlay is covering your page, so you cannot click underneath it.

Upvotes: 0

Related Questions