How do I make a horrible design responsive - html

Question

So I have this navigation bar that is unresponsive. So far what I have learned is to use margin percentage values and flex attributes. However, I have a horrible time trying to apply these fixes to the navbar that I have buried in bad styling.
There isn't one exact thing with this navbar, but I can say that the right-hand links will not shrink with the screen or even stay inside the viewport. Note that at 767px width the collapse menu appears and that becomes a whole other set of issues.
And this might be a bit much, but if you could explain to me the errors that way I know what not to do. Thanks!
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
myFunction();
myFunction2();
};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove
"sticky"
when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
// Get the logo
var logo = document.getElementById("logo");
// Get the offset position of the logo
var logoSpin = logo.offsetTop;
// Add the logo-spin class to the navbar when you reach its scroll position. Remove
"logo-spin"
when you leave the scroll position
function myFunction2() {
if (window.pageYOffset >= logoSpin) {
logo.classList.add("logo-spin");
} else {
logo.classList.remove("logo-spin");
}
}
// All links will have a target:__blank for external page linking
// Read more: https://html.com/attributes/a-target/#ixzz6GMsDfQEr
// jQuery(document.links)
// .filter(function() {
// return this.hostname != window.location.hostname;
// })
// .attr("target", "_blank");
//OR Read more: https://html.com/attributes/a-target/#ixzz6GN6pd1Qt
function externalLinks() {
for (var c = document.getElementsByTagName("a"), a = 0; a < c.length; a++) {
var b = c[a];
b.getAttribute("href") &&
b.hostname !== location.hostname &&
(b.target = "_blank");
}
}
externalLinks();
html,
body {
background-color: #E3E3E3;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
/* font-size: 15px; */
}
/* h1 { font-size: 2.4rem;}
h2 { font-size: 2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; }
#media screen and (max-width:767px){
h1 { font-size: 3rem;}
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1rem; }
} */
/* HOME */
.section1 {
background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
}
.section1 .container {
background-color: rgb(0, 0, 0, 0.65);
min-height: -webkit-fill-available;
min-width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-btn {
background-color: transparent;
font-weight: 500;
border-color: #8e0000;
border-radius: 3px;
color: #8e0000;
margin-top: 35px;
font-size: 1.12em;
transform: translate(-50%, -50%);
position: absolute;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
/* hover styling required !important */
.home-btn:hover {
color: #8e0000 !important;
border-color: #8e0000;
font-size: 1.4em;
border-width: 3px;
font-weight: 600;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.intro {
color: white;
font-size: 2.74em;
text-shadow: .1px .8px 1px black;
}
.highlight {
color: #8e0000;
text-shadow: .1px .8px 1px black;
}
/* NAVIGATION */
#navbar,
.navbar {
display: flex;
min-width: 100%;
min-height: 80px;
}
#media screen and (max-width: 767px) {
#navbar {
min-height: 100px !important;
}
}
#navbar .container {
display: inline-flex;
}
.logo {
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.navbar-brand {
margin: 0%;
padding: 0% !important;
}
#navbar .nav-link {
float: right;
}
#media screen and (max-width: 767px) {
#navbar .nav-link {
padding-right: 50%;
}
}
#navbar .nav-link:focus {
color: #8e0000;
text-size-adjust: 1.4em;
}
.logo-wrapper {
color: white;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
display: inline-flex;
margin-left: 15%;
}
#navbar .logo,
.brand {
margin: 7%;
color: #f2f2f2;
}
.collapse {
margin-left: 20%;
font-size: .9rem;
}
#navbar a {
color: #f2f2f2;
text-align: center;
/* padding: 0px 20px; */
text-decoration: none;
vertical-align: top !important;
/* font-size: 20%; */
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
/* margin-right: 40px; */
}
.logo-spin {
-webkit-animation: spin 1s;
animation: spin 3s;
animation-iteration-count: 1;
}
.navbar-brand:hover {
-webkit-animation: spin 1s;
animation: spin 3s;
animation-iteration-count: 1;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spin {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-right: 40%;
height: inherit;
overflow: hidden;
}
#media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
.sticky {
position: fixed;
top: 0;
width: 100%;
margin-bottom: 60px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Information meta tags -->
<meta name="description" content="A portfolio page for Bernard Major">
<meta http-equiv="author" content="King Major">
<!--LOCAL-->
<!-- <link rel="stylesheet" type="text/css" href="assets/css/reset.css"> -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<!-- Bootstrap CSS HOSTED-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--LOCAL-->
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/icon.css">
<!-- FAVICON -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- FONTAWESOME -->
<script src="https://kit.fontawesome.com/3376f28ddc.js" crossorigin="anonymous">
</script>
<title>King Major</title>
</head>
<body>
<!-- HOME -->
<section id="home" class="section1">
<div class='container'>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12">
<p class='intro'>
Hello, my name is <span class="highlight animated fadeIn" style="animation-delay: 1s; animation-duration: 1.8s">Ben.</span>
<br>
<div class="intro animated fadeInLeft" style="animation-delay: 3s;
animation-duration: 2s">And I'm a full-stack web developer.</div>
<a href="#myanchor"><button type="button" class="home-btn btn btn-primary-
outline btn-xs animated fadeIn"
style="animation-delay: 5s; animation-duration: 2s">VIEW MY
WORK</button></a>
</p>
</div>
</div>
</div>
</section>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<!-- <div class="container"> -->
<div class="logo-wrapper nav-item">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's
Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s; animation-duration:
3s">Been There</span>
</div>
<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 focus">
<a class="nav-link" href="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor2">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor3">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor4">TESTIMONIALS
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://kingdomb.github.io/mailer/">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
<!-- </div> -->
</nav>
</div>

Answer 1

First and foremost, the navbar was hidden when I run the code. You can change it so it will appear at the top by setting the order like so:
<div id="navbar">...</div>
<section id="home" class="section1">...</section>
For the issue of responsiveness on the navbar, I notice you used bootstrap for constructing the navbar. Bootstrap has a set of breakpoints set in the framework, these are:
// Extra small devices (portrait phones, less than 576px)
// No media query for xs since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
For the case of the navbar, it is by default responsive already, you just need to follow the markup structure in their site. You can read more here for the navbar breakpoints:
https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a
Also, by default, bootstrap's original .navbar element has display: flex on it, so any thing that you put inside it will flow along with its adjacent elements. You can read more about flex attribute here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/