diff --git a/main.css b/main.css index dcd4bca..a726a52 100644 --- a/main.css +++ b/main.css @@ -1,6 +1,5 @@ html, body { - margin: 0; overflow-x: hidden; } diff --git a/mainpage.css b/mainpage.css index 3c633bf..7a80f70 100644 --- a/mainpage.css +++ b/mainpage.css @@ -72,8 +72,3 @@ height: var(--image-height); /* height: 100vh; */ } - -.menuBar .menu { - margin: auto 1em; - cursor: pointer; -} diff --git a/menuchange.js b/menuchange.js index 1e0ec22..e1737d9 100644 --- a/menuchange.js +++ b/menuchange.js @@ -3,7 +3,7 @@ $(function () { var $nav = $(".menuBar"); $nav.toggleClass( "scrolled", - $(this).scrollTop() > $(".main-imagex").height() - $nav.height() * 2 - 10 + $(this).scrollTop() > $(".main-imagex").height() - $nav.height() * 2 - 30 ); }); }); diff --git a/navbar.js b/navbar.js new file mode 100644 index 0000000..18a7e19 --- /dev/null +++ b/navbar.js @@ -0,0 +1,15 @@ +// window.addEventListener("load", ); + +document.addEventListener("DOMContentLoaded", function () { + const menubar = `Home|Members|Projects`; + + const div = document.createElement("div"); + div.className = "menuBar standalone"; + div.innerHTML = menubar; + + document.body.prepend(div); +}); diff --git a/unbap.css b/unbap.css index 60a4d1f..cb5ebd2 100644 --- a/unbap.css +++ b/unbap.css @@ -1,22 +1,47 @@ +html, +body { + margin: 0; +} + .menuBar { background-color: rgba(255, 255, 255, 0.2); position: fixed; + width: 100%; + text-align: right; top: 0; - right: 0; font-family: "arial", sans-serif; font-size: 1.01rem; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.05rem; - padding-left: 100%; - padding-right: 2.5vh; - padding-top: 1.5vh; - padding-bottom: 1.5vh; - display: flex; + padding: 0.7em; + display: block; z-index: 1; transition: background-color 200ms linear; } -.menuBar.scrolled { +.menuBar .menu:last-child { + margin-right: 3em; +} + +.menuBar.scrolled, +.menuBar.standalone { background-color: rgba(0, 0, 0) !important; transition: background-color 200ms linear; } + +.menuBar.standalone { + top: 0; + position: sticky; + /* display: block; */ + text-align: right; + margin: 0; +} +.menuBar.standalone a { + text-decoration: none; + color: rgba(255, 255, 255, 0.8); +} + +.menuBar .menu { + margin: auto 1em; + cursor: pointer; +}