I have added header icons for home and user. When clicked on the user image in desktop view, it should redirect to the respective page. However, when I minimize it in tab or mobile view, nothing is displayed. This issue only occurs with the user image and not the home image. Below is the code I have tried:
<div id="header">
<a id="home" onclick="homeclick();"
style="cursor: pointer;"><img src="images/home.png"
height='28' width='25' /> </a>
<a id="user" title="User" style="cursor: pointer;" class="md-trigger" data-modal="modal-8"><img
src="images/user.png" height='25' width='25' /> </a>
</div>
<div class="md-modal md-effect-5" id="modal-8">
<div class="md-content">
<h2>Welcome <%=session.getAttribute("displayName")%></h2>
<div>
<p style="display: inline-block; width: 25%;">Last Login </p><p style="display: inline-block;width: 75%">: <%=session.getAttribute("lastLogin")%></p>
<p style="display: inline-block; width: 25%;">Display Name </p><p style="display: inline-block;width: 75%">: <%=session.getAttribute("displayName")%></p>
<p style="display: inline-block; width: 25%;">Email ID </p><p style="display: inline-block;width: 75%">: <span id="mail"><%=session.getAttribute("mail")%></span></p>
<div class="allButtons">
<button class="md-close">Close</button>
</div>
</div>
</div>
</div>
<div id="menuIcons">☰</div>
<div id="headerListIcons" style="display : none ; ">
</div>
var hrz ='<ul class="header-viwmenu">';
hrz += '<li id="home" onclick="homeclick();"'
+'title="Home" style="cursor: pointer"><img src="images/home.png"'
+'height="25" width="25" /> </li>'
+'<li id="user" title="User" style="cursor: pointer;" class="md-trigger" data-modal="modal-8">'
+'<img src="images/user.png" height="25" width="25"> </li>'
</ul>';
$('#headerListIcons').append(hrz);