Используйте один HTML-файл для навигации по всему сайту с помощью jQuery. ⇐ CSS

[Anonymous]

Я пытаюсь создать сайт на GitHub без статического шаблона/конструктора сайта. Я хочу поместить навигацию в отдельный файл, чтобы в случае внесения изменений мне не нужно было копировать их во все остальные html-файлы. Я получил jQuery для этого, НО он портит макет по сравнению с тем, когда я просто помещаю панель навигации в index.html, и я не могу понять, почему.
index.html

Код: Выделить всё

[*]
Soup's website






header

Column right
Column mid


footer


$(function(){
$("#nav-placeholder").load("nav.html");
});

nav.html

Код: Выделить всё

☰ 

[list]
[url=/index.html]Home[/url]
[*][url=/projects/index.html]Projects[/url]
[*][url=/template.html]template[/url]
[/list]

customscript.js

Код: Выделить всё

// Function to toggle the dropdown menu on mobile
function toggleMenu() {
const menu = document.querySelector('.menu');
menu.classList.toggle('show');
}

styles.css

Код: Выделить всё

/* default css */
body {
font-family: Arial, sans-serif;
font-size: 20px;
background-color: #b90000;
display:grid;
min-height: 100vh; /* always fill fiewport */
grid-template-rows: auto 1fr auto;
padding: 0;
margin: 0;
box-sizing: border-box; /* this probably makes it harder but will be a pain to change */
}

.header {
background-color: #f1f1f1;
margin-top: 65px; /* to accomodate navbar */
padding: 3px; /* to visually balance navbar shadow */
text-align: center;
}

.footer {
background-color: #f1f1f1;
position: relative;
bottom: 0;
text-align: center;
}

/*Navbar*//*#region*/
.navbar {
position: fixed; /* to viewport, need to add margin-top to header to accomodate */
top: 0;
left: 0;
width: 100%;
min-height:65px; /* needs to accomodate mobile dropdown */
background-color: #091c38;
box-shadow: 0px 2px 2px 1px rgb(16, 191, 214); /* x y blur spread */
display: flex;
justify-content: start;
z-index: 1000; /*display order*/
}

/* Menu that will be put in navbar */
.menu {
list-style-type: none; /* no list bullet points */
margin: 0;
padding: 10px;
display: flex;
justify-content: center;
}

/*menu list items*/
.menu li {
padding: 10px 20px;
}

/*menu links/text*/
.menu a {
font-size: 20px;
color: white;
text-decoration: none; /* no link underlines */
}

/*menu links/text hover*/
.menu a:hover {
color: #30fcfc;
outline: rgb(16, 191, 214) solid 5px;
outline-offset: 5px;
border-radius: 2%;
}

/* Hamburger dropdown Icon */
.hamburger {
display: none; /* Hide the hamburger icon by default */
cursor: pointer; /* change pointer when hovering */
font-size: 43px;
color: rgb(255, 255, 255);
top: 0;
left: 12px;
position: fixed; /* DO NOT MESS WITH THE BORGER IT WILL BORK THE ENTIRE NAV BAR */
z-index: 1001;  /* Make sure the hamburger stays on top of other content */
}
/*#endregion*/

/*content columns*//*#region*/

.column {
float: right;
}

/* Left and right column */
.column.side {
width: 25%;
}

.column.middle {
width: 75%;
}

/* Clear floats after the columns dunno if this does anything
.row:after {
content: "";
display: table;
clear: both;
}*/
/*#endregion*/

/* Mobile-specific changes *//*#region*/
@media (max-width: 600px) {

/* Hide the menu by default on mobile and switch direction for dropdown*/
.menu {
display: none;
flex-direction: column;
width: 100%;
}

/* Show the hamburger icon on small screens */
.hamburger {
display:block;
}

/* Show menu dropdown when the "show" class is added by script*/
.menu.show {
display: flex;
}

/* mobile menu list items settings*/
.menu li {
padding-left: 0px;
width: 100%; /* Make menu items take full width */
text-align: center; /* Center the text */
}

/* make content colums full width so they stack instead */
.column.side, .column.middle {
width: 100%;
}
}

/*#endregion*/

Вместо того, чтобы класс строки (столбцы контента) размещался прямо под заголовком, они размещаются внизу страницы. В основном я пытался сделать это разными методами, а не возился с CSS

Подробнее здесь: https://stackoverflow.com/questions/793 ... ing-jquery