If I were to create a web page, I would include a main menu that always remains on the screen, similar to this design:
https://i.sstatic.net/I57Xk.png
There are no issues with screen resolution exceeding 1300px, as seen in the image above.
However, when attempting to resize the browser for different device resolutions, I noticed that the navigation bar does not adjust accordingly, as shown in the image below:
https://i.sstatic.net/kleLq.png
Below is the code snippet of my current web page:
<style>
.container{
background-color: red;
max-width: 1300px;
/* center align main div */
margin:0 auto;
width: 100%;
height: 5500px;
}
.logo{
background-color: #00387C;
width:220px;
height: 200px;
z-index: 2;
position: fixed;
padding-left: 20px;
}
nav.mainmenu{
width: 100%;
height: 160px;
position: fixed;
top:0;
padding: 0;
z-index: 1;
max-width: 1300px;
margin:0 auto;
background-color: #ffedb3;
border-bottom-color: silver;
border-bottom-style: ridge;
border-bottom-width: thin;
box-shadow: 0px 5px 5px rgba(0,0,0,.1);
padding-right: 1px;
margin-right: 1px;
}
</style>
<div class="container">
<div class="logo">
</div>
<nav class="mainmenu">
</nav>
</div>