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>
htmlcss

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can a CSS class be inherited from a different file?

I have defined a class for styling a button: .client-header button { /*Properties*/ } And I also have a class to indicate when the menu is open: .client-menu-open { /*Properties*/ } My goal is to change the background of the button depending on ...

css

"Adjusting the height of Material UI card content to ensure fixed positioning at the bottom

Currently, I am working on mapping material-ui cards with dynamic content from a JSON object, resulting in varying card heights. I have successfully set a fixed height for each card, but the content is not aligned correctly. You can see the issue in this ...

javascripthtmlcssreactjsmaterial-ui

"Looking for a solution to the ESLint error related to 'no-unused-var' and Google Maps integration. How can I effectively resolve

I'm struggling with what seems to be a simple problem I tried adding /* export myMap */ or /* global myMap */ at the beginning of the script but I keep getting errors Code HTML <h1>My First Google Map</h1> <div id="googleMap" ...

javascripthtml

Do you think there is a more optimal method for achieving this?

Here is the core concept: I developed it in a fluid manner like this: Do you have any suggestions for improving the way I implemented this? ...

csshtml

Easiest method to globally disable form autocompletion in an application without manually setting autocomplete off for every individual form

Is there a quick way to disable autocomplete in all forms within the application without individually adding "autocomplete=off" to each form? ...

javascripthtmljquerycsssass

Tips on making Material-UI Drawer compress other content when it is open

Seeking assistance from those familiar with CSS and Material UI! I'm currently working on implementing a Material UI Drawer component that doesn't just slide out over the top of the page content, but actually causes the page content to adjust aro ...

cssreactjsmaterial-ui

The ExpressJS EJS issue arises when trying to access a property that is undefined

I'm new to NodeJS and seeking assistance. I am working on a website where users can promote their virtual conferences for others to see. I have set up a form with the POST method, where the data gets pushed into an array and then displayed in an EJS f ...

javascripthtmlexpressejsbackend

The web typography appears fuzzy or has incorrect thickness, lacks consistency across pages and even within a single page

The font (ProggyCleanSZBP.ttf from 1.1.5 release) appears to be intermittently thick and blurry. If you compare with , you'll notice that the latter displays as desired in most cases, but there are instances where the issue occurs, such as the first ...

htmlcssfonts

Issues with JavaScript and CSS functionality not functioning correctly as expected

There seems to be an issue with the order of HTML elements in the following code. When I place the div with the class thumb-bar before the full-img div, the JavaScript functions correctly. However, if I switch their positions, the JavaScript functionalitie ...

javascripthtmlcss

Tips for causing a single span tag within a group of multiple tags to overflow its parent element

Is there a way to make the highlight span sit just after the to without affecting the width of the parent, and without using absolute positioning? I would like the span to be aligned with the example "to" and overflow outside of the parent container. Thank ...

htmlcss

What is the best way to achieve full screen in HTML5 using Libgdx?

Can someone provide guidance on how to maximize the canvas in HTML5 LibGDX? I seem to only come across the width and height properties in GwtApplicationConfiguration. ...

htmlgwtbrowserlibgdx

Switching the border of a div that holds a radio button upon being selected

I have a piece of code that I use to select a radio button when clicking anywhere within a div, which represents a product photo. To make it clear for the customer, I want to add a border around the selected product. Here is the initial code: <script t ...

javascriptjqueryhtmlcss

Guidelines for choosing a dropdown menu option using jQuery in a WordPress photo gallery

First off, take a look at the screenshot to understand what I'm trying to accomplish: Within WordPress, after clicking on "New Post" and then on the "Add Media" button, a pop-up image gallery appears with an image filtering drop-down menu. My goal is ...

javascriptjqueryhtmlwordpress

JavaScript Fullcalendar script - converting the names of months and days

I recently integrated the Fullcalendar script into my website (https://fullcalendar.io/). Most of the features are functioning correctly, however, I am seeking to translate the English names of months and days of the week. Within the downloaded package, ...

javascripthtml

What is a creative way to design a mat-radio-group without traditional radio buttons?

I am looking to create a component that offers users a list of selections with the ability to make only one choice at a time. The mat-radio-group functionality seems to be the best fit for this, but I prefer not to display the actual radio button next to t ...

cssangulartypescriptangular-material

Retrieve user choices from dropdown menu with Flask and HTML

I'm currently working on developing a dropdown list in HTML that, upon selection submission, will pass the chosen option to a Python script to dynamically update the content of the HTML page. While I have successfully implemented the dropdown list, I ...

pythonhtmlflask

Utilize flex to position content at the bottom

My layout features a fixed header and footer, positioned at the top and bottom respectively. The content section in between fills the remaining space, with a scrollbar available if the content extends beyond the area. <div id="app"> <d ...

cssflexbox

Struggling to grasp the concept of fit-content? Let me

For my personal project, I am creating a simple react webpage. To incorporate zoom capabilities, I decided to use the library called React-zoom-pan-pinch. Initially, without implementing this library, my SVG element filled the screen in red, which was the ...

htmlcssreactjssvg

Combining Node and React: Using CSS Class Names with Hyphens

Currently, my project utilizes react-starter-kit and includes several react components, each with its own styling file (scss). Every component imports the styling file at the top like this: import s from './Header.scss'; When it comes to using ...

cssnode.jsreactjssassbabeljs

Can floated divs be prevented from collapsing without taking up any width?

Let's discuss an issue that is not related to block elements collapsing when their children are floated, and has nothing to do with clearing at all. Imagine having a set of floated divs like: <div class="column">Column 1</div> <div cl ...

cssfirefoxbrowsersafaricross-browser