Why is my <a> element not functioning properly?

Question

Why is my <a> element not functioning properly?

I'm encountering a small issue with my first HTML website. The hyperlinks in the "about me" section are not clickable, yet those in the drop down menu are functioning properly. Any thoughts on why this might be happening?

If you'd like to take a look at my code, it's available here: https://jsfiddle.net/2hkhmLef/

<p>
                  I am currently a 20-year-old student studying Software Engineering at Concordia University in Montreal. My experience so far has been enriching and full of learning opportunities. My aim is to graduate while using this website as a platform to document my journey. In the <a href="#port_section" class = "intro_link">portfolio</a> section, you can find my school assignments and personal projects. Check out what I've been up to lately in the <a href="#" class = "intro_link">activities</a> section. Additionally, for links to my social networks and contact information, head over to the <a href="#" class = "intro_link">contacts</a> section.
</p>

html css

Answer 1

Answer №1

Your .menu is set to have a height: 100vh and is contained within a nav with position: fixed, ensuring it always occupies the entire viewport. This means that whenever you click, you are interacting directly with the .menu.

To address this issue, you can modify the CSS as follows:

https://jsfiddle.net/2hkhmLef/1/

.menu {
  width: 100%;
  height: 92px;
  margin-bottom: 100vh;
}

This adjustment will still shift the content down but will no longer obstruct the links.

If the image in your HTML is not visible, unfortunately, I cannot assist with that. However, if all you need is for the links to remain clickable (though this solution is considered somewhat unconventional), you can try the following approach:

.menu {
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.menu ul {
    pointer-events: all;
}

Implementing this code snippet should resolve the issue of non-interactable links.

Answer 2

Your .menu is set to have a height: 100vh and is contained within a nav with position: fixed, ensuring it always occupies the entire viewport. This means that whenever you click, you are interacting directly with the .menu.

To address this issue, you can modify the CSS as follows:

https://jsfiddle.net/2hkhmLef/1/

.menu {
  width: 100%;
  height: 92px;
  margin-bottom: 100vh;
}

This adjustment will still shift the content down but will no longer obstruct the links.

If the image in your HTML is not visible, unfortunately, I cannot assist with that. However, if all you need is for the links to remain clickable (though this solution is considered somewhat unconventional), you can try the following approach:

.menu {
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.menu ul {
    pointer-events: all;
}

Implementing this code snippet should resolve the issue of non-interactable links.

Answer 3

Answer №2

The issue lies in the fact that you've specified the height to occupy the entire viewport with 100vh. To resolve this problem, try the following:

.main {
 width: 100%;
 height: 100%;

Answer 4

The issue lies in the fact that you've specified the height to occupy the entire viewport with 100vh. To resolve this problem, try the following:

.main {
 width: 100%;
 height: 100%;

Answer 5

Answer №3

Since @Dave has already discussed margin in his response, I'd like to provide an additional tip to help you convert your <a> into a button.

li a{
  display:block;
  padding:10px;
}

li{
  padding:0 !important;
}

You should apply these changes to your specific classes.

This adjustment is specifically for addressing the issue of your <a> not functioning as intended.

.menu{
  height: arbitary // Based on your requirements.
}

@font-face {
  src: url(Gravity-Light.otf);
  font-family: Gravity;
}

/* ------------------HOME---------------------------- */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

// Remaining CSS code for different sections such as about me, portfolio, and media.

Answer 6

Since @Dave has already discussed margin in his response, I'd like to provide an additional tip to help you convert your <a> into a button.

li a{
  display:block;
  padding:10px;
}

li{
  padding:0 !important;
}

You should apply these changes to your specific classes.

This adjustment is specifically for addressing the issue of your <a> not functioning as intended.

.menu{
  height: arbitary // Based on your requirements.
}

@font-face {
  src: url(Gravity-Light.otf);
  font-family: Gravity;
}

/* ------------------HOME---------------------------- */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

// Remaining CSS code for different sections such as about me, portfolio, and media.

Answer 7

Answer №4

The problem here lies in the css code. The .menu class has a property of height: 100vh;, causing it to cover the entire page. As a result, when you try to click on a link, you are actually clicking on the menu div that is positioned on top of it. This is why you are unable to click on the link.

Answer 8

The problem here lies in the css code. The .menu class has a property of height: 100vh;, causing it to cover the entire page. As a result, when you try to click on a link, you are actually clicking on the menu div that is positioned on top of it. This is why you are unable to click on the link.

Why is my <a> element not functioning properly?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the process of combining JS functions with PHP echo in code?

Tips for creating unique Styles for H1, H2, and H3 with MaterialCSS by utilizing createTheme

Retrieving information from the table based on the user currently logged in

Image element for Material UI CardMedia

Mastering the fundamentals of integrating/augmenting a fresh template in Umbraco

Possible revised text: "Exploring methods for verifying elements within a div using Selenium

Creating CSS style rules for aligning table column headers in JavaFXML

What are some ways to keep the text within the boundaries of the input box?

add text nodes with unnecessary quotation marks around my selection list

Instructions for adding an onfocus event listener to an input field in order to dynamically change the formatting of associated labels

What is the best way to show an error message on a webpage using jQuery within a PHP environment?

Mastering the art of curating the perfect image for your Facebook timeline

Omit a certain td element from the querySelectorAll results

The CSS is functioning properly on the local server, however, it is not loading

Align buttons in the center of a card or container using HTML and CSS

Aligning labels vertically with inputs

When the checkbox is not selected, the content on the page will revert back to its original state

CSS Sprite Animation Technique

Optimizing web layouts to fit on a single page is the most effective

Organize data in a Vue.js table