internal anchor links no longer working after upgrade

here is my website you can see the main button on the top, when mouse hover browser says it anchor to #port but when I click nothing happened. This happened after multiple WordPress upgrades (I didn’t check how the previous versions behaved).

Happen with plan text as well.

Any help would be appreciated

Source link plugin – show just anchor / link

I implemented a small source link plugin on my WordPress website via the following codes.


                        <?php global $  post, $  pages, $  page;  $  total = count( $  pages ); // Link źródłowy if ( $  total < 2 || $  page === $  total ) :          if ( $  url = get_post_meta( $  post->ID, '_source_link', true ) ) :         $  label = get_post_meta( $  post->ID, '_source_link_label', true );         $  label = $  label ? $  label : $  url;     ?>         <div class="source-link">             <b>Źródło:</b> <a href="<?php echo esc_url( $  url ); ?>" rel="nofollow" target="_blank"><?php                 echo esc_html( $  label ); ?></a>         </div>     <?php endif;  endif;  ?> 


add_action( 'add_meta_boxes', 'wpse_source_link' );   add_action( 'save_post', 'wpse_source_link_save' );   function wpse_source_link() {      add_meta_box(         'source_link',         __( 'Link źródłowy', 'myplugin_textdomain' ),          'wpse_source_meta_box',         'post',         'side'     ); }   function wpse_source_meta_box( $  post ) {      wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );       echo '<label for="source-link">Link</label> ';   echo '<input type="text" id="source-link"" name="source_link" value="'.     get_post_meta( $  post->ID, '_source_link', true ) .'" size="25" />';    echo '<label for="source-link-label">Nazwa strony</label> ';   echo '<input type="text" id="source-link-label"" name="source_link_label" value="'.     get_post_meta( $  post->ID, '_source_link_label', true ) .'" size="25" />'; }   function wpse_source_link_save( $  post_id ) {    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )        return;    if ( ! wp_verify_nonce( $  _POST['myplugin_noncename'], plugin_basename( __FILE__ ) ) )       return;     if ( current_user_can( 'edit_post', $  post_id ) ) {        update_post_meta( $  post_id, '_source_link', sanitize_text_field( $  _POST['source_link'] ) );       update_post_meta( $  post_id, '_source_link_label', sanitize_text_field( $  _POST['source_link_label'] ) );     } } 

As you can see there are two fields: Link źródłowy (Source link) and Nazwa strony (website name – anchor). However, at this moment this plugin only works, when both fields have some text inside. Is there any way to make it work also with just anchor/link? I mean, if two fields are completed it should show anchor with link, but if just anchor has some text in it, then it should show only anchor. Same goes for link.

Does anyone know how to make it work like that? To be honest I’m a newbie and I have no idea.

How can i make anchor tags clickable when using the function z index

the nav is set absolute to the headerContainer. And in motion it works fine. It needs to drop from behind the headerContainer over the main content of the page. This way the content dissapears and the menu is on top. I have done so by setting my main class to relative and a negative z-index: 2; because the nav is set to negativ -1;

Right now everything works and it looks good. The only problem is that the anchor tags inside my nav are not clickable anymore.

I have been searching for the answer but could not find anything related. Is there anyone who can tell me why this occurs? I have yet to find a good solution for this.

What i want to happen seems so simple.. it needs to drop down from behind or at least create the idea its coming from behind the header..

I have tried setting the height of the nav to 0 and on click set it to 100%. That wil drop the menu as if it comes from behind. but gave me other problems like the anchors would come in later or sooner then the actual nav background.

Here is the code.

let Btn = document.querySelector(".menuBtn"); let menu = document.querySelector("nav"); let icon = document.querySelector(".fa-bars"); Btn.onclick = () => {     menu.classList.toggle("show");     icon.classList.toggle("fa-times"); } 
* {     margin: 0;     padding: 0; } body {     background: #F5F5F5;     color: #1F1F1F;     font-family: 'Open Sans', sans-serif;     font-size: 20px; } a {     text-decoration: none;     color: #1F1F1F; } /* --- HEADER --- */ header {     width: 100%;     height: auto;     background: #FFF; } .headerContainer, .container {     width: 90%;     max-width: 1140px;     margin: auto;     padding: 15px; } .headerContainer {     display: flex;     justify-content: space-between;     align-items: center;     position: relative; } /* --- Logo --- */ .headerBrand a {     font-size: 2rem;     font-weight: 800;     display: flex;     align-items: center; } .headerBrand img {     padding: 0 15px 0 0; } /* --- NAV --- */ header nav {     z-index: -1;     /* display: none; */     padding: 15px;     width: calc(100% - 30px);     position: absolute;     top: -100px;     left: -1px;     background: #ffffff;     transition: top 2s; } header {     top: 100%; } header nav ul.mainMenu {     list-style: none; } header nav ul li a:hover {     color: red; } .menuBtn {     width: 35px;     height: 35px;     text-align: center;     background: red;     font-size: 25px;     border-radius: 5px;     cursor: pointer;     color: #FFF; } /* --- MAIN --- */ main {     position: relative;     z-index: -2; } 
<link rel="preconnect" href=""> <link href="" rel="stylesheet"> <script src="" crossorigin="anonymous"></script>  <!-- header-->         <header>             <div class="headerContainer">                 <!-- Logo or Brandname -->                 <div class="headerBrand">                     <a href=""><img src="" width="auto" height="80px"> Logo text</a>                 </div>                 <!-- END Logo -->                 <!-- Nav -->                 <nav>                     <ul class="mainMenu">                         <li><a href="#">First link</a></li>                         <li><a href="#">Second link</a></li>                         <li><a href="#">Thirth link</a></li>                         <li><a href="#">Fourth link</a></li>                     </ul>                 </nav>                 <div class="menuBtn"><i class="fas fa-bars"></i></div>                 <!-- END Nav -->             </div>         </header>         <!-- END header-->         <!-- Main -->         <main class="container">             <section>                 <h1>This is a header</h1>                 <p>This is some text</p>                 <p>This is some text</p>                 <p>This is some text</p>                 <p>This is some text</p>                 <p>This is some text</p>                 <p>This is some text</p>             </section>         </main>         <!-- END Main--> 

Using Anchor Links aka Jump To Links with Internal Linking Strategy

Do anchor links that link to another page help or hurt SEO internal linking strategy?

For example, let’s say I have two pages:, and

And, on /subtopic-service I have anchor links like:

And, I link to that anchor like from the higher level page /services.

I know that anchor links aren’t indexed. But, will I get the same SEO benefit from an internal link with an anchor link?