How to separate nav bar from the rest of the page

user_16217559 0
Viewed 651

I am new to web development and I am working on Django framework in VSCode. I have been trying to make a user interface for the web application which has a menu on the left side of the screen and a nav bar on top which says "home page" (the image is below). There I need all the texts and photos to be in the rest part of the page, and when I scroll down I want only that part to move, like in a real web application. But I don't know how to do it, do I have to use JavaScript for that or can I just do it within HTML/CSS?

As you can see in the picture the paragraph covers the nav bar.

Thank you!

css django web-applications html
3 Answers
user_164344600

You must use a base_generic_page to contain all the aplication pages.

basic_generic_page has the nav_bar or side_bar

<html lang="en">
<head>
  {% block title %}<title>Local Library</title>{% endblock %}
</head>

<body>
  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
  {% block content %}<!-- default content text (typically empty) -->{% endblock %}
</body>
</html>

You can heritage the base in application pages and rewrite content block in this way :

{% extends "base_generic.html" %}

{% block content %}
<h1>Local Library Home</h1>
<p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
{% endblock %}

Source: https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Home_page

user_83273480

Much like the position:fixed You could also give position: sticky

Has the added benefit of occupying space

Depend really on how you want the page to flow

user_44249530
Related