Issue
Currently working on my first webpage with HTML, CSS, Django and maybe Javascript soon 🙂
My issue is that I’ve added some images into my main content to test all(Wanted to add a sticky nav) but the main content is somehow overlapping my NAV and i’m not able to click the links of the Nav itself anymore.
Inspector where we can see clearly the overlap.
HTML:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static '/css/design.css' %}" />
</head>
<body>
<!--NAVBAR-->
<div class="navbar">
<div class="navbar-title">
<a href="{% url 'photos:home' %}">site-name</a>
</div>
<div class="navbar-links">
<a href="{% url 'photos:home' %}">HOME</a>
<a href="{% url 'photos:pictures' %}">PICTURES</a>
<a href="{% url 'photos:album' %}">ALBUM</a>
</div>
</div>
<div class="main-content">
<img src="{% static '/img/1.jpg' %}">
<img src="{% static '/img/1.jpg' %}">
<img src="{% static '/img/1.jpg' %}">
<img src="{% static '/img/1.jpg' %}">
<img src="{% static '/img/1.jpg' %}">
</div>
{% block content %}{% endblock %}
</body>
</html>
CSS:
body {
background-color: #171717;
font-family: Helvetica;
}
/*------------------NAVBAR------------------*/
.navbar, a {
color: #FFF;
text-decoration: none;
font-size: large;
margin: 10px;
}
.navbar-title {
float: left;
text-align: center;
display: block;
position: relative;
padding-left: 50px;
padding-top: 25px;
font-style: italic;
}
.navbar-links {
float: right;
text-align: center;
display: block;
position: relative;
padding-right: 50px;
padding-top: 25px;
}
/*------------------MAIN-CONTENT----------------*/
.main-content {
padding-top: 100px;
position: relative;
}
Solution
in main-content style if you remove the position: relative;
your problem will be solved
Answered By – Mehdi
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0