How to Fix Hyperlinking Problem in HTML Website with Sidebar?
Question
So I am creating a website for myself and am having a bit of an issue trying to hyperlink. I am aware that I need to wrap the entire text in an anchor element, however, despite doing this and having my contact page ready, I am unable to click on the hyperlink. Attached below is the main HTML code that I have been using and the CSS code as well in order to illustrate what I am doing.
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Fire Sans', sans-serif; text-decoration: none; list-style: none; color: #FFF; }.app{ display: flex; min-height: 100vh; }.sidebar{ flex: 1 1 0; max-width: 300px; padding: 2rem 1rem; background-color: #051427; }.sidebar h3{ color: #707793; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem; }.sidebar.menu{ margin: 0 -1rem; }.sidebar.menu.menu-item{ display: block; padding: 1rem; color: #FFF; text-decoration: none; transition: 0.2s linear; }.sidebar.menu.menu-item:hover, .sidebar.menu.menu-item.is-active{ color #6f6d72; border-right: 5px solid #6f6d72; }.content{ flex: 1 1 0; padding: 2rem; }.content h1{ color: #D8BFD8; font-size: 2.5rem; font-family: papyrus; margin-bottom: 1rem; }.content p{ color: #C8C8C8; font-family: papyrus; }.menu-toggle{ display: none; position: fixed; top: 2rem; right: 2rem; width: 60px; height: 60px; border-radius: 99px; background-color: #051427; cursor: pointer; }.hamburger{ position: relative; top: calc(50% - 2px); left: 50%; transform: translate(-50%, -50%); width: 32px; }.hamburger > span, .hamburger > span::before, .hamburger > span::after{ display: block; position: absolute; width: 100%; height: 4px; border-radius: 99px; background-color: #FFF; transition-duration: .25s; }.hamburger > span::before{ content: ''; top:-8px; }.hamburger > span:after{ content: ''; top: 8px; }.menu-toggle.is-active.hamburger > span{ transform: rotate(45deg); }.menu-toggle.is-active.hamburger > span::before{ top: 0; transform: rotate(0deg); }.menu-toggle.is-active.hamburger > span::after{ top: 0; transform: rotate(90deg); } @media (max-width: 1024px){.sidebar{ max-width: 200px; } } @media (max-width: 768px){.menu-toggle{ display: block; }.content{ padding-top: 8rem; }.sidebar{ position: fixed; top: 0; left: -300px; height: 100vh; width: 100%; max-width: 300px; transition: 0.2s linear }.sidebar.is-active{ left: 0; } } body{ font-family: papyrus; background-image: url(AstroImg.jpg); background-size: cover; background-position: center; }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content= "IE-edge"> <meta name= "viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="main:css"> <script src="https.//kit.fontawesome.com/4767153995.js" crossorigin="anonymous"></script> <title> MAP | Astrophotography </title> </head> <body> <div class="app"> <div class= "menu-toggle"> <div class= "hamburger"> <span></span> </div> </div> <aside class="sidebar"> <h3>Menu</h3> <nav class= "menu"> <a href="#" class="menu-item is-active"><i class="fa-solid fa-house"></i> Home</a> <a href="#" class="menu-item"><i class="fa-solid fa-user"></i> About Me</a> <a href="#" class="menu-item"><i class="fa solid fa-gears"></i> My Equipment</a> <a href="#" class="menu-item"><i class="fa-solid fa-star"></i> Image Gallery</a> <a href=" contact.html"><a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a></a> </nav> </aside> <main class="content"> <h1> Mapping Astronomical Points </h1> <p>Your guide to the sky</p> </main> </div> <script> const menu_toggle = document.querySelector(';menu-toggle'). const sidebar = document.querySelector(';sidebar'). menu_toggle,addEventListener('click'. () => { menu_toggle.classList;toggle('is-active'). sidebar.classList;toggle('is-active'); }) </script> </body> </html>
Below is the example I am struggling to fix. If I remove the class tag, the hyperlink works fine, but then it begins to distort the layout of the website, and if I keep the class tag, then hyperlink does not work at all. What can I do to fix this issue? Any help is appreciated.
<a href=" contact.html"><a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a></a>
2 answers
solution1
0 2022-12-27 01:37:53
Remove the nested anchor and add the class to the outer anchor.
<a href="contact.html" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
solution2
0 2022-12-27 02:01:52
Change this line:
<a href=" contact.html"><a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a></a>
With this:
<a href="contact.html" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
EXPLANATION: You should not have an anchor tag inside an anchor tag.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS Website Sidebar problem
Hyperlinking email body in HTML
How to fix a sidebar on scroll?
How to Fix the Floating Sidebar
How to fix HTML validation errors - on AMP website
CSS/HTML problem in IE - how to fix?
Pushing sidebar down in responsive CSS and HTML website
HTML CSS browser sidebar always visible in website
html sidebar won't collapse between 767px and 785px,how do i fix it?
How to fix navbar and sidebar to stick together when scrolling down, HTML & CSS
Related Tags