I have looked everywhere for this answer and can't seem to find anything that works. I am using bootstrap in my navbar, and the navbar collapses when the window is small. When it is collapsed and then opened via the button, the navigation links are centered and each of their respective drop down menu's align to the left of the page, so it doesn't function well. I need to get all of the links aligned to the left- but only in this view (I am using nav-justified for the alignment before the windows is collapsed). How do I do this without messing up my navbar in the larger view? Ideally I would like to do this by using html & css only.
Here is the jsfiddle
The html:
Comstar, inc. Internal
Warehouse
</head> <body> <div class="container" id="page-container">
<div class="header"> <div class="container">
<img class="logo" src="https://www.comstarinc.com/media/catalog/product/u/n/untitled-1.jpg">
</div> <!-- /.container --> </div> <!-- /.header -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-justified custom">
<li><span class="glyphicon glyphicon-home"></span></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Shipping<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>FedEx</li>
<li>UPS</li>
</ul> <!-- /.dropdown-menu -->
</li> <!--/.dropdown -->
<li>Testing</li>
<li>Packing</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Products<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Part Number</li>
<li>Ebay Number</li>
</ul> <!-- /.dropdown-menu -->
</li> <!-- /.dropdown -->
<li>Cleaning</li>
<li>Recieving</li>
<li>Location</li>
</ul> <!-- /.nav .navbar-nav .custom -->
</div> <!-- /.collapse .navbar-collapse #myNavbar --> </div> <!-- /.container-fluid #navbar-container --> </nav> <!-- /.navbar -->
<div class="jumbotron"> <div class="container">
<h1 class="text-center">Comstar, inc. Warehouse</h1>
<div class="container" id="jumbo-content">
</div> <!-- .container #jumbo-content -->
</div> <!-- /.container --> </div> <!-- /.jumbotron -->
I can't yet post my css here but it is able to be seen in the jsfiddle.
To left align the link and the dropdown on the mobile viewport, add this to your CSS.
#media (max-width: 767px) {
.navbar .nav.custom > li > a:hover, .navbar .nav.custom > li > a {
display: inline-block;
}
}
html,
body {
margin: 0;
padding: 0;
}
.container {
margin: 0px;
padding: 0px;
width: 100%;
}
#page-container {
width: 100%;
}
/*Header*/
.header {
margin: 0;
padding: 0;
width: 100%;
height: 54px;
}
.header img {
margin: 15px 0px 0px 57px;
padding: 0px;
height: 22px;
width: auto;
float: left;
}
.navbar {
margin: 0px;
padding: 0px;
background-image: url("https://www.comstarinc.com/media/catalog/product/n/a/nav-bar-background.png");
}
#navbar-container {
margin: 0px;
padding: 0px;
}
.navbar .nav {
margin-top: 5px;
}
/* Link Text Color */
.navbar .nav li a {
color: #ffffff;
text-transform: uppercase;
font-family: 'Avenir LT W01 65 Medium';
font-weight: normal;
font-size: 13px;
}
.navbar .nav li a:hover {
font-weight: bolder;
}
/* !Collapse button colors */
.navbar button {
color: white;
border: 1px solid white;
}
/* !Navbar background colors */
.navbar .custom > li > a:hover,
.navbar .custom > li > a {
background-color: transparent !important;
}
/* Changes Nav- collapse button color */
.navbar .navbar-toggle .icon-bar {
background-color: white;
}
/* Dropdown menu anchor background color */
.navbar .nav-justified > li > .dropdown-menu {
background-color: #eaeaed;
}
/* dropdown menu background and text color */
.navbar .nav-justified > li > .dropdown-menu a:hover {
background-color: #eaeaed;
color: #002c66;
}
.navbar .nav-justified > li > .dropdown-menu a {
color: #002c66;
}
/* Navbar Hover */
.sidebar-nav {
padding: 9px 0;
}
.navbar .dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.navbar .dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.navbar .dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
/*Jumbotron*/
.jumbotron {
margin: -25px 0px 0px 0px;
padding: 0px;
background: url("http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 725px;
border: none;
}
.jumbotron h1 {
color: #ffffff;
text-align: center;
font-family: Arial;
margin-top: 85px;
font-size: 60px;
}
#media (max-width: 767px) {
.navbar .nav.custom > li > a:hover,
.navbar .nav.custom > li > a {
display: inline-block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container" id="page-container">
<div class="header">
<div class="container">
<a href="http://www.comstarinc.com/">
<img class="logo" src="https://www.comstarinc.com/media/catalog/product/u/n/untitled-1.jpg">
</a>
</div>
<!-- /.container -->
</div>
<!-- /.header -->
<nav class="navbar">
<div class="container-fluid" id="navbar-container">
<div class="navbar-header">
<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>
</button>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-justified custom">
<li><span class="glyphicon glyphicon-home"></span>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Shipping<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>FedEx
</li>
<li>UPS
</li>
</ul>
<!-- /.dropdown-menu -->
</li>
<!--/.dropdown -->
<li>Testing
</li>
<li>Packing
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Part Number
</li>
<li>Ebay Number
</li>
</ul>
<!-- /.dropdown-menu -->
</li>
<!-- /.dropdown -->
<li>Cleaning
</li>
<li>Recieving
</li>
<li>Location
</li>
</ul>
<!-- /.nav .navbar-nav .custom -->
</div>
<!-- /.collapse .navbar-collapse #myNavbar -->
</div>
<!-- /.container-fluid #navbar-container -->
</nav>
<!-- /.navbar -->
<div class="jumbotron">
<div class="container">
<h1 class="text-center">Comstar, inc. Warehouse</h1>
<div class="container" id="jumbo-content"></div>
<!-- .container #jumbo-content -->
</div>
<!-- /.container -->
</div>
<!-- /.jumbotron -->
</div>
<!-- /.container #page-container -->
Related
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 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/
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>
I have my logo on the left with a white background in the header but my navbar keeps going underneath this on the right. I don't understand why this is happening. Also I don't think my navbar list is going straight across.
body {
background-color: #832040;
}
.navbar-default {
width: 100%;
height: 100px;
margin: 15px 0 0;
padding: 0;
background-color: #FFF;
}
.navbar ul.nav li a {
font-family: 'Righteous', sans-serif;
font-size: 38px;
color: #000;
padding: 25px;
margin: 0;
}
.navbar ul.nav li a:hover {
background: #000;
color: #fff;
height: 40px;
}
.logo {
width: 320px;
padding: 15px;
}
<div class="navbar-default">
<div class="logo">
<img src="HairSite/KatiesKuts-Logo.png">
</div>
<div class="navbar">
<div class="navbar nav pull-right">
<ul class="nav navabar-nav">
<li>Home</li>
<li>Bio</li>
<li>Appointments</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
you have missed out some proper html structure and classes bootstrap requires.
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="logo">
<img src="HairSite/KatiesKuts-Logo.png">
</div>
</div>
<div class="navbar">
<ul class="nav nav navbar-nav navbar-right">
<li>Home</li>
<li>Bio</li>
<li>Appointments</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
you could refer the following links for further references;
Logo Nav by Start Bootstrap
Navbar example form Bootstrap
This might help or give you some ideas. You're missing some HTML and I don't believe navbar-default was a class in 2.3.2.
body,
html {
background-color: #832040;
}
.navbar .navbar-inner {
background: white;
border: none;
border-radius: 0;
}
.navbar .navbar-inner .nav > li > a {
font-family: 'Righteous', sans-serif;
font-size: 15px;
color: #000;
padding-top: 50px;
padding-bottom: 50px;
}
.navbar .navbar-inner .btn-navbar {
margin-top: 45px;
}
.navbar .navbar-inner .nav > li > a:hover {
background: #000;
color: #fff;
}
#media (max-width: 991px) {
.navbar .navbar-inner .nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">
<img src="http://placehold.it/320x100/000">
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home
</li>
<li>Bio
</li>
<li>Appointments
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>