How to align my navbar at the top with my picture underneath? - html

Question

My website is here: blackdeath1098.github.io
As you see at the top, the navbar isn't at the top and the picture isn't underneath it.
What can I do to achieve this?
Something like this: https://www.devonstank.com
See how the top has it's navbar transparent while over the picture?
Basically that.

Answer 1

After looking at your website's code, you currently have your Navbar place under your image, just move
<nav class="navbar navbar-default navbar-static-top transparent" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#cocaine">Cocaine Cowboys</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact Me</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Above the image instead of bellow.

Answer 2

Just wrap your nav tag with nav-wrapper and apply the mention style in CSS below.
I hope it helps
HTML:
<div class="nav-wrapper">
<nav role="navigation" class="navbar navbar-default navbar-static-top transparent">
<----navigation stuff---->
</nav>
</div>
CSS:
.nav-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 20;
}
Enjoy :)

Answer 3

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 175) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".navbar-fixed-top").removeClass("transparent");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$(".navbar-fixed-top").addClass("transparent");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="https://blackdeath1098.github.io/CSS.css" rel="stylesheet" />
<style>
.navbar-default {
position: absolute;
top: 0;
width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="scale-image">
<img src="https://blackdeath1098.github.io/synthwave3.jpg" class="scale-image">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top transparent" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#cocaine">Cocaine Cowboys</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact Me</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="image-wrapper">
<br>
</div>
</div>
<section id="heading" class="heading">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="image">Simon's official webpage</h1>
</div>
</div>
</div>
</section>
<section id="top" class="top-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</section>
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Hello and welcome to my website</h1>
<p class="first">A little about this site</p>
<br>
<p class="body">I have put up many personal websites in my lifetime, mostly because I could not be satisfied by the way they looked or turned out. However, I have decided to put my mind and body to this challenge and created from scratch, yet another, more official
personal website. All work done from now on will be on this site only. Unless I need some serious overhaul or facelift, this is the website that I will constantly update. The code is viewable on github here:</p>
<br>
<a href="https://github.com/blackdeath1098/blackdeath1098.github.io" target="blank" class="btn btn-default" role="button">
<i class="fa fa-github fa-lg"></i> Source Code
</a>
<br>
<br>
<br>
<br>
<br>
<hr>
<p class="first">A little about me</p>
<p class="body">My name is Simon Zhang. I am currently a freshman at Bergen County Technical Schools in Teterboro (at time of writing it is 2016). It has been a long way since I have first started programming. I first began with Python, but at the time I was
quite young and didn't make much sense of it. I returned to it after learning HTML, CSS, Bootstrap, and other front end development. I then focused on Python and learned how to use it for scripting purposes. I am now working on learning backend
with Flask (I absolutely abhor PHP). Other plans will come later, as the creator of Github, Chris Wanstrath, has said not to have too defined plans for the future. However, I do have at least some loosely defined plans of what to do next, and
those include Javascript (JQuery and Angular), Flask, some updates to the websites (RSS feed?), and Cocaine Cowboys. Past that I will probably want to learn C++. I have a few projects I am working on, and many more will come. My projects can
be seen in my "Projects" tab.
<br>
<br>
</p>
<p class="body">Currently however, I am looking for a job. My language skills include:</p>
<ul class="body">
<li class="body">English (Native)</li>
<li class="body">Chinese (Conversational)</li>
<li class="body">French (Basic)</li>
</ul>
<br>
<p class="body">My programming language skills include:</p>
<ul class="body">
<li class="body">HTML</li>
<ul class="dashed">
<li>Bootstrap</li>
<li>Material Design Lite</li>
<li>Skeleton</li>
</ul>
<li class="body">CSS</li>
<li class="body">JavaScript</li>
<ul class="dashed">
<li>JQuery (Almost finished learning)</li>
<li>AngularJS (Learning)</li>
<li>RevealJS</li>
</ul>
<li class="body">Python</li>
<ul class="dashed">
<li>Flask</li>
</ul>
<li class="body">Miscellaneous</li>
<ul class="dashed">
<li>Material Design by Google</li>
</ul>
</ul>
<br>
<p class="body">If you wish to hire me, or even just want me to work with you in a project, Feel free to contact me in the Contact Me section.</p>
</div>
</div>
</div>
</section>
<section id="projects" class="projects-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Projects</h1>
<div class="container">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="icon-prog-js02 div-overlay">
<a href="#Javascript-projects">
<div class="overlay">
<span class="plus">
Javascript Projects
</span>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="icon-html5-01 div-overlay">
<div class="overlay">
<span class="plus">
HTML/CSS projects
</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="icon-github-01 div-overlay">
<a href="#other-projects">
<div class="overlay">
<span class="plus">
Other Projects
</span>
</div>
</a>
</div>
</div>
</div>
<h3>Javascript</h3>
<ul class="body">
<li>A mad lib about summer camp</li>
<li>The lyrics to Ode to Viceroy, by Mac Demarco (I only did this because it was a school assignment)</li>
<li>A calculator for Heron's formula (The form boxes are off, yes I am well aware. I have no intention of ever fixing them, I'm too lazy)</li>
</ul>
<h3>HTML/CSS</h3>
<ul class="body">
<li>My First Ever Published Website (warning, may cause PTSD, turn down volume)</li>
<li>My Second Website, copy and pasted from a Bootstrap Theme</li>
<li>My Second Website (Using MDL)</li>
<li>This Website</li>
</ul>
<h3>Upcoming Projects</h3>
<p class="body">I have many more projects coming. You should check regularly to see if I have added more projects here. I am also open to job offerings or collaborations</p>
<ul class="body">
<li>Cocaine Cowboys, a Hotline Miami mod (I will create a seperate website for this)</li>
<li>An HTTPS server so that I may host my own web server with backend</li>
<li>Something with Clay Allen, probably another website</li>
</ul>
</div>
</div>
</div>
</section>
<section id="cocaine" class="cocaine-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Cocaine Cowboys</h1>
<p class="first">Every bullet comes a choice</p>
<p class="body">Cocaine Cowboys is a mod of the famous top down blood-splattering, drug fueled rampage of Hotline Miami. The game will be set before the events of the first game, and will revolve around the character Daniels from Beard's unit. The story focuses
on Daniel's upbringings and life as a drug dealer, school teacher and finally, a soldier. Cocaine Cowboys will have a strong focus on drugs. New gameplay mechanics include taking drugs before missions, and receiving benefits and drawbacks based
on what you took. For example, by snorting cocaine, you will move and fire your revolver much faster, but have slower reload speeds due to your nervousness and fidgeting. Acids and other hallocinogens will slow down time, but will make you see
enemies that aren't there. A (tentative) release date is hopefully by the end of summer, 2017.</p>
<br>
<p class="body">I will create a new, separate website for this game as more artwork and music is produced.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Me!</h1>
<p class="body">Perhaps the section we've all been looking for, the contact me section. Well, because I can't use any backend on Github, these forms will not work. Instead, just send me an email at simzha19#bergen.org</p>
</div>
</div>
</div>
</section>
like this? I've added
<style>
.navbar-default {
position: absolute;
top: 0;
width: 100%;
}
</style>