Circular navigation method

I have implemented a unique navigation style on my website, specifically designed for optimal performance on the Safari browser. Each of the five li elements contains an anchor tag, with each anchor having a different href value. However, when hovering over the first (or subsequent) anchor, it displays the href of the last anchor tag. As a result, clicking on any anchor tag redirects to the final anchor's href.

You can view a demonstration of this issue in action by following this demo

javascripthtmlcss

Answer №1

Resolved my issue by making a change in the CSS within this specific class

.csstransforms .cn-wrapper li a {
    display: block;
    font-size: 1.18em;
    height: 14.5em;
    width: 14.5em;
    position: absolute;
    bottom: -7.25em;
    right: -7.25em;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    padding-top: 1.8em;
    text-align: center;
    -webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
    -ms-transform: skew(-50deg) rotate(-70deg) scale(1);
    -moz-transform: skew(-50deg) rotate(-70deg) scale(1);
    transform: skew(-50deg) rotate(-70deg) scale(1);
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity 0.3s, color 0.3s;
    -moz-transition: opacity 0.3s, color 0.3s;
    transition: opacity 0.3s, color 0.3s;
}

Removed position:fixed from the above class (as suggested here) and now the anchor tags work properly :)

Sharing this solution in hopes that it may assist others as well

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

Modifying a section of the source name using jQuery continues to occur repeatedly when the window is resized

I have written a piece of code that is designed to identify the src attribute of all images within a specific div and modify the src name when the window width is less than 900 pixels. The code works perfectly when the page is refreshed, but I encounter an ...

javascriptjqueryhtmlcss

SurveyJS: Get and assign default value to custom attribute

I am currently working on designing a custom property for the property grid that will allow users to choose from a dropdown menu which "attribute" they want to link to a specific question. This attribute is essential in the project's business domain, ...

javascripttypescriptsurveyjs

What causes the Element to be null in Vue.js?

Could someone please clarify why the console.log output is showing as null, and provide guidance on how to resolve this issue? <template v-for="day in getMonthLength()"> <td> <input :id="day" type=number :value=&qu ...

javascriptvue.js

Challenges arise when adjusting frame size for mobile and desktop devices

I am trying to achieve an auto-resize feature for my frame's height when the screen width is smaller than a certain value. I want it to behave like Sketchfab, as demonstrated in this video: http://www.youtube.com/watch?v=_y5ckVFGHKU&feature=youtu. ...

javascriptmobileiframeresizethree.js

Issues arise with the functionality of custom jQuery sliders

I'm attempting to create a bootstrap panel slider using my own jQuery code, but it's not functioning as anticipated. My Objective: I have two links for "previous" and "next", and three panels with distinct headings. When the "previous" link is ...

javascriptjqueryhtmlcsstwitter-bootstrap

Override existing Keywords (change false to true)

Are there any ways to overwrite reserved words? It's not something I would typically consider, but it has sparked my curiosity. Is it feasible to set false = true in JavaScript? I've come across instances on different websites where individuals ...

javascript

Ensuring the correct width for a .png image in an email newsletter for Outlook 2013

After creating an email newsletter that works perfectly on all email clients except Outlook 2013, I realized that the image I included is not adhering to the table width specified. Instead, it is defaulting to its own width of 658px. View image here Below ...

htmlcssemailoutlooknewsletter

Steps for exporting all elements of an array to an Excel file using the exceljs library in Node.js

I am facing an issue where I need to export all elements from an array to an Excel file using exceljs in Node.js. Here is an example of my array structure: array image After defining my array, the goal is to create an Excel file that looks like this: exce ...

javascriptnode.jsexceljs

Alert! Server node encountered an issue while handling the response: process.nextTick(function(){throw err;});

Currently, I am working on a simple application to familiarize myself with Mongo, Express, and Node. An issue arises when I attempt to utilize res.json(docs) in the success conditional during the GET request, generating an error process.nextTick(function( ...

javascriptjsonnode.jsexpress

What is the proper way to use AJAX for sending data through a POST request?

Check out my Fiddle Currently, I am in the process of learning AJAX through a tutorial and so far, I have managed to retrieve the desired data and display it on the DOM quite effortlessly. However, I have encountered some difficulties when attempting to ...

javascriptjqueryajax

Utilize various styles from within a specified font family in CSS

My website is currently using the font-family Roboto with two different font types (400 and 500i). <link href="https://fonts.googleapis.com/css?family=Roboto:400,500i" rel="stylesheet"> Even though I have both fonts available, I am struggling to im ...

htmlcsswebfontsgoogle-font-api

Tips for setting limitations on a date picker's minimum and maximum values on an iPhone using JavaScript

I have encountered an issue with my JavaScript function that sets min and max values for the input type date. While it works perfectly on Android devices, I am facing a problem on iPhone where I am unable to restrict the calendar with the specified min and ...

javascriptangularjsiphone

Upload button allowing multiple values to be uploaded as a single file

I'm currently facing an issue with my list of values and upload buttons. The file upload functionality is working correctly, but the problem arises when I try to upload a file for any item in the list - it always uploads for the first item only. Here ...

htmlangular

What is the best way to enjoy video and audio content on a mobile website?

What is the best way to incorporate video and audio on mobile websites? I am interested in learning how to convert and embed a Video and an MP3 file on a page of a mobile website. ...

androidhtmlmobile-safarimobile-websitehtml5-video

perform asynchronous calls within a for loop in a synchronous manner

Having issues with managing asynchronous events in sails.js. Obtaining data from a JSONapi and attempting to insert it into the database sequentially within a for loop. The goal is to maintain the correct order of execution. For simplicity, consider the f ...

javascriptnode.jsasynchronoussails.jswaterline

Connect to a node.js server from a different network

Looking to set up a basic live chat using node.js, socket.io, and express. Managed to get it working on my local network, but wondering if there's a way for someone from another internet connection to connect without me needing to pay for server space ...

javascriptnode.jsexpresssocket.iowebserver

How to convert JavaScript RegExp hashtags into links in an HTML document without the hyperlinked hashtag

I need help replacing the text #hashtag with <a href="http://example.com/foo=hashtag"> #hashtag</a> using JavaScript or jQuery. This is what I have tried so far: <!DOCTYPE html> <html> <body> <button onclick="myFunction() ...

javascriptjqueryhtmlregexreplace

Aligning the menu links to the right on a horizontal CSS menu

I have created a horizontal menu using CSS and HTML with the following code: .nav > li:hover { background: #666666; text-decoration:none; } .active { background: #666666; text-decoration:none; } nav, ul, li, a { margin: 0; paddi ...

javascripthtmlcss

Turning off font ligatures in CSS (letter connections deactivation)

Typically, modern web browsers will automatically merge certain letter combinations, such as 'f' and 'i', into a single character known as a ligature. While this can enhance readability, it may not always align with a designer's pr ...

cssgoogle-chromefonts

When viewed in IE11, each element with { display: table-cell } styling is displayed on a separate line

Here is the HTML code snippet (JSFiddle): <div class="form-group tabled-contents"> <div style="display: table-row;"> <input id="BodyContentPlaceholder_TxtCustomerId" type="text"> <input id="BodyContentPlaceholder_B ...

htmlcssinternet-explorerbrowsercross-browser