Dynamically Affixed Navbar - javascript

So I'm working on a web page, and I looked up how to make a dynamically affixed navigation bar. In other words a navbar that is fixed to the bottom of a header image but then fixes itself to the top when the user scrolls down past the header. Most of the stuff I saw was confusing, but I got a general idea of what needed to be done. I made a quick 4 line JQuery code to set the data-offset-top value to the outerHeight of the div containing the header. It worked and I was content with what I'd done. The navbar would stick to the bottom of the header and switch over even when the screen size was scaled up or down. Then I started to add content... now it's setting the data-offset-top to 23, and being new to JQuery, I can't figure out why it's doing this.
Code:
$(document).ready(function(){
var affixHeight = $(".header").outerHeight(true);
$("#affixNav").attr("data-offset-top", affixHeight);
});
/*Primary Background*/
body{
background-image: url("AtABackgroundImage.jpg");
background-position: center;
background-repeat: repeat-y;
background-attachment: fixed;
background-size: 100% 100%;
}
.horizon{
margin-top: 5px;
margin-bottom: 15px;
border-top: 2px outset #8c8c8c;
margin-right: 50px;
}
/*div{
border: 5px solid red;
}*/
/*Navbar/Header*/
.navElement{
width: 100px;
text-align: center;
height: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 1px;
margin-right: 10px;
}
.navbar-inverse{
background-image: url("AtABackgroundImage.jpg");
background-size: 100% 100%;
border-width: 0;
}
.hovering:hover{
background-color: #1f1f14;
border-radius: 15px;
padding: 0px;
}
.button-images{
text-align: center;
height: auto;
width: 100%;
}
.header{
position: relative;
width: 100%;
height: 30%;
overflow: none;
margin-left: 0;
margin-right: 0;
padding: 0;
border-bottom: 3px ridge #333333;
}
.headerimg{
margin-top: -125px;
width: 100%;
overflow: none;
}
.affix {
top: 0;
width: 100%;
}
/*Index Content*/
.row{
margin-left: 0;
margin-right: 0;
}
.content-area{
}
.logoArea{
text-align: center;
padding-left: 0px;
}
.logoImg{
width: 100%;
height: auto;
}
.indexTextImg{
text-align: left;
height: 55px;
width: 225px;
}
.index-text{
padding-left: 20px;
color: #e6e6e6;
font-size: 13pt;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="atamain.css">
<link rel="icon"
type="image/ico"
href="favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="jquery-1.12.3.min.js"></script>
<script src="atamain.js"></script>
<title>Ashes to Ashes</title>
</head>
<body>
<div class="header container-fluid">
<img class="headerimg" src="header\AtAWallpaper.jpg">
</div>
<nav class="navbar-inverse navbar" data-spy="affix" id="affixNav">
<div class="container-fluid nav-containment">
<div class="navbar-header active-page">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="hovering navElement"><img class="button-images" src="NavButtonAssets\HOME2.png"></li>
<li class="hovering navElement"><img class="button-images" src="NavButtonAssets\NEWS2.png"></li>
<li class="dropdown hovering navElement">
<a class="dropdown-toggle" data-toggle="dropdown"><img class="button-images" src="NavButtonAssets\ABOUT2.png"></span></a>
<ul class="dropdown-menu">
<li>The Game</li>
<li>The Server</li>
<li>Factions</li>
</ul>
<li class="hovering navElement"><img class="button-images" src="NavButtonAssets\MEDIA2.png"></li>
<li class="hovering navElement"><img class="button-images" src="NavButtonAssets\APPLY2.png"></li>
</ul>
</div>
</div>
</nav>
<div class="content-area">
<div class=" row">
<div class="col-sm-5 logoArea"><img class="logoImg" src="NavBarLogo\AshesWebNavBarLogo.png" alt="AtA Logo"></div>
<div class="col-sm-7 welcomeTextArea">
<img class="indexTextImg" src="NavButtonAssets\WELCOME.png">
<hr class="horizon">
<p class="index-text">Placeholder text is here to test if the page works... it will eventually be changed to something actually useful and meaningful. For now... it's just here.</p>
</div>
</div>
</div>
</body>
</html>

Related

How can I arrange my divs in 2 columns so it looks like a grid/photo gallery?

I am new to coding and web design. Right now, I am constructing a portfolio website which showcases the other websites I've created. I am trying to create a layout where my Divs on the site are in two columns (under 'my work'). I am trying to figure out what to use but I'm unsure if I'm being honest. I've played around with display flex and display grid but I did not get the result I wanted. Here is my below... I will also link another persons' site to give you a visual of what I'm trying to achieve. Any help or tips would be greatly appreciated... Thank you!
Also, I will include my code.
My page and work so far
What I'm trying to create
* {
margin: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
padding-top: 370px;
padding-bottom: 370px;
background-color: rgb(38,61,66);
color: white;
font-family: 'Courier New', monospace;
font-weight: normal;
}
h2 {
text-align: center;
padding-top: 100px;
padding-bottom: 30px;
font-family: 'Courier New', monospace;
font-weight: normal;
}
.main-body {
background-color: rgb(244,132,95);
width: 100%;
overflow-x: hidden;
}
.main-body2 {
padding-top: 150px;
padding-bottom: 150px;
float: left;
width: 25%;
}
#tribute {
width: 100%;
}
#product {
width: 100%;
}
#survey {
width: 100%;
}
#technical {
width: 100%;
}
.work {
border: 1px solid #ccc;
}
.work:hover {
border: 1px solid rgb(38,61,66);
}
.desc {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
font-family: 'Courier New', monospace;
font-weight: normal;
}
</div><!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Welcome To My Portfolio</h1>
<main>
<div class="main-body">
<h2>Some of my work</h2>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/poEOXVz">
<img src="https://lh3.googleusercontent.com/P8cbTC4Y-l-4nwkjTh3S67d5qHCvRMX7XyE6cXAsbTg4IX1AvB9-xEHexWDOK1q5YidvZtxXLo4TzjqLd3n21kJM8j_3xr_a5aZM3UyX3GrCg_0C--3zujKK-AL7TEyJxbmyJaRv16NvcTR6-B1y-P03TcvNtp11zB3tHYEtvf5TrwZJtInwwE0l_BkhUR-0OKuQO4O2RZZY0zeoo0Mrq7fd4i5rjf3HWb0yJ4WAC3TQP8w1vW0XdarfZZeBtfvnZny9BAEfYqIoUw9Rp9hcXp5Se4zkRs4TaJmJmRwOiWb44RjvNCJ4-oYTGfJZ9R2vL21eUEO28G0TexVTkhHxeB4c4APGteu-iNAB6jx-xUZa37WATiDPylYTtUS4vBU5tbFgvxu9Lvfb4mwVJN8gG6CzuKHou80TJS0yEgxQI6tOZrunP1DtIOAKgXgbGtGqLe6bK8YxYc5yYBH9a5mbp3eA2k50Rrh3Uh7YXpl02GmaPI05fak2wGJ0o0lyWgo0rNd6H0w3bpC91Anqvv_hTVnI1drISA5n8bCfY1m8UNM827qozZQh9Q7CUXOjf_Vkh2NunlyGiKtksT94gtCk59_HfDeBiNb-FPFlKjcRnxS9OyGAQdHFGWgrs5i40KOUKqsEyxY-2zujyECMZidTp4Vvi7mRRsiUMVPAdEkWyLO462xkFUiYVN5_hKOXlQ=s571-no?authuser=0" alt="Tribute Page" id="tribute">
</a>
<div class="desc">Tribute Page</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/VwKgmBg">
<img src="https://lh3.googleusercontent.com/IJaG-M-uOIMWYyrEv1yOZRtlRmTV8diJY-d6DmFxyVJt2BE2-iXsRwFH1G21cOJgDBJCbjAZdvEG01gOTixgkZGmxaRbdlRqvaaVUI0wggikKtB8sGXa6irKIe3B3VB2apWyNghvYGEC0IoCCJgCskOP9x1Bs6wJAUSPONZa1maJrkOBYL_T3PPlfj5Jym_mj9hiuCAKYTMM_rV3ErLk94DJk3bSj2_ppQfo0meoZ_abrk7M81bB171SdDEKQ-q4MKf5SNQkZpZ4Xt-DWYINMbKe6ify9a_9jnAytdJxtcsDGzymzCAfTsW9Oo1QKuRVcp_fZmlKuL8ddJ2TPoYjW4UgwdU6Zt2Qya4Q2NvWcjUSsuScgChbtrqPFUDRuKAwkKD3YAdjAozXQxgGWHqKIR9Uvfd50NYGJRspzXm9t4HNmTHnknO3Alq80HUPVvXuxM3v6rtbfmj8k5__o5YXh7yAUBhO2WYRJxx3255laQXIPxXzXt9013nUp35bKsHGHxL56m6fdADPtxAm1grkEcICHlIoOyNayX2c34pMpXwaJFajEODZ4Le7ng0K7_ORv0CnfFM4Z4tEuw5B1DSK17UpPsRn2NFjPLSkI9BqCA-7ZL_DSlYZYwba7A4PyDbIXHstNzHjKuFPhmb3seCfVYkzMj4mOeGGzHwtL-P9ABTK9ImvZ4l4ILFgGMomXw=w567-h568-no?authuser=0" id="survey">
</a>
<div class="desc">Survey Form</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/oNzrYQZ">
<img src="https://lh3.googleusercontent.com/QkjpqBlrvlMgUdoK6qSnXAcaqSFAdsZEDwrEsl96CGa-QXQrSUOiuf87cQlnYw6ciaelPWkk6hffKoyys4rcWb24DzGId2g2mHUFE52N0toZ6RzIQlXogtYDyWk2YVdnKshfyU_uEmIZJXED_qQ-M4bJ-l22us9yhDOSOSprhEp1oQoB4tICP-d8VPetANQihYa018aa87ixwKu9IA1vRgeS1QEPNcs9MXl0mPaEYx7br_jZuT-DJ2Ae_revIXieopvH_s7Iw-p9kEbb0OzB8lbqThiwCXmDaF6RcfhEDhI_A-sRlnscG6sqCOMn2bPGkNoWbKLkd3KpFnknwFwGpyMX-E3Q4jiBAcbaiROV70WlzkkypOSRwHAZuwWDRwf9qlnAOx-hJ46kMryfuH4ONqh6pe2UMe5lzaEnBaKMYpFuzupAelufIxl2maSraO7LFVEhixhAPJF7ldSMbaFNhXjNEk93DnvxOQuTqLAsWYCBfmFxVCFzWF2hfOHmK2YW7kTI4wTdt66QaI_fbfKeBrKOdAQ3qozVbnpBWymdgXc0rPmn2NrJFoLt327yX0XlIhOdvN-u31koYN3ThSUmJpKI15Pid8ScF7JifzAat4mEJQxk_bDZvCSTQnTCYQQagTVOHfixcQZ-OHfUp5korzvdg4L9sjLVK66meA19KXNNeWDYc3iadl1LscknFQ=w572-h571-no?authuser=0" id="product">
</a>
<div class="desc">Product Landing Page</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/RworweN"><img src="https://lh3.googleusercontent.com/_K_RWpOCQKs5GZYhQkoupmelGzWqrZmhnOJ9zcRpSMZfDDGF8Z9x6KzCA-DpZdYKoh-sXB4B8wjzGXKiOseSkreQwa-rLboJmonxq1Ea2OdNYTIx5Ztdx4ZdHBliSKlEVPDej1yp1VqT80FYpcpao4TOpaS2doyBPFHg-KSkHID-Rr1tPHc8waaA44DiCvDpFI8zbT2E1qP9KprXOl5Zl9oKyOFOTr102ZqWvnWi4PnxgsnNSwQ34qDvYJmVX1C1XdcC1Yf7GNHbNjJ_Elh612G3tC2Ool7ynQ9TWnttk5T9Ah0HKks1BctQolk8NFHNnOKXAu0i2qVrz7Bq7GbYMH2h96v_btud-dGaV05E8rKQ2bMDLIhZeSq4cTPyBvhkHru5L0FgRUNuajR45suoZgbNVtkllKv5PM7pKfXbpgxDtTikii6-y6OhpoAZC3sFkyX0tWQP93PbJIJdXBPLjE1zoUNgxLqE0J2TDmU0mTYl1QcumbP2_C1biY9Q4fRj6MYgwiULgcsgb1EICpUVnsPIRVlc_jeMa81zTfoF-GJ_cIChtE0jTQt6IrDWjW55FU8rICtOUyRRyVhfy81_tkXdObtmzlJ8w9ZJL7RCXjbeCbl4YW0lTBoEqygUZJwRDAYuJTBOm4FWJIBIhC__lI1OKrVEwelyWyugOPVjSiyEt_IXk-V78vb2KkiJ7g=w570-h571-no?authuser=0" id="technical">
</a>
<div class="desc">Technical Documentation Page</div>
</div>
</div>
</div>
</main>
</body>
</html>
use display : flex :
warp the four divs in a big div with class flex-main.
and this is the css:(only the parts with changes)
.main-body {
background-color: rgb(244,132,95);
width: 100%;
}
.flex-main{
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
justify-content: center;
}
.main-body2 {
padding-top: 150px;
padding-bottom: 150px;
float: left;
width: 35%;
margin-right: auto;
margin-left: auto;
}
that would work as you want.good luck!

JQuery MouseMove on triggered element

I'm try to reach a mousemove triggered by a div, I'm thinking the problem it's on this line of code: [_ $('.mousePointer').css({left:e.pageX, top:e.pageY})_]
because the position of the mouse move it's triggered by the size of the entire page, right?
How can I activate the mousemove on different div and change the img in the pointer on different div?
I hope i can explain the problem. I want to use the mouse move as title of each post
body{
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
background-color: #800f62;
}
.headerz{
background-color: grey;
max-height: 120px;
}
.headerz img{
width: 80px;
margin: 10px;
}
.wrapper{
margin-bottom: 100px;
}
.content{
background-color: purple;
min-height: 200px;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.Post_container{
color: white;
margin: 5%;
background-color: #620c75;
min-width: 80%;
min-height: 400px;
border-radius: 10px 10px 10px 10px;
align-items: center;
justify-content: center;
display: flex;
position: relative;
}
/*try follower mouse*/
.mousePointer{
width: 50px;
height: 30px;
position: absolute;
top: 50%;
left: 50%;
z-index: 9999;
}
/*Fine Mouse Follow*/
footer{
background: #121212;
padding: 5px 0;
position: fixed;
left: 0;
bottom: 0;
text-align: center;
width: 100%;
height: 65px;
box-shadow: 0px 0px 08px black;
}
.footer-container{
max-width: 100%;
margin: auto;
padding: 0 20px;
background: black;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap-reverse;
}
.social-media{
margin: 20px 0;
}
.social-media a{
color: white;
margin: 20px;
font-size: 33px;
text-decoration: none;
transition: .3s linear;
}
.social-media a:hover{
color: purple;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"> </script>
<link rel="stylesheet" href="DigiArch_may20200.css">
<link rel="stylesheet" href="try.js">
<title>Digital Archive Update May 2020</title>
</head>
<body>
<div class="headerz">
<img src="1E_Alpha.png" alt="">
</div>
<div class="wrapper">
<div class="content">
<div class="mousePointer" ><img src="https://i.ibb.co/sQXKSH1/1e-Alpha.png" alt="1e-Alpha" border="0" style="width:100px"></div>
<script type="text/javascript">
$(document).mousemove(function(e){
$('.mousePointer').css({left:e.pageX, top:e.pageY})
})
</script>
<div class="Post_container" style="background-image: url(https://lh3.googleusercontent.com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-p-k); ">
Post
</div>
</div>
<div class="content" >
<div class="Post_container" style="background-image: url(https://lh3.googleusercontent.com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-p-k); ">
Post1
</div>
</div>
<footer>
<div class="footer-container">
<div class="social-media">
<i class="fab fa-instagram"></i>
<i class="fab fa-soundcloud"></i>
<i class="fab fa-behance"></i>
<i class="fab fa-twitch"></i>
<i class="fab fa-paypal"></i>
</div>
</div>
</footer>
</body>
</html>
The problem is with the document. It's targeting the whole page whereas what you need is to focus it on .Post_container since its the container of your image. That's pretty much it.
$(".Post_container").mousemove(function(e){ //======> replaced document with container class
$('.mousePointer').css({left:e.pageX, top:e.pageY})
})
Hope it helps :)

Why the element fail to align in center vertically in <div>/<a>/<i>?

I am trying to create a fixed position, vertical tool bar in the right bottom of the page. Icon-fonts (i tag with class="fa") being used are not aligning vertically center to the parent element (a tag). I have been trying to solve this for a while but nothing works.
The output is as follow, the icons are always positioned to the top of the parent element.
output
.navbar-default{
background: #0099cc;
border-bottom: 1px solid #cccccc;
}
.side-tool{
position: fixed;
right: 1%;
bottom: 5%;
width: 40px;
border: 1px solid #eee;
background-color: white;
text-align: center;
font-size: 24px;
z-index: 1040;
}
.side-tool a {
text-align: center;
width: 40px;
height: 40px;
display: inline-block;
}
.side-tool a i {
vertical-align: middle;
}
<html>
<head>
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="resource/css/default.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<div class="container index">
<div class="row">
<div class="col-md-2 left"></div>
<div class="col-md-7 middle"></div>
<div class="col-md-3 right"></div>
</div>
</div>
<div class="side-tool">
<i class="fa fa-arrow-up"></i>
<i class="fa fa-qrcode" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</body>
</html>
.side-tool a i {
vertical-align: middle;
line-height: 40px;
}
In addition to adding vertical-align: middle to the <i> elements, you'll also need to add a line-height equal to the parent's height (40px):
.navbar-default{
background: #0099cc;
border-bottom: 1px solid #cccccc;
}
.side-tool{
position: fixed;
right: 1%;
bottom: 5%;
width: 40px;
border: 1px solid #eee;
background-color: white;
text-align: center;
font-size: 24px;
z-index: 1040;
}
.side-tool a {
text-align: center;
width: 40px;
height: 40px;
line-height: 40px; /* Added */
display: inline-block;
}
.side-tool a i {
vertical-align: middle;
}
<html>
<head>
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="resource/css/default.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<div class="container index">
<div class="row">
<div class="col-md-2 left"></div>
<div class="col-md-7 middle"></div>
<div class="col-md-3 right"></div>
</div>
</div>
<div class="side-tool">
<i class="fa fa-arrow-up"></i>
<i class="fa fa-qrcode" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</body>
</html>
This is because vertical-alignment is based on the line-height rather than the height. The line-height defaults at the height of the font, so in your example, the vertical-alignment: middle only sets an offset of the font's 18px rather than the element's 40px height.
line-height can be set either on the <i> element itself, or the parent <a> element.
Make the anchor tags into flex-boxes
.side-tool a {
display: flex;
justify-content: center;
align-items: center;
}
Adding this to your CSS should give you the results you want
.navbar-default{
background: #0099cc;
border-bottom: 1px solid #cccccc;
}
.side-tool{
position: fixed;
right: 1%;
bottom: 5%;
width: 40px;
border: 1px solid #eee;
background-color: white;
text-align: center;
font-size: 24px;
z-index: 1040;
}
.side-tool a {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
<html>
<head>
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="resource/css/default.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<div class="container index">
<div class="row">
<div class="col-md-2 left"></div>
<div class="col-md-7 middle"></div>
<div class="col-md-3 right"></div>
</div>
</div>
<div class="side-tool">
<i class="fa fa-arrow-up"></i>
<i class="fa fa-qrcode" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</body>
</html>
A couple different options for centering those icons in their a containers. I actually dont mind the absolute centering trick here:
Add to .side-tool a:
position: relative;
Replace the CSS targeting the icons with:
.side-tool a i {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Icons should be absolutely centered inside the 40x40 a tags.

Bootstrap 3 scrollspy does not work. It does not highlight “About” when i scroll down then it highlighted

I want to active/highlight "About" but when i scroll down for some space it become active/highlight. It should show highlighted "About" when i open it in browser. I want to active/highlight "About" when i do not move a scroll bar. "About" should be highlighted. Help me to solve this issue. "About" should be highlighted.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:400,900" rel="stylesheet">
<style>
body {
position: relative;
}
ul.nav-pills {
top: 100px;
position: fixed;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
.bg-1 {
background-color: black;
}
.bg-1 ul li {
color: #ecf0f1;
font-family: 'Gugi', cursive;
font-size: 15px;
}
.bg-2 {
width: 86%;
background-color: #d1d8e0;
}
.col-sm-3 {
width: 14% !important;
background-color: white !important;
}
#media screen and (max-width: 810px) {
#about,
#education,
#certifications,
#skills,
#projects,
#experience,
#interest {
margin-left: 150px;
}
}
#myScrollspy {
position: fixed;
align-self: center;
left: 0;
top: 0;
}
#hello {
font-family: 'Black Han Sans', sans-serif;
font-size: 65px;
margin-left: 150px;
margin-top: 200px;
}
#name {
font-family: 'Montserrat', sans-serif;
font-size: 55px;
font-weight: 600;
margin-left: 150px;
margin-top: 30px;
}
#self {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 500;
margin-left: 150px;
margin-top: 30px;
}
#engineer {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 500;
margin-left: 150px;
margin-top: 30px;
}
#intro {
font-family: 'Lora', serif;
font-size: 20px;
color: #d1d8e0;
margin-left: 150px;
margin-top: 15px;
}
hr {
width: 400px;
border-top: 1px solid #4b6584;
border-bottom: 1px solid #4b6584;
}
#education {
margin-top: 300px;
}
#email {
font-size: 10px;
}
#headings {
font-family: 'Saira Extra Condensed', sans-serif;
color: #343a40;
font-weight: 700;
font-size: 50px;
}
#social {
margin-top: -90px;
margin-left: 250px;
}
.image {
margin-left: 20px;
padding: 1px;
}
.subheadings {
font-family: 'Saira Extra Condensed', sans-serif;
color: #20bf6b;
font-weight: 500;
font-size: 40px;
}
#certifications {
margin-top: 350px;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
color: #fff;
/* background-color: #337ab7; */
background-color: unset !important;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container-fluid">
<div class="row bg-1">
<!-- Left Side Navigation Bar -->
<div class="col-sm-3 text-center" id="backg">
<nav id="myScrollspy">
<ul class="nav nav-pills nav-stacked ">
<img class="img-rounded img-responsive center-block image" src="naqqash.png" height="150" width="150 ">
<li class="active">ABOUT</li>
<li>EDUCATION</li>
<li>CERTIFICATIONS</li>
<li>SKILLS</li>
<li>PROJECTS</li>
<li>EXPERIENCE</li>
<li>INTEREST</li>
</ul>
</nav>
</div>
<!-- Right Side -->
<div class="col-sm-9 bg-2">
<!-- About -->
<div id="about">
<h1 id="hello">hello</h1>
<h3 id="name">I'm Muhammad Naqqash,</h3>
<h3 id="self">a self taught developer.</h3>
<h3 id="engineer">I'm a Computer Engineer. </h3>
<p id="intro">I'm a positive and friendly person. Also, I love to set goals and achieve them.<br> My important qualities: self-motivated, ability overcome difficulties and the <br> ability to learn.</p>
<div id="social">
<a href=""><i class="fab fa-facebook fa-lg"></i><span style="display:inline-block; width: 5px;"></span>
<i class="fab fa-linkedin fa-lg"></i> <span style="display:inline-block; width: 0px;"></span>
<i class="fab fa-twitter-square fa-lg"></i><span style="display:inline-block; width: 5px;"></span>
<i class="fab fa-github-square fa-lg"></i><span style="display:inline-block; width: 5px;"></span>
</div>
</div>
<!-- education -->
<div id="education">
<h1 id="headings">EDUCATION</h1>
<h3 class="subheadings"><i class="fas fa-graduation-cap fa-sm"></i><span style="display:inline-block; width: 20px;"></span>BS Computer Engineering</h3>
<h3 class="subheadings"><i class="fas fa-university"></i><span style="display:inline-block; width: 20px;"></span>NUST College of E&ME</h3>
</div>
<div id="certifications">
<h1 id="headings">Section 3</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="skills">
<h1 id="headings">Section 4</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="projects">
<h1 id="headings">Section 5</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="experience">
<h1 id="headings">Section 6</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="interest">
<h1 id="headings">Section 7</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div>
<h1>Section 7</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
</div>
</div>
The margin on your title is pushing the about section down so instead of:
#hello {
margin-top: 200px;
}
You could use:
#about {
padding-top: 200px;
}

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