Amneet Amneet -3 years ago 120
HTML Question

Resizing window Issues

I am stuck with one of my school project as I am having trouble solving it.
Whenever I resize my window the menus get collapsed. I am sharing screenshot and my script please help me out.

This is during maximize window view:

enter image description here

This happen when I minimize all my menu options goes down when I resize window:

enter image description here

I am sharing with my script of this page but it is happening on all the pages please check the script below:



#topnav {
height:50px;
width:100%;
position: relative;
display:inline-block;
font-size: 14pt;
background-color:black;
font-family:'Times New Roman', Times, serif;
overflow: hidden;


}
#menu1 {
margin-left: 120px;
margin-top: 10px;
display: block;
float: left;
color:Highlight;
overflow: hidden;
}
#menu1 a {
color: Highlight;
text-decoration: none;
}


#menu2 {
margin-top: 10px;
margin-right: 120px;
display: block;
float:right;
color: white;
position:relative;

}


#menu2 a {
color: white;
text-decoration: none;
}
#menu2 a:hover {
color: Highlight;
}
.main {
min-height: 850px;
height:auto;
width: 100%;
margin: 0 auto -142px;
display:inline-block;
position:relative;
}
.clear {
height: 100px;
}

.footer {
height: 50px;
width: 100%;
color: white;
text-align: left;
display: block;
bottom: -1px !important;
left: 0;
background-color: black;
z-index: -1;
position:page;
}
.footer a {
color: cornflowerblue;
text-decoration: none;
}

#wrapper{
margin-left:auto;
margin-right:auto;
width:100%;
}

<body style="height: 631px">


<div id="wrapper">

<div id="topnav" >
<span id="menu1">
<a href="Login.aspx" runat ="server">APPLY FOR AUDIENCE</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="~/Groups.aspx" runat="server">APPLY FOR GROUPS</a>
</span>
<span id="menu2">
<a href="Home.aspx" runat="server">HOME</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="~/About Us.aspx" runat="server">ABOUT US</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="~/Contact.aspx" runat="server">CONTACT</a></span>
</div>




<div class="main">
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="clear">
</div>
<br /><br />
<div class = "footer">
<a href="Privacy.aspx">Privacy Policy</a> <a href="Terms.aspx">Terms of Use</a> <br />
Copyright @ 2017 All Rights Reserved.


</div >

</div>
</body>




Answer Source

set the topnav height to auto or whatever suits you. Setting it at 50px is the issue.

#topnav {
    height:auto;
  width:100%;
       position: relative;
    display:inline-block;
    font-size: 14pt;
    background-color:black;
     font-family:'Times New Roman', Times, serif;
     overflow: hidden;


}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download