href # doesnt work
-
Hunlight last edited by
Hello,
So as mentioned in the topic href="#" doesnt work after I click it, it does nothing. While it should just go to the top of the page (or lets say open fresh page).
I checked default apps in windows and all href and html etc set to be opera.
-
-
Hunlight last edited by
@sgunhouse
Im beginner front end dev. My friends using chrome or mozilla and their link which has href = "#" after clicking forwards to the top of the page. While when Im using opera gx it does nothing link is not clickable. My teacher checked my code and tried clicking them ( he uses mozilla) they work as intended. So there goes my question why in opera links with just # doesnt work ? -
-
Hunlight last edited by
it is just a simple menu link for example this one -
<a class="hero-logo logo" href="#"> -
burnout426 Volunteer last edited by
@hunlight With this:
frag.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Empty Fragment Identifier Test</title> <style> .beg { height: 3000px } </style> </head> <body> <p class="beg">Scroll down the page and click the link.</p> <p><a href="#">Click to jump to top of page</a></p> </body> </html>, Opera GX jumps to the top no problem.
-
Hunlight last edited by
@burnout426
it actually does. mine thouse is not in the <p> but in the list
<li class="menu_item">
<a class="menu_link active" href="#">
About me
</a>
</li> -
burnout426 Volunteer last edited by burnout426
@hunlight Okay. I changed it to:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Empty Fragment Identifier Test</title> <style> .beg { height: 3000px } </style> </head> <body> <p class="beg">Scroll down the page and click the link.</p> <ul> <li><a href="#">Click to jump to the top</a></li> </ul> </body> </html>and it still works for me. Maybe it has something to do with the CSS. What styles are set for .menu_item, .menu_link, and .active, and the ul/ol?
-
Hunlight last edited by Hunlight
@burnout426
here is everything that is related to the menu before going into the media :.menu { display: flex; column-gap: 50px; } .menu_link { display: block; font-family: var(--raleway); text-transform: uppercase; font-style: 12px; letter-spacing: 0.6px; font-weight: 700; padding: 7px; padding-top: 0; position: relative; } .active.menu_link::after, .menu_link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #FCBB08; transition: width 0.2s; } .active.menu_link::after, .menu_link:hover::after { width: 100%; }and media also provides some changes but nothing that could change it I think to not work.
.menu { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: #fff; flex-direction: column; align-items: center; justify-content: center; height: 100vh; row-gap: 30px; z-index: 10; transform: translateY(-1000px); transition: transform 0.2s; }I got it that on 992px it changes into the drop down menu. but it doesnt matter as my code is 100% same as my teacher got, but he is using Mozilla and those href # works perfectly fine.
thought to add full nav html just in case :
<nav class="header_nav"> <a class="hero-logo logo" href="#"> <img src="img/logo.svg" width="80" height="64" alt="logo"> </a> <button class="burger" type="button"> <div class="burger__line"></div> </button> <ul class="menu"> <li class="menu_item"> <a class="menu_link active" href="#"> HOME </a> </li> <li class="menu_item"> <a class="menu_link" href="#about"> ABOUT US </a> </li> <li class="menu_item"> <a class="menu_link" href="#portfolio"> PORTFOLIO </a> </li> <li class="menu_item"> <a class="menu_link" href="#team"> OUR TEAM </a> </li> <li class="menu_item"> <a class="menu_link" href="#"> BLOG </a> </li> <li class="menu_item"> <a class="menu_link" href="#contact"> CONTACT </a> </li> </ul> </nav>do not mind only one underscore in the classes we are just starting going into the BEM but I dont think it matters for this situation.
-
burnout426 Volunteer last edited by
With:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Empty Fragment Identifier Test</title> <style> .beg { height: 3000px; } .menu { display: flex; column-gap: 50px; } .menu_link { display: block; font-family: var(--raleway); text-transform: uppercase; font-style: 12px; letter-spacing: 0.6px; font-weight: 700; padding: 7px; padding-top: 0; position: relative; } .active.menu_link::after, .menu_link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #FCBB08; transition: width 0.2s; } .active.menu_link::after, .menu_link:hover::after { width: 100%; } /* .menu { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: #fff; flex-direction: column; align-items: center; justify-content: center; height: 100vh; row-gap: 30px; z-index: 10; transform: translateY(-1000px); transition: transform 0.2s; }*/ </style> </head> <body> <p class="beg">Scroll down and click the Home link.</p> <nav class="header_nav"> <a class="hero-logo logo" href="#"> <img src="img/logo.svg" width="80" height="64" alt="logo"> </a> <button class="burger" type="button"> <div class="burger__line"></div> </button> <ul class="menu"> <li class="menu_item"> <a class="menu_link active" href="#"> HOME </a> </li> <li class="menu_item"> <a class="menu_link" href="#about"> ABOUT US </a> </li> <li class="menu_item"> <a class="menu_link" href="#portfolio"> PORTFOLIO </a> </li> <li class="menu_item"> <a class="menu_link" href="#team"> OUR TEAM </a> </li> <li class="menu_item"> <a class="menu_link" href="#"> BLOG </a> </li> <li class="menu_item"> <a class="menu_link" href="#contact"> CONTACT </a> </li> </ul> </nav> </body> </html>, I still don't see an issue. That's the the media CSS commented out. With it active, it's not really a menu, but clicking the logo placeholder takes me to the top of the page.
Seems like there's a lot more needed to reproduce the issue.
-
Hunlight last edited by
@burnout426
have no idea what else can cause the problem everything else is other blocks and parts of the side, and no place doing smth with href or links in the menu. -
Locked by
leocg
