Is it possible that CSS is causing the links to be unclickable?

Question

Is it possible that CSS is causing the links to be unclickable?

I'm experiencing an issue where the links in my navigation bar are unclickable unless I remove some of the CSS styling I added.

Here is the specific CSS snippet that needs to be removed for the links to work:

.main-nav {
  float: right;
  list-style: none;
  margin-top: 30px;
}

The problem seems to be related to the float: right; property, as disabling it makes the links clickable again.

{
  margin: 0;
  padding: 0;
}

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(zomb2.PNG);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 30px;
}

<main-nav li {
  display: inline-block;
}

.main-nav li a {
  color: white;
  text-decoration: none;
  
...
... (Additional CSS code removed for brevity) 

    </div>

  </div>

Thank you in advance for any assistance! I believe it's something simple that I'm overlooking, but after searching around extensively, I couldn't find a solution specifically addressing this issue. Any help would be greatly appreciated!

html css

Answer 1

Answer №1

.hero when using position:absolute will overlap the header, to bring your links on top of it, use

position:/* any value but static */

+ z-index

a {
  position:relative;
  z-index:1;
}

See the demo below:

{
  margin: 0;
  padding: 0;
}

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(zomb2.PNG);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.main-nav li {
  display: inline-block;
}

.main-nav li a {
  color: white;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  position:relative;
  z-index:1;
}

.main-nav li.active {
  border: 1px solid white;
}

.main-nav li a:hover {
  border: 1px solid white;
}

.logo {
  width: 150px;
  height: auto;
  float: left;
  color: white;
  font-size: 20px;
}

body {
  font-family: monospace;
}

.row {
  max-width: 1200px;
  margin: auto;
}

.hero {
  position: absolute;
  width: 1200px;
  margin-left: 0px;
  margin-top: 0px;
}

h1 {
  color: white;
  text-transform: uppercase;
  font-size: 70px;
  text-align: center;
  margin-top: 275px;
}

h2 {
  color: white;
  text-transform: uppercase;
  font-size: 35px;
  text-align: center;
}

.button {
  margin-top: 30px;
  margin-left: 440px;
}

.btn {
  border: 1px solid white;
  padding: 10px 30px;
  color: white;
  text-decoration: none;
  margin-right: 5px;
  font-size: 13px;
  text-transform: uppercase;
}

.btn-one {
  background-color: darkorange;
  font-family: "Roboto", sans-serif;
}

.btn-two {
  background-color: darkorange;
  font-family: "Roboto", sans-serif;
}

.btn-two: hover {
  background-color: darkorange;
}

<header>
  <div class="row">
    <div class="logo">
    </div>

    <ul class="main-nav">
      <li class="active"><a href="">Home</a></li>
      <li><a href="about.html">Learn More</a></li>
      <li><a href="zombies.html">Real Zombies</a></li>
      <li><a href="ordinance.html">Guns and Ammo</a></li>
      <li><a href="news.html">The Latest</a></li>
      <li><a href="faq.html">FAQ</a></li>
    </ul>
  </div>

  <div class="hero">
    <h1> Real Zombie Vs. Human Battles </h1>
    <h2> Choose your side..</h2>
    <div class="button">
      <a href="" class="btn btn-one">Zombies</a>
      <a href="" class="btn btn-two">Humans</a>
    </div>
  </div>

Answer 2

.hero when using position:absolute will overlap the header, to bring your links on top of it, use

position:/* any value but static */

+ z-index

a {
  position:relative;
  z-index:1;
}

See the demo below:

{
  margin: 0;
  padding: 0;
}

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(zomb2.PNG);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.main-nav li {
  display: inline-block;
}

.main-nav li a {
  color: white;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  position:relative;
  z-index:1;
}

.main-nav li.active {
  border: 1px solid white;
}

.main-nav li a:hover {
  border: 1px solid white;
}

.logo {
  width: 150px;
  height: auto;
  float: left;
  color: white;
  font-size: 20px;
}

body {
  font-family: monospace;
}

.row {
  max-width: 1200px;
  margin: auto;
}

.hero {
  position: absolute;
  width: 1200px;
  margin-left: 0px;
  margin-top: 0px;
}

h1 {
  color: white;
  text-transform: uppercase;
  font-size: 70px;
  text-align: center;
  margin-top: 275px;
}

h2 {
  color: white;
  text-transform: uppercase;
  font-size: 35px;
  text-align: center;
}

.button {
  margin-top: 30px;
  margin-left: 440px;
}

.btn {
  border: 1px solid white;
  padding: 10px 30px;
  color: white;
  text-decoration: none;
  margin-right: 5px;
  font-size: 13px;
  text-transform: uppercase;
}

.btn-one {
  background-color: darkorange;
  font-family: "Roboto", sans-serif;
}

.btn-two {
  background-color: darkorange;
  font-family: "Roboto", sans-serif;
}

.btn-two: hover {
  background-color: darkorange;
}

<header>
  <div class="row">
    <div class="logo">
    </div>

    <ul class="main-nav">
      <li class="active"><a href="">Home</a></li>
      <li><a href="about.html">Learn More</a></li>
      <li><a href="zombies.html">Real Zombies</a></li>
      <li><a href="ordinance.html">Guns and Ammo</a></li>
      <li><a href="news.html">The Latest</a></li>
      <li><a href="faq.html">FAQ</a></li>
    </ul>
  </div>

  <div class="hero">
    <h1> Real Zombie Vs. Human Battles </h1>
    <h2> Choose your side..</h2>
    <div class="button">
      <a href="" class="btn btn-one">Zombies</a>
      <a href="" class="btn btn-two">Humans</a>
    </div>
  </div>

Answer 3

Answer №2

Consider updating your CSS as follows:

.main-nav
{
     float: right;
     list-style: none;
     margin-top: 30px;
     position: relative;
     z-index: 10;
}

Setting the z-index property should resolve the issue. However, it is important to note that this will only work if the position property is also set to relative.

For more detailed information, you can visit this link: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 4

Consider updating your CSS as follows:

.main-nav
{
     float: right;
     list-style: none;
     margin-top: 30px;
     position: relative;
     z-index: 10;
}

Setting the z-index property should resolve the issue. However, it is important to note that this will only work if the position property is also set to relative.

For more detailed information, you can visit this link: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Is it possible that CSS is causing the links to be unclickable?

Answer №1

Answer №2

Similar questions

When using $.post along with serialize, the post variables and values fail to be sent

Arranging form elements and a map in a side-by-side layout using HTML5

Create a dynamic feature in Bootstrap4 where the navigation bar changes color as the user scrolls to different sections of the

css: Aligning fonts horizontally when they have varying sizes

Discovering the pressed submit button in Node.js: A beginner's guide

As the screen size decreases, stacked Font Awesome icons seem to vanish

Locate integer and add a decimal point followed by two zeros

Angular Markdown Styling: A Guide

Error: The Android Phonegap framework encountered an issue when trying to access the getDuration function without a properly initialized media

Tips for effectively utilizing the display:none property to conceal elements and permanently eliminate them from the DOM

The map and its multiple markers are not showing up

Entering text into a field / Inserting data into a MySQL database / Presenting

Import of Bootstrap causing disruption in positioning of <figure> element

Automatically scroll a div when the internal div is in focus

What significance do the blank quotes hold in terms of value?

Achieving vertical centering in Bootstrap using the "table-cell" method

Ways to create a menu that appears as fixed-top without moving along with the scroll

Animate an image to the right when clicked, then return it to the left with a second click

Calculate the quantity of rows within a specific div container

What can I do to prevent my background images from overlapping each other?