md-sidenav preventing anchor tags from working

Okay, so Angular 4, Angular Material 2, Node 8 (though problem existed with 6.x). Using md-sidenav with anchor tags as content. CSS isn't hitting them and clicking doesn't do anything. Checkout for open tags, tried switching mode to over, push, & side - problem persists. MdSidevnavModule is imported in my app module and works as expected otherwise. Tried changing the anchor tags to buttons - same issue. I apologize in advance if I'm missing something silly or missing info needed to diagnose. Thanks in advance.

<md-sidenav-container class="container mat-elevation-z12" 
color="primary">

<md-sidenav #sidenav mode="push" class="sidenav">
<div class="contact-container">
  <a href="#"><h1 id="call-to-action">Contact</h1></a>
  <a href="https://www.google.com">
    <i class="fa fa-linkedin-square fa-5x social-icon" id="linkedin" 
aria-hidden="true"></i>
  </a>
  <a href="https://www.google.com">
    <i class="fa fa-github-square fa-5x social-icon" id="github" aria-
hidden="true"></i>
  </a>
  <a href="https://www.google.com">
    <i class="fa fa-facebook-official fa-5x social-icon" id="facebook" 
aria-hidden="true"></i>
  </a>
  <a href="https://www.google.com">
    <i class="fa fa-twitter-square fa-5x social-icon" id="twitter" 
aria-hidden="true"></i>
  </a>
</div>
</md-sidenav>

<div class="sidenav-content">
  <h1 class="banner">Hey</h1>   
</div>

</md-sidenav-container>

1 answer

  • answered 2017-06-17 20:00 Aravind

    No, it will not prevent it from working. The issue might be wrong font awesome icons.

    My sample code

    <md-sidenav-container class="example-container">
       <md-sidenav #sidenav class="example-sidenav">
        <a href="https://www.google.com">
           <i class="fa fa-facebook" id="twitter" aria-hidden="true"></i>
        </a>
        <a href="https://www.google.com">
          <i class="fa fa-google" id="twitter" aria-hidden="true"></i>
        </a>
      </md-sidenav>
    </md-sidenav-container>
    

    Note: Use this post to get font-awesome

    LIVE DEMO illustrating anchor tag works inside md-side-nav