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.
Related
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.
This question already has answers here:
How to add hamburger menu in bootstrap
(3 answers)
Closed 2 months ago.
I tried placing the js cdn in top and it did not work. I was trying to make my navbar responsive and used toggler. The navbar became responsive but the toggler button is not working.
Here is my code, the hamburger menu is not working:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="NssavbarSupportedContent" 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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
</section>
</body>
</html>
For Bootstrap V5 it's data-bs-toggle not data-toggle, plus you needed a "#" to point the target to an ID not a class. Lastly you had a typo "NssavbarSupportedContent" should be "navbarSupportedContent".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
</section>
</body>
</html>
I've run into a small issue whilst using Bootstrap. Every time I expand my menu (burger icon) it doesn't collapse after I attempt to close it. Could you please let me know where I've gone wrong & what I could do to avoid this issue in the future, thank you.
<body>
<nav id="mainNavBar" class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">CANDY</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLinks"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<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="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TICKETS</a>
</li>
</ul>
</div>
</nav>`
</body>
emphasized text
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav id="mainNavBar" class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">CANDY</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLinks"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<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="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TICKETS</a>
</li>
</ul>
</div>
</nav>
`
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
I try it and works perfectly. Make sure you are using correct bootstrap version.
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"),
)