This question already has an answer here:
How can I reuse HTML code across several HTML files
(1 answer)
Closed 28 days ago.
I have header HTML page and I want to implement this header to all other HTML pages. Can I do it using HTML or JS? without PHP.
I am a beginner in web programming and I made a simple frontend website using HTML and CSS.
header.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<title>White Aim</title>
</head>
<body>
<div id="header">
<nav class="navbar navbar-expand-lg" >
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img class="logo-style" src="assests/logo.svg" alt="White Aim">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mb-2 mb-lg-0 navbar-text">
<li class="nav-item mx-2">
<a class="nav-link active" aria-current="page" href="index.html">الصفحة الرئيسية</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="about-us.html">نبذة عنا</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="our-experience.html">خبرتنا</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="contact-us.html">تواصل معنا</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="profile.html">الملف التعريفي</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
You could save the header code inside a global javascript variable and then render it with insertAdjacentHTML()
JS:
const header = `
<div id="header">
<nav class="navbar navbar-expand-lg" >
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img class="logo-style" src="assests/logo.svg" alt="White Aim">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mb-2 mb-lg-0 navbar-text">
<li class="nav-item mx-2">
<a class="nav-link active" aria-current="page" href="index.html">الصفحة الرئيسية</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="about-us.html">نبذة عنا</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="our-experience.html">خبرتنا</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="contact-us.html">تواصل معنا</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="profile.html">الملف التعريفي</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
`;
document.addEventListener('DOMContentLoaded', (event) => {
const homepage = document.querySelector('.homepage');
homepage.insertAdjacentHTML('afterbegin', header);
});
<body class="homepage">
<!-- CONTENT -->
<script src="script.js"></script>
</body>
This way you could render your header variable in all the html files in which you include the script.js.
Keep in mind that this is probably not a best practice, there are better ways to create HTML components, however this will do what you need using just vanilla JS without using external libraries or PHP.
The better way would be to use a php include. This lets the server do the include which saves a round trip.
<?php include 'footer.php';?>
It is also possible to import/include via Javascript on page load per what you asked (you asked for a non php solution). However it will cause another round trip to the server and unnecessarily slow your website down. I don't recommend it, but if you do want to go that route you can look at the Javascript script below based on https://www.w3schools.com/howto/howto_html_include.asp:
html:
<div w3-include-html="content.html"></div>
js:
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.querySelectorAll("[w3-include-html]");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
At the bottom of the page:
<script>
includeHTML();
</script>
You could also opt for a build step (preprocessing) at author time using a templating language. This makes things a bit more complex for a beginner, it is somewhat similar to writing php. But in contrast to php the html is assembled before the website is requested by users, al work is done before it is put online.
Some preprocessing languages are pug, ERB, haml, twig, ... here's a feature overview: https://css-tricks.com/comparing-html-preprocessor-features/
I don't use it but I know Adobe Dreamweaver has also a feature where you can include html snippets. It then builds the html with the included snippets which you can put online. But I don't recommend Dreamweaver.
Related
While working through a web dev course, I got to a portion on learning BootStrap. I have a Navbar added to my page, directly copied from the example given here: https://getbootstrap.com/docs/4.0/components/navbar/
While all of the Navbar components are loading in, and all of the buttons are functioning, the Navbar will not expand. I am running a Node server on my local machine, and requesting an HTML page which correctly renders, except for the menu not expanding.
Here is my HTML page with the Navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%= typeof name !== "undefined" ? name : "Error" %></title>
<meta name="description" content="Boilerplate HTML Page">
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Express Demo</a>
<button onclick="" class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/rand" >Random</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/r/chickens">Chickens</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/r/soccer">Soccer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/r/mightyharvest">MightyHarvest</a>
</li>
</ul>
</div>
</div>
</nav>
<h1>Browsing r/<%= typeof name !== "undefined" ? name : "Error"%></h1>
<h2><%= description %></h2>
<p>Sub count: <%= subscribers %></p>
<hr>
<% for(let post of posts) { %>
<article>
<p><%=post.title%> - <b><%= post.author %></b></p>
<% if (post.img) { %>
<img src="<%= post.img %>" alt="">
<% } %>
</article>
<% } %>
</body>
</html>
I have tried the most up to date links offering the Bootstrap and jQuery versions, but the problem persists. As mentioned, the code for the Navbar are identical to the example code, save for changing the button text and href.
I copied your source and omitted the jquery. I used CDNs for the Bootstrap CSS and JS and the menu expands (assuming the window is small enough).
Try swapping
<script src="/js/bootstrap.min.js"></script>
for
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
Might have to use a CDN for the CSS as well.
I am having an issue implementing a tab with a drop-down nav as demonstrated in the Bootswatch examples. I should note that this does not work on the demo page either for me, but the way it seems to be written implies that it should work.
My end goal is that on one of my tabs I have a drop-down and populate the tab body by the selection made. The other tabs work as expected, but the drop-down doesn't display the expected div contents.
Below is basically the demo code from the Bootswatch page, with some of the fluff pulled out to simplify it.
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cerulean/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/">Title</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Settings <span class="sr-only">(current)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</span></a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main" class="flex-shrink-0">
<div class="container" id="settingsapp">
<div class="page-header" id="banner">
<h1>Settings</h1>
</div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" style="">
<a class="dropdown-item" data-toggle="tab" href="#dropdown1">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#dropdown2">Another action</a>
</div>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade show active" id="home">
<p>Home tab content.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Profile tab content.</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>Dropdown 1 content.</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>Dropdown 2 content.</p>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
My ability to work with Bootstrap and Bootswatch is limited to finding something which does what I need and then editing it to look as I want, so this is a little out of my depth. I am learning, however, each time.
With Bootstrap there is usually Jquery.js and bootstrap.js <script> tags included that takes care of the user interactions . I think you might be missing those .
<head>
<meta charset="utf-8">
<title>Bootswatch: Cerulean</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../4/cerulean/bootstrap.css" media="screen">
<link rel="stylesheet" href="../_assets/css/custom.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
A collaborator helped me figure this out. I was missing the "data-toggle" argument within the dropdown-menu div:
<div class="dropdown-menu" style="">
<a class="dropdown-item" href="#dropdown1">Action</a>
<a class="dropdown-item" href="#dropdown2">Another action</a>
</div>
becomes:
<div class="dropdown-menu" style="">
<a class="dropdown-item" data-toggle="tab" href="#dropdown1">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#dropdown2">Another action</a>
</div>
Now I guess I'll see how I can submit a PR over on Bootswatch since this came off their examples.
I have edited the question above to include the corrected HTML.
I am using jQuery to add active to my menu. It works on the index page, but I can't get it to work on the other pages right now. I've tried changing around the web address to fit the exact location.pathname but that doesn't seem to work, and I tried dropping the \ prior to it as well. Any help would be appreciated.
my markup:
<nav class="sticky-top navbar navbar-expand-lg navbar-light bg-myColor">
<a class="navbar-brand" href="#">
<img src="image/VC-Logo.png" alt="Visionary Creatives logo" height="150px;" />
</a>
<button class="navbar-toggler navbar-brand" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navToggle">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/coming-soon.php">Web Design</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/coming-soon.php">Graphic Design</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/coming-soon.php">SEO & Marketing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/coming-soon.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/coming-soon.php">Contact Us</a>
</li>
</ul>
</div>
</nav>
and my jQuery:
$(document).ready(function() {
$('.navbar-nav .nav-item a[href="' + this.location.pathname +
'"]').parent().addClass('active');
});
and my website if this helps as well:
http://www.visionary-creatives.com
As I go through your site's view-source page. I see that in remaining pages except for index page these scripts are missing at the end of the page source -
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type ="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/jQuery.js"></script>
Please open your browser console and you will see some error over there. So, please add above scripts so that your code will run to every page
Your code is perfect and running as well.
So I spent a few hours trying to solve this myself, with the help of other people's posts but had no luck. Allow me to explain my issues first.
My website, www.discoverbugs.org, has a bootstrap navigation menu. It looks fine on the desktop, but on mobile, the drop-down menu disappears when you click on it. What's causing it and how can I fix it?
The second issue is the header image. On mobile, it expands across the entire width of the phone. I'm having this issue with a lot of images on the site. I tried adding max and min widths and it just won't work for me. Can someone please help me edit this? It looks ridiculous.
CSS:
#media screen and (max-width: 420px) { header {
padding: 65px 0 0px; } }
Index.php
<header class="bg-primary text-white">
<div class="container text-center">
<img src="img/header-v6.jpg">
</div>
</header>
Header.php (Navigation menu)
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.php">Discover Bugs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="testimonials.php">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="collections.php">Collections</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="form.php">Costs & Booking</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="faq.php">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Javascript coding I have:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
The reason is simple: Bootstrap 3 JavaScript is not designed to work with Bootstrap 4.
In other words, for Bootstrap 4 css you also need Bootstrap 4 JavaScript (as well as jQuery 3.2.1 and popper.js).
To fix the header image issue add the img-fluid class to the image like so:
<img class="img-fluid" src="img/header-v6.jpg">
This will make the image responsive.
To fix the first issue, use the css and JavaScript files from the following template (and load them in that order):
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.php">Discover Bugs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="testimonials.php">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="collections.php">Collections</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="form.php">Costs & Booking</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="faq.php">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5 pt-5">
<div class="row">
<div class="col">
<h1>Hello, world!</h1>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to add twitter-bootstrap to a django project. I've got a html file called base.html which acts as a wrapper file for other html code which is placed inside of it before it gets send back in the HttpResponse.
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="{% static '/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src = "{% static '/js/bootstrap.min.js' %}"></script>
<title>TITLE</title>
</head>
<body>
{% autoescape off %}{{ content }}{% endautoescape %}
</body>
</html>
This file is the only file which will ever get send back to the visitor of the webside so I would imagine that if I add the files bootstrap needs inside base.html that it would work also on the code in content. Infact, all the css stuff seems to work fine but whenever I try to open a dropdown menu in the navbar of my site, it does not show up.
This is the source code of the page that has difficulties:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src = "/static/js/bootstrap.min.js"></script>
<title>TITLE</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="?p=index">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="?p=channel">testchannel</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Username
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="?p=Channel">Visit Channel</a>
<a class="dropdown-item disabled" href="#">Statistics</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="#">Settings</a>
</div>
</li>
</ul>
</div>
</nav>
<h1>A TEST HEADER</h1>
</body>
</html>
Clicking on the "/static/css/bootstrap.min.css" or "/static/js/bootstrap.min.js" both redirects me to a file (no 404 error pops up).
what could be the problem causing the navbar to not work? How can I fix it?
EDIT:
As requested the settings.py part that handles static:
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# some more stuff here like INSTALLED_APPS and TEMPLATES
STATICFILES_DIRS = (
'/home/<name>/Desktop/django/myproject/Bootstrap',
)
STATIC_URL = '/static/'
Please make sure you have included the correct static path in the settings.py file.
I have used something like the following in one of my project and it works fine.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)