href # doesnt work

sgunhouse

sgunhouse Moderator Volunteer @Hunlight

@hunlight Something sounds strange in your description - where is this href? If it is on a web page in Opera, then settings in the rest of Windows don't matter. And if it isn't in Opera, then Opera has no way to understand what it refers to.

Hunlight

Hunlight @sgunhouse

@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 ?

burnout426

burnout426 Volunteer

Example HTML markup for page that reproduces the issue?

Hunlight

Hunlight @burnout426

@burnout426

it is just a simple menu link for example this one -
<a class="hero-logo logo" href="#">

burnout426

burnout426 Volunteer @Hunlight

@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

Hunlight @burnout426

@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

burnout426 Volunteer @Hunlight

@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

Hunlight @burnout426

@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

burnout426 Volunteer @Hunlight

@hunlight

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

Hunlight @burnout426

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