Guidelines on isolating the navigation bar from the rest of the webpage

Question

Guidelines on isolating the navigation bar from the rest of the webpage

Being new to web development, I am currently working with Django framework in VSCode. My goal is to create a user interface for a web application that features a left side menu and a top navigation bar that says "home page" (see image below). I want all text and images to be displayed in the remaining part of the page, and when scrolling down, only that particular section should move, just like in a real web application. However, I am unsure if I should use JavaScript for this functionality or if I can achieve it using just HTML/CSS.

One issue I have encountered is that the paragraph seems to be covering the navigation bar, as seen in the picture.

Any advice or guidance would be greatly appreciated. Thank you!

html css django web-applications

Answer 1

Answer №1

To achieve the desired effect, make use of the CSS property position: fixed. Here's an example:

<div class="navbar" style="position: fixed;">

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

Answer 2

To achieve the desired effect, make use of the CSS property position: fixed. Here's an example:

<div class="navbar" style="position: fixed;">

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

Answer 3

Answer №2

To ensure consistency, it is recommended to use a base_generic_page as the container for all application pages.

The basic_generic_page includes 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 inherit the base in application pages and customize the content block like this:

{% 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

Answer 4

To ensure consistency, it is recommended to use a base_generic_page as the container for all application pages.

The basic_generic_page includes 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 inherit the base in application pages and customize the content block like this:

{% 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

Answer 5

Answer №3

Similar to the concept of using position:fixed, Consider also utilizing the position: sticky property

This feature provides the added advantage of taking up space

Ultimately, the choice depends on the desired layout and flow of the page

Answer 6

Similar to the concept of using position:fixed, Consider also utilizing the position: sticky property

This feature provides the added advantage of taking up space

Ultimately, the choice depends on the desired layout and flow of the page

Guidelines on isolating the navigation bar from the rest of the webpage

Answer №1

Answer №2

Answer №3

Similar questions

Loading event in HTML5 video element is in progress

Scroll on sidebar that overflows, rather than the page behind

individualized django models field for each user

Rotate the mat-select arrow when the dropdown opens (moving in both upward and downward directions)

Emphasize a specific line of text within a <div> with a highlighting effect

Issue with QuickSand Script not displaying properly on Internet Explorer 7

The left-floating elements are only partially functional

Exploring the capabilities of soup.find() for achieving partial matches

I seem to be having trouble with my JavaScript code when attempting to search for items within

I'm not sure where I went wrong in attempting to execute a Django query using AJAX

Steps to modify the background color of an IconButton upon clicking in Material UI

Guide on implementing automatic callbacks with AJAX

Adjust the alignment of text within the <select> tag to the right in Safari browser

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

Is there a different way to invoke PHP within JavaScript?

Tips for creating responsive images when using two images stacked on top of each other:

Preventing AngularJS from Ignoring HTML Elements

Measuring the height of a div element using Vuejs

Navigate to a precise section of the webpage, positioned at a specific distance from the top

What is the reasoning behind jQuery UI employing CSS classes as opposed to pseudo-classes?