I'm trying to place the picture of mine which is <div class="shape"> on top of the background image which is <div class="hero"> just above the center using bootstrap.
However, the background color and image both appear above my picture. I'm looking for the background image to go behind my picture and for the background color not to be seen at this moment in time.
Please don't delete the background color if you decide to help me as I want to do something with it at a later stage.
Please open the snippet in full screen to see my issue.
<style>
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.section {
min-height: 100vh;
}
.one {
background-color:#c00;
}
.two {
background: #563D7C;
}
#sections .section {
padding-top: ~50px;
}
.hero {
background: url("http://mowebusa.nobletechindia.com/wp-content/uploads/2016/05/computer.jpg") center center no-repeat;
background-attachment: fixed;
position: relative;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 300px;
margin: auto;
padding: 3px;
width: 300px;
margin-left: auto;
margin-right: auto;
}
</style>
!DOCTYPE html>
<html lang="en">
<head>
<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">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="shape"></div>
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</div>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>
You can do this by following the steps below:
add position: absolute to .shape to overlap the hero image.
add z-index: 10 to get .shape on top of .hero image
Now, to center align a positioned element, keep in mind the following trick:
use left: 50% to put the positioned element 50% from the left.
add margin-left: -150px
The 1st step would have worked just fine if the element had width of 1px (.shape will start after 50% from left) but since it has a width of 300px, you will have to add a negative margin-left equal to half the width of the element (300/2 = 150).
Similarly, for vertical alignment you can use top: 50% and a negative margin-top equal to 1/2 of the height.
Note: There was issue on padding-top: ~50px;, remove the ~ as it is invalid token. Also, padding can't be in negative.
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.section {
min-height: 100vh;
}
.one {
background-color: #c00;
}
.two {
background: #563D7C;
}
#sections .section {
padding-top: 50px;
}
.hero {
background: url("http://mowebusa.nobletechindia.com/wp-content/uploads/2016/05/computer.jpg") center center no-repeat;
background-attachment: fixed;
position: relative;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 300px;
margin: auto;
padding: 3px;
width: 300px;
/* add this */
position: absolute;
left: 50%;
margin-left: -150px;
z-index: 10;
}
!DOCTYPE html>
<html lang="en">
<head>
<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">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="shape"></div>
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</div>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>
Related
I'm building my own website for an assignment project for college and wondering if anyone could help me with this major issue I'm having.
When I open the html file of my website on my macbook which have the dimension 2880 x 1800 at home I have to adjust the view size to 80% on the google chrome bowser for the webpage to be in size proportion. However, at college the website is automatically in size proportion. My concern is when the person who is reviewing my website it's out of size proportion for them.
Is there a code which can adjust the website view depending on the users monitor size automatically?
I have seen some websites use the following html types of code. Does this help with the position of the content to fit and adjust to the dimensions of the monitor and browser.
.image:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
max-width: 100%;
When I open a online portfolio if I use the "Enter Responsive Design Mode" in the "Develop" option on my macbook you can clearly see the way I coded the content it is not in size proportion and has moved.
Here is actual view I want it to look like, I have loaded up my site in the google chrome browser and changed the view to 80%.
In addition, here is a view of my site on Safari, it's all out of alignment.
Furthermore, below is an example of a web developers portfolio which content fits exactly in size proportion on google chrome and safari no matter what dimensions of the monitor is. (This is what I'm trying to achieve)
Overall, I want to know if there is code which can fit my content to the users screen like how the web developers website looked above in the example therefore, when I open my site on google chrome, safari and mobile the content will look perfect and all aligned how I want it to look. Like this.
Lastly, below is my HTML & CSS for anyone who is willing to help me to review if I have included something wrong within the coding or could add anything which will help me achieve purpose of the post.
HTML
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="footer">
<h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
</div>
</footer>
</body>
</html>
CSS
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align:center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin:0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position:relative;
text-align: center;
width: 100%;
max-width:100%;
width: 100vw;
height: 100%;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding:0;
right:0;
bottom:0;
left:0;
}
.footertext{
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.shape {
content:url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
border-radius: 25px;
background:#4D5061;
color:white;
padding:3px;
margin:150px auto 0 797px;
width:250px;
max-width:100%;
height:250px;
position: absolute;
}
.shape2 {
background: linear-gradient(35deg, #4D5061, #4D5061);
border-radius: 85px;
color:white;
opacity: 0.9;
padding:0px;
margin:410px auto 0 798px;
width:250px;
max-width:100%;
height:40px;
left:200;
position: absolute;
}
</style>
Try updating the head section with this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
with in the head of the HTML file and have a look at CSS Media Queries these help you change the style depending of the size of the screen and it very dynamic
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin: 0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position: relative;
text-align: center;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding: 0;
right: 0;
bottom: 0;
left: 0;
}
.footertext {
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.profile.box {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 250px;
margin: auto;
padding: 3px;
width: 250px;
}
.shape2 {
background: linear-gradient(35deg, #4D5061, #4D5061);
border-radius: 85px;
color: white;
height: 40px;
margin: 1% auto;
opacity: 0.9;
padding: 0px;
width: 250px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="profile box">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="footer">
<h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
</div>
</footer>
</body>
</html>
Have a go at this; culprit for the annoying sizes are the margin added to shape and shape2 div's
First of all I would recommend you to learn more about the Bootstrap Grid for this. Bootstrap is an easy to use and install CSS-framework that is very good for developing responsive webpages (which is the term you are looking for).
If you want to do this yourself you can use media-queries in CSS for this.
Example
The CSS in the example below is only used on browserwindows that are between 520px and 699px. If the window size is not in this range this CSS is skipped.
#media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
This example is from w3schools. Look here for more information
Q1
How can I center my navigation bar drop down menu text, when I try to use text-align:center; it affects the main nav bar text which I don't want.
Q2
How do I change the opacity of the background color when a user hover overs a page name on the drop down menu?
When the user hovers over a page on the drop down menu the white background affects the white text on the drop down menu. In addition, I was wondering how I could create it's own CSS for this part because, I think right now the main nav bar will be affected if you change the opacity if you click on the drop down menu from the nav bar when the background colour of the text on the nav bar goes white.
Below is my code.
HTML
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section3" id="section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer>
<div class="page">
<h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
</div>
</footer>
</html>
CSS
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
a:hover {
color: red;
text-decoration: none;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
}
.section2 {
//height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.section3 {
//height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 5vh;
background-color: #4D5061;
text-align: center;
padding:0;
right:0;
bottom:0;
left:0:
}
h1{
font-size: 14pt;
margin:0;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
</style>
To style the drop down without styling the main nav, give the drop down it's own class name. Then you can do
.navbar .navbar-default .customClassName{
...styles for just the drop down
}
Your drop menu item text seems to be off center because of your padding. Your padding (3.5vh 8px 4px) gives a different top and bottom padding. Vh is taking the percentage of the screen size whereas 4px is a static amount. If you use the same padding on top and bottom, it should work (padding: 4px 8px) Like Hadas said, consider using classes to avoid breaking other parts of your site.
.nav ul.dropdown-menu li a:hover {
background-color: rgba(238, 238, 238, 0.75);
}
To set an opacity for only the background color you'll have to write the background-color property on hover in terms of RGBA. Use a tool like http://hex2rgba.devoth.com/ to convert the current hex to RGBA with the opacity level and add the background-color property to the :hover state of the element.
Setting the opacity property directly will change the opacity of the text and content as well.
I have read this link on how to use anchors to achieve what I'm asking. However, I'm totally lost. I was wondering if someone could show me what I'm looking for and explain it.
Q1
For my website, when the user clicks on the webpage "Contact" on the navigation bar, I want the user to be force-scrolled down to section three on my homepage webpage. I was using something like this before <section id="contact-me" class="contact_section"></section>. However, how can I embed this within my HTML section3 and still keep the class "section3".
Q2
How can I link my arrow down on section1 to go to section 2? Here is my attempt but that brings you to a page I want it to force the user to scroll down to section 2 within my webpage. <i class="fa fa-angle-down" style="font-size:100px;"></i>
Q3
How can I How can I link my arrow down on section2 to go to section 3?
How can I How can I link my arrow down on section3 to go back up to section 1?
Below is my coding.
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
a:hover {
color: red;
text-decoration: none;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
}
.section2 {
//height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.section3 {
//height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 5vh;
background-color: #4D5061;
text-align: center;
padding: 0;
right: 0;
bottom: 0;
left: 0:
}
h1 {
font-size: 14pt;
margin: 0;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section3" id="section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer>
<div class="page">
<h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
</div>
</footer>
As I explained in my comment, links that reference another part of the page do so by the element's id attribute. You can keep the same classes on your <section> tags, but they must have an id attribute.
To solve your question of having section 3 go back to section 1, I just gave section 1 an ID and set the link in section 3 to point to that.
Feel free to ask any clarifying questions
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
a:hover {
color: red;
text-decoration: none;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
}
.section2 {
//height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.section3 {
//height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 5vh;
background-color: #4D5061;
text-align: center;
padding: 0;
right: 0;
bottom: 0;
left: 0:
}
h1 {
font-size: 14pt;
margin: 0;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section3" id="section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="page">
<h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
</div>
</footer>
You want your links to link to an id, not a class. Added an ID for your 3 sections that matches the section number, and updated your links to reference those ID's. You can keep the existing classes on the sections. Also made the #contact-me change on .section3 while keeping .section3 in that element's class list.
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
a:hover {
color: red;
text-decoration: none;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
}
.section2 {
//height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.section3 {
//height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 5vh;
background-color: #4D5061;
text-align: center;
padding: 0;
right: 0;
bottom: 0;
left: 0:
}
h1 {
font-size: 14pt;
margin: 0;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer>
<div class="page">
<h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
</div>
</footer>
Q1
How can I center the text <h1>Welcome to Liam Docherty's Digital Portfolio</h1> in line with the navigation bar text? Here is an example the orange box is where I want the text to be placed.
Q2
I was also wondering how I can force the users screen to adjust the view to 80% when they open my website? The reason why is due to 100% makes certain things not look correct. For example my section 1 background image called is out of size porportion. `
HTML
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="page">
<h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
</div>
</footer>
</body>
</html>
CSS
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align:center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav>li>a:hover {
background-color: rgba(17, 17, 17, 0.2);
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
nav-title {
display: block;
margin: 0 auto; /*auto will do the centering trick*/
width: 80%; /*or any width*/
position: relative;
}
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position:absolute;
width: 100%;
width: 100vw;
height: 100%;
height: 70vh;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
//height: 95vh;
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
//height: 95vh;
background-color: #EDF7F6;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 5vh;
background-color: #4D5061;
text-align: center;
padding:0;
right:0;
bottom:0;
left:0:
}
h1{
font-size: 14pt;
margin:0;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
</style>
It's hard without having a live version to edit but
for Q1:
add a div around the text as such
<div class="centertext">
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
then add css as such
.centertext {
width: 100%;
position: absolute;
}
For Q2, I'm not really sure what you are talking about but if only images are not sizing right its better to size them through css rather than for a zoom out.
try adding css options such as background-size: contain; or background-size: cover;
Let me know if this works
Q1
How can I make my navigation bar static?
Q2
How can I move up the background picture to ensure there is no white gaps and adjust the height of the background image? I think I have to use padding to move up the image and use height to manipulate the height of the background image. Is that correct?
Q3
How can delete the white gap above my footer text at the bottom of the webpage section 3 contact us?
HTML code
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2" id = "section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section">
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer>
<div class="page">
<h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
</div>
</footer>
</html>
CSS
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: red;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: red;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
a:hover {
color: red;
text-decoration: none;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
}
.section1 {
height: 90vh;
text-align: center;
color: white;
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
}
.section2 {
height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.contact_section {
height: 93vh;
background-color: grey;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
footer {
height: 5vh;
background-color: #4D5061;
text-align: center;
margin:0;
padding:0;
right:0;
bottom:0;
left:0:
}
h1{
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
</style>
1) Use the navbar-fixed-top class provided by Bootstrap to fix the navbar in place.
2) Change the height property of the section1 class.
3) Create a new section, reduce the height, and remove margin/padding from your h1 class (you had a typo in your CSS, .footer not footer).
Result:
https://jsfiddle.net/vnkevsnt/8/
You'll need to add position:fixed to your .navbar.navbar-default to fix it. Also be sure to add width:100% to make it full width.
(Have a look at positioning) - Bootstrap probably can position with a class but I'm not sure.
Regarding the white space at the bottom, I would personally remove the height:5vh from the footer and also add margin:0 to the H1 element.
Bootstrap has nav-fixed class
<nav class="navbar navbar-default navbar-fixed-top">
....
</nav>
Sample: https://getbootstrap.com/examples/navbar-fixed-top/