Css only applying on the header only and not on the footer - javascript

I'm trying to make a blog website using ejs, but i'm noticing that the css styling is only applying to the header and the footer is getting excluded, I have saved my styles.css in a public folder and i have also saved my header and footer in partials folder and my home.ejs is saved in a separate folder called views(btw partials is a sub folder inside views)
This is my main file:
<%- include ("partials/header") -%>
<h1>Home</h1>
<p><%=startingContent%></p>
<%- include ("partials/footer") -%>
This is my header file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Daily Journal</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/public/css/styles.css">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<p class="navbar-brand">DAILY JOURNAL</p>
</div>
<ul class="nav navbar-nav navbar-right">
<!-- 6 -->
<li id="home">HOME</li>
<li id="about">ABOUT US</li>
<li id="contact">CONTACT US</li>
</ul>
</div>
</nav>
<body>
<div class="container">
This is my footer file:
</div>
<div class="footer-padding"></div>
<div class="footer">
<p>Made with ❤️ by The App Brewery</p>
</div>
</div>
</body>
</html>
styles.css:
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
.footer-padding {
padding-bottom: 60px;
}
.footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 60px;
background-color: #1abc9c;
}
.footer p {
margin-top: 25px;
font-size: 12px;
color: #fff;
}

Related

How can I re-use the same navigation bar on many responsive pages?

I wanna use the same navbar and footer across multiple pages, using the JQuery, as we can see here. However, I want a responsive navbar (see the hamburger menu at the corner). So, to do that, I had to load these tags from files. Unfortunately, the script doesn't work anymore. How can I fix it?
[EDIT] Everything works fine by replacing <div id="nav-placeholder"></div> with the content of nav.html, but I would like to keep the code distributed. The console returns the following error:
Uncaught TypeError: toggleButton is null
<anonymous> file:///home/myProject/script.js:3
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dummy website</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div id="nav-placeholder"></div>
</header>
<main>
<p>home content</p>
</main>
<footer>
<div id="footer-placeholder"></div>
</footer>
<script src="script.js"></script>
</body>
</html>
nav.html
<p>logo</p>
<div class="menu" id="toggleButton">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
<nav class="nav-links" id="nav-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
footer.html
<p>footer content</p>
style.css
*{
box-sizing: border-box;
padding: 0;
margin: 0;
color: white;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: green;
}
.nav-links {
list-style: none;
}
.nav-links li {
display: inline-block;
text-align: center;
padding-right: 5px;
}
.menu {
display: none;
cursor: pointer;
}
.menu-line {
background-color: white;
width: 21px;
height: 2px;
margin-top: 5px;
}
main {
height: 200px;
}
main p{
color: black;
}
footer {
background-color: red;
}
#media all and (max-width: 480px){
.menu {
display: block;
}
.nav-links {
display: none;
width: 100%;
}
.active {
display: flex;
}
.nav-links ul{
justify-content: center;
width: 100%;
}
.nav-links li {
display: block;
border-top: 1px solid white;
padding: 5px 0 5px 0;
}
}
script.js
const toggleButton = document.getElementById('toggleButton');
const navList = document.getElementById('nav-list');
toggleButton.addEventListener('click', () => {
navList.classList.toggle('active');
});
$(function(){
$("#nav-placeholder").load("nav.html");
$("#footer-placeholder").load("footer.html");
});

Why does my Hamburger menu didn't work on other page

currently i'm working on my portfolio website, i've created hamburger menu using Javascript and it works on my homepage, but when i created another page, i copied everything from <header>, but the humburger menu didn't work. I am sure that i already change the path of the file. Also i'm using sass. Is there anything i missed?
HomePage Header HTML
<!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="shortcut icon" href="../images/logo-yellow.png" type="image/x-icon">
<link href="/../fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="../css/style.css">
<title>igeegi</title>
</head>
<body>
<header>
<nav>
<img src="./images/main-logo.png" alt="igeegi">
<div class="openMenu">
<i class="fa fa-bars"></i>
</div>
<ul class="mainMenu">
<li>Work</li>
<li>Résumé</li>
<li>About</li>
<li>Contact</li>
<div class="closeMenu">
<i class="fa fa-times"></i>
</div>
</ul>
</nav>
</header>
<script src="./app/app.js"></script>
</body>
</html>
Header style
header {
width: 100vw;
height: 80px;
background-color: white;
box-shadow: 0px 1px 5px rgba(51, 51, 51, 0.15);
position: fixed;
z-index:10000;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 20px;
margin-right: 20px;
.mainMenu {
display:flex;
}
}
nav .mainMenu li a {
display: inline-block;
color: $color-Dark;
padding: 30px;
font-size: 1.25rem;
font-weight: 400;
}
nav .mainMenu li a:hover {
color: #616161
}
nav .openMenu {
font-size: 30px;
color: $color-Dark;
margin: 10px;
display: none;
cursor: pointer;
}
nav .mainMenu .closeMenu, i {
font-size: 30px;
display: none;
cursor: pointer;
}
#media(max-width: 768px){
nav .mainMenu {
height: 100vh;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10;
flex-direction: column;
justify-content: center;
align-items: center;
background: $color-Yellow;
transition: top 1s ease;
display: none;
}
nav .mainMenu .closeMenu {
display: block;
position: absolute;
top: 20px;
right: 20px;
}
nav .openMenu {
display: block;
}
}
Hamburger menu Javascirpt
const mainMenu = document.querySelector('.mainMenu');
const closeMenu = document.querySelector('.closeMenu');
const openMenu = document.querySelector('.openMenu');
openMenu.addEventListener('click',show);
closeMenu.addEventListener('click',close);
function show(){
mainMenu.style.display = 'flex';
mainMenu.style.top = '0';
}
function close(){
mainMenu.style.top = '-120%';
}
Sub Page Header HTML
<!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="shortcut icon" href="../images/logo-yellow.png" type="image/x-icon">
<link href="/../fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="../css/style.css">
<title>works</title>
</head>
<body>
<header>
<nav>
<img src="../images/main-logo.png" alt="igeegi">
<div class="openMenu">
<i class="fa fa-bars"></i>
</div>
<ul class="mainMenu">
<li>Work</li>
<li>Résumé</li>
<li>About</li>
<li>Contact</li>
<div class="closeMenu">
<i class="fa fa-times"></i>
</div>
</ul>
</nav>
</header>
<script src="../app/app.js"></script>
</body>
</html>

Why does I can't add background image even I use static

I tried add a backgound image for my django web site and it didn't work at all.I use this answer from stackoverflow as well stackoverflow question link.but it didn't work.and also I migrate changes to database.I try to add background image as in css method background-image: url("images/background.png"); .and it didn't work either.If you know way to fix this or know another method to do this please kindly lt me know that
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Dinindu Theekshana</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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>
<td class="tdStyle">
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 17px;
}
.tdStyle{
background-image:url('{{ STATIC_URL }}images/sample.JPG');
background-repeat:no-repeat;
background-size:100%;
}
.shadow{
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
}
.btn-danger {
color: #fff;
background-color: #f00000;
border-color: #dc281e;
}
.masthead {
background:#3398E1;
height: auto;
padding-bottom: 15px;
box-shadow: 0 16px 48px #E3E7EB;
padding-top: 10px;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar {
overflow: hidden;
background-color: #333;
color: #333;
z-index: 9999999;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #294bc5;
color: white;
}
.content {
padding: 16px;
padding-top: 50px;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
</style>
<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
<div id="navbar">
<a class="active" href="{% url 'home' %}">Home</a>
News
Contact
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</nav>
{% block content %}
<!-- Content Goes here -->
{% endblock content %}
<!-- Footer -->
<footer class="py-3 bg-grey">
<p class="m-0 text-dark text-center ">Copyright © Dinindu Theekshana</p>
</footer>
</body>
</html>
In Django you add the URLs when you render the page. So for your links in your navbar it would look like this:
<a class="active" href="{% url 'home' %}">Home</a>
News
Contact
you will then need to write views for these pages and add them to your urls.py.
I found a way to do it first you have to go your setting.py file and add this code STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'templates').replace('\\','/'), ] After that open your base.html file and try this.hope it works.If you need more info go with this article
`{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Dinindu Theekshana</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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>
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 17px;
background-image: url("{% static "images/sun-pattern.png" %}");
}
.shadow{
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
}
.btn-danger {
color: #fff;
background-color: #f00000;
border-color: #dc281e;
}
.masthead {
background:#3398E1;
height: auto;
padding-bottom: 15px;
box-shadow: 0 16px 48px #E3E7EB;
padding-top: 10px;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar {
overflow: hidden;
background-color: #333;
color: #333;
z-index: 9999999;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #294bc5;
color: white;
}
.content {
padding: 16px;
padding-top: 50px;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
</style>
<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
<div id="navbar">
<a class="active" href="{% url 'home' %}">Home</a>
News
Contact
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</nav>
{% block content %}
<!-- Content Goes here -->
{% endblock content %}
<!-- Footer -->
<footer class="py-3 bg-grey">
<p class="m-0 text-dark text-center ">Copyright © Dinindu Theekshana</p>
</footer>
</body>
</html>
`

E.js Template: Unexpected token 'else'

I'm currently making a quick throw together website with e.js & Express.
However, upon learning to use tags I'm having some issues with using an if-else statement within e.js tags.
I'm my if statement works just fine, however when I add an else statement is when problems arise.
(Just FYI this code takes place within a partial)
Full file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="images/CaffLogWhite.png">
</head>
<header>
<nav>
<div class="nav-wrapper">
<a href="/">
<img class="nav-logo" src="images/CaffLogBlack.png" alt="CaffeinatedLogo" style="width:95px;height:95px;">
<t style="font-size: 36px">
<b>Caffeinated</b>
</t>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Terms of Service</li>
<li>FAQ</li>
<% if (user) { %>
<a href="/auth">
<button class="btn">
<span>Login with Discord</span>
</button>
</a>
<% } %>
<% else { %>
<% } %>
</ul>
</div>
<hr>
</nav>
</header>
<style>
nav t {
float: left;
position: relative;
color: #323232;
font-family: 'Quicksand', sans-serif;
margin-top: 20px;
font-family: 'Oleo Script Swash Caps', cursive;
}
nav {
position: fixed;
width: 100%;
text-decoration: none;
display: inline-block;
font-size: 28px;
}
nav ul {
display: table;
margin: 0 auto;
width: 60%;
text-decoration: none;
list-style-type: none;
color: #323232;
overflow: auto;
height: 20px;
}
nav ul li a {
text-decoration: none;
font-family: 'Quicksand', sans-serif;
}
.nav-logo {
float: left;
}
nav ul li {
color: #323232;
display: inline-block;
margin-right: 40px;
margin-top: 28px;
list-style-type: none;
font-size: 24px;
}
nav ul button {
display: inline-block;
float: right;
background: #7289DA;
color: white;
text-decoration: none;
list-style-type: none;
font-family: 'Quicksand', sans-serif;
font-size: 18px;
width:103px;
height:57px;
border-radius: 8px;
margin-right: -142px;
}
nav ul button:hover {
background: #3857c7;
}
</style>
</html>
The full error I get is the following:
E:\dev\CaffeinatedWebsite\views\profile.ejs:10 8| </title> 9| <link rel='stylesheet' href='/stylesheets/style.css' /> >> 10| <%- include('./partials/header.ejs', { user } ) %> 11| </head> 12| 13| <div class="welcome-message-caff"> Unexpected token 'else' in E:\dev\CaffeinatedWebsite\views\partials\header.ejs while compiling ejs If the above error is not helpful, you may want to try EJS-Lint: https://github.com/RyanZim/EJS-Lint Or, if you meant to create an async function, pass async: true as an option.
If anybody could provide me any clarity on how to fix this issue, that would be great!
Thanks in advance.
This should work for you. The ending "if" bracket and the "else" statement should be on the same line.
<div class="nav-wrapper">
<a href="/">
<img class="nav-logo" src="images/CaffLogBlack.png" alt="CaffeinatedLogo" style="width:95px;height:95px;">
<t style="font-size: 36px">
<b>Caffeinated</b>
</t>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Terms of Service</li>
<li>FAQ</li>
<% if (user) { %>
<a href="/auth">
<button class="btn">
<span>Login with Discord</span>
</button>
</a>
<% }else{ %>
<% } %>
</ul>
</div>

Overlay when click on menu (and remove border)

my name is Daniel and im working on my portfolio website. I want an overlay when i click on my hamburger menu so that everything becomes darker and the focus lays on the menu. And i want it to go away when you click on the menu again, or click on one of the menu items or click on the overlay self. (only for my mobile version)
Also i have weird border-line when i open my hamburger menu on mobile and i don't know how to remove it
Link to my website so far: http://20162.hosts.ma-cloud.nl/portfoliowebsite/
(the latest version isn't online yet)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="author" content="Daniel Gotz">
<title>Daniel Gotz | Porfolio </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="dist/hamburgers.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo+2:600,900|Roboto" rel="stylesheet">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<section id="intro" class="intro-section">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header page-scroll">
<button class="hamburger hamburger--spin navbar-toggle visible-xs" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class=" hamburger-box">
<span class=" hamburger-inner"></span> </span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav right">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#intro">Intro</a> </li>
<li> <a class="page-scroll" href="#mijnwerk">Mijn werk</a> </li>
<li> <a class="page-scroll" href="#overdaniel">Over Daniel</a> </li>
<li> <a class="page-scroll" href="#contact">Contact</a> </li>
</ul>
</div>
</nav>
<div class="overlay" id="overlay"></div>
<div class="title">
<h1> Every mountain top is within reach if you just keep climbing</h1> </div>
<div class="berg">
<img src="berg.svg">
</div>
</section>
<section id="mijnwerk" class="about-section"> </section>
<section id="overdaniel" class="services-section"> </section>
<section id="contact" class="contact-section"> </section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/hamburgers.js"></script>
</body>
</html>
CSS:
.overflow {
overflow-x: hidden;
position: relative;
}
.home {
height: 100vh;
width: 100vw;
background-color: #2ecc71;
}
.mijnwerk {
height: 100vh;
width: 100vw;
background-color: #27ae60;
}
.navbar-default {
background: none;
border-color: transparent;
z-index: 3;
}
.right {
float: right;
text-align: right;
}
.navbar-default .navbar-nav>li>a {
font-family: 'Roboto', sans-serif;
color: #ecf0f1;
font-size: 14px;
}
.nav>li>a {
padding: 15px 25px;
border-style: none;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #ecf0f1;
border-style: none;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background: none
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-style: none;
}
h1 {
font-family: 'Exo 2' , sans-serif;
font-weight: 900;
font-size: 37px;
line-height: 60px;
}
.title {
font-family: 'Exo 2', sans-serif;
text-align: center;
width: 350px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.berg {
position: absolute;
width: 100%;
bottom: 0;
margin: 0 0 -2px 0;
}
.overlay {
position: fixed;
top: 0;
z-index: 2;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: #333;
}
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
background: #2ecc71;
color: white;
text-align: center;
}
.about-section {
height: 100%;
background: #27ae60;
}
.services-section {
height: 100%;
background: #3498db;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
JS:
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
// Do something else, like open/close menu
});
I hope someone can help me out with these problems! :)
With this config you just pass background to the menu, and the close button will not be included and remove the border.
.navbar-collapse navbar-ex1-collapse collapse in {
background: rgba(27, 27, 62, 0.5);
}
.navbar-default {
background: none;
border: none;
z-index: 3;
}

Categories

Resources