Styling text links does not guarantee clickability

Having a bit of trouble with two links ("WORK" and "ABOUT") at the top of this page.

I can't seem to style them properly. All I can do in CSS is apply a float, nothing else works.

#nav_container {

float: right;
position: relative;
padding-right: 110px;
padding-top: 60px; 
}




#nav_container li {
float: left;  
display: inline;
color: #fff;
list-style: none;
text-decoration: none;
cursor: pointer;
}

If I expand my browser so that they are off to the right of the tiled images, they become clickable.

The tiled images have a relative setting for an overlap effect, while the blue bar is set to absolute.

I've tried adjusting the z-index values for both the tiled images and the nav links to make the links appear on top and clickable, but no luck.

Any ideas?

htmlcsscss-positionz-index

Answer №1

The issue lies in the fact that the #home_console_wrapper element is actually covering the #color_beam, with a sizable padding-top used to conceal this behavior. Additionally, it has a higher z-index, which renders your links unclickable.

To fix this problem, you should eliminate the position: absolute from #color_beam, as well as the padding-top: 190px from #home_console_wrapper.

By doing so, your links will regain their ability to be clicked while maintaining the same layout.

If you wish to maintain a slight overlapping effect, simply apply a negative margin-top on #home_console_wrapper:

#home_console_wrapper {
  margin-top: -35px;
}

I trust this information will prove beneficial! :)

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

The HTML generated by Angular does not display as anticipated

When converting the angular-generated HTML to a PDF using jspdf, it does not take into consideration angular classes like ng-hide. This means that elements styled with the ng-hide class will still appear in the generated PDF. To see an example, visit the ...

htmlangularjspdfmarkupjspdf

Is it possible to incorporate a carousel within this parallax feature?

I recently downloaded a JavaScript library called paroller.js that has allowed me to create a captivating parallax effect on my website. The effect is based on a background image (forsidebillede2.jpg) that covers the entire screen, and I even managed to i ...

javascriptcssbootstrap-4carouselparallax

Why does my anchor appear with a different style compared to my submit button?

I encountered an issue where I have created a submit button and anchor link with the same class name and style, but they are displaying differently. The anchor link appears to be larger than the submit button. You can see the difference in size here: http ...

htmlcss

Even though the button appears to be a regular button, it surprisingly functions as a submission

The submit button is supposed to validate the form using a JavaScript script, but it doesn't work as expected. Instead of validating the form, it directly calls the action in the controller. To address this issue, I changed the button to a regular but ...

javascriptc#html.netasp.net-mvc

Designing various paragraphs with unique styles utilizing HTML and CSS

Can someone help me with using the class tag on paragraph tags? I am trying to style a specific paragraph from an external CSS file without affecting all other paragraphs. I've searched online and learned that by adding <p class="somename" >, I ...

csshtmlclassstyles

Using a for loop in JavaScript to fetch and display a specified number of results from an API

Recently, I delved into the world of Javascript and API arrays to grasp the concept of retrieving and manipulating various APIs. The topic of Javascript loops and arrays has been discussed numerous times, both here on StackOverflow and on other platforms. ...

javascripthtmlcssarraysfor-loop

I am unable to display the service response in the Angular component

I'm facing an issue with displaying data in an angular component from a service. The process from the service to the component seems fine, but when I try to use the variable in HTML, it doesn't show the result. For this project, I am using the M ...

javascripthtmlangulartypescriptmetronic

Displaying a pop-up window upon clicking on an item in the list view

After creating a list where clicking an item triggers a popup, issues arose when testing on small mobile screens. Many users found themselves accidentally tapping buttons in the popup while trying to view it. What is the most effective way to temporarily ...

javascriptandroidjqueryhtmljquery-mobile

Preventing users from selecting past dates in HTML input date field

I need help with disabling past dates in an HTML date input field. Even though I am able to restrict selecting past dates on the date picker, I can still save data if I manually type in a previous date (e.g., 12/08/2020). $(document).ready(function() { ...

javascripthtmljquerydate

Customizing CSS for the activity feed on Facebook using HTML5

Can I customize the appearance of the HTML5 Facebook activity plugin with my own CSS? This is the current code for the plugin: <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d. ...

cssfacebookplugins

An easy guide to animating multiple sections of progress bars individually in Bootstrap

My Bootstrap code successfully animates a section of progress bars when the user views it. However, it currently animates all progress bars on the page rather than just those in the viewed section. This means that when the user moves to another section, th ...

javascriptcsstwitter-bootstrap-3progress-barjquery-waypoints

Click here to start your Django download now

I am looking for a way to monitor the number of times a file has been downloaded. Here is my plan: 1) Instead of using <a href="{{ file.url }}" download>...</a>, I propose redirecting the user to a download view with a link like <a href="do ...

pythonhtmldjango

Showcasing two columns side by side in the first row and one column beneath them in the second row within a single tr

Here is the code snippet I created: <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td& ...

javascriptjqueryhtmlcss

Steps for building a dropdown search field in PHP

Hello everyone, I am new to PHP and need some assistance with my project. I have a library database in MySQL Workbench consisting of tables: Student, Book, and Checkin. My goal is to utilize HTML and PHP to showcase this data on a webpage, which has been ...

phphtmlmysqlmysqlimysql-workbench

Is it possible to use a single function to both set the state and return JSX?

I'm currently grappling with creating a function that, when called, will update the state to an object {item: 'whatever the user types', list: [...list, todo]}. The challenge I'm facing is figuring out how to update the state and return ...

javascripthtmlreactjsreact-hooksuse-state

Creating a currency input field in HTML using a pattern textbox

In a project using HTML, Angular 2, and Typescript, I am working with a textbox. How can I ensure that it only accepts numbers along with either one dot or one comma? The input should allow for an infinite number of digits followed by a dot or a comma and ...

htmlangularjsdesign-patternstypescriptcurrency

HTML5 - Adding Space to Main Section with a Two-column Layout

After spending 3 and a half hours racking my brain, I still can't figure out how to complete two seemingly simple tasks. First, I need to pad the outside of paragraph div, and secondly, I want to split the main section into two columns to add some lin ...

csshtml

Issue with the top margin of the body

Recently, I've encountered a peculiar problem with a standard website layout that I use. The issue seems to be centered around the space between the top and the first div: navbar. No matter what I try, I just can't seem to remove it, as the reas ...

htmlcss

When the user clicks, automatically direct them to a different webpage

I tried to create a changing background color effect in the following order: Black, White, Red, Green, Blue. <body style="background-color:black"> <script type="text/javascript"> function changeColor() { var currentBg ...

javascripthtmlcssanchor

Is there a substitute for the /deep selector in CSS shadow dom?

It seems that the /deep selector is no longer an option for selecting shadow DOM children, so I'm in search of an alternative solution. CSS scoping offers solutions for ascending selectors, but not for descending ones. Considering this DOM structure ...

cssshadow-dom