How not to make them collide in nav bar? - html

Question

enter image description here
body{
margin: 0;
height: 100%;
// background-color:black;
background-image: url("3.jpg");
background-repeat: no-repeat;
background-size: cover;
// background-position: center;
background-attachment: fixed;
cursor: url("cursor.png"), auto;
}
.header {
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
text-align:center;
width: 100%;
position: absolute;
background: transparent;
background: linear-gradient(rgba(195,162,94,.4), rgba(0,0,0,0.3));
overflow: hidden;
z-index: 1;
}
li {
display: inline-block;
// margin-left: 100px;
}
.logo img{
width: 135px;
height: auto;
position: absolute;
margin-top: 0px;
margin-left: 40px;
z-index: 2;
cursor: url("cursor.png"), auto;
}
li a{
width: 100px;
display: block;
// padding-left: 500px;
padding: 35px 15px;
font-size: 20px;
font-family: Sylfaen;
color: white;
text-align: center;
text-decoration: none;
cursor: url("cursor.png"), auto;
}
li a:hover{
color: rgba(96,49,18);
}
<div class="header">
<div class="logo">
<a href="#">
<img src="logo.gif">
</a>
</div>
<div class="navs">
<ul>
<li>Home</li>
<li>Game Info</li>
<li>Gameplay</li>
<li>Media</li>
</ul>
</div>
</div>
How not to make them collide in nav bar?
they collide when i zoom in..
I cant seem to understand how it works
and I cant seem to know what to do..
How not to make them collide when zooming in like there is a wall in there..
How not to make them collide in nav bar?
they collide when i zoom in..
I cant seem to understand how it works
and I cant seem to know what to do..
How not to make them collide when zooming in like there is a wall in there..

Answer 1

Add Padding to Your UL
Adding padding-left: 135px; to your ul which is the same width as your logo width. This will prevent the nav area content occupying the same space.
You could add a little more padding so that it does touch fully!
Make it Responsive
Ideally, you would want to make it responsive, so that when it reaches a certain width, the logo goes above the nav or whatever you feel looks best.
#media only screen and (max-width: 600px) {
.logo {
/*Your styles on small screen - example only*/
display:block
position:releative;
}
}
See Responsive Web Design - Media Queries
body{
margin: 0;
height: 100%;
// background-color:black;
background-image: url("3.jpg");
background-repeat: no-repeat;
background-size: cover;
// background-position: center;
background-attachment: fixed;
cursor: url("cursor.png"), auto;
}
.header {
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding-left: 135px;
text-align:center;
width: 100%;
position: absolute;
background: transparent;
background: linear-gradient(rgba(195,162,94,.4), rgba(0,0,0,0.3));
overflow: hidden;
z-index: 1;
}
li {
display: inline-block;
// margin-left: 100px;
}
.logo img{
width: 135px;
height: 135px;
height: auto;
position: absolute;
margin-top: 0px;
margin-left: 40px;
z-index: 2;
cursor: url("cursor.png"), auto;
}
li a{
width: 100px;
display: block;
// padding-left: 500px;
padding: 35px 15px;
font-size: 20px;
font-family: Sylfaen;
color: white;
text-align: center;
text-decoration: none;
cursor: url("cursor.png"), auto;
}
li a:hover{
color: rgba(96,49,18);
}
<div class="header">
<div class="logo">
<a href="#">
<img src="https://otherthings.files.wordpress.com/2016/02/emoji-books.jpg?w=135&h=135" width="135px" height="135px">
</a>
</div>
<div class="navs">
<ul>
<li>Home</li>
<li>Game Info</li>
<li>Gameplay</li>
<li>Media</li>
</ul>
</div>
</div>