The dropup in my footer is not working. When I change dropup to dropdownit starts to work as a dropdown but I need a dropup.
I followed bootstrap's guidelines but it's not working.
Here is the code
<footer id="cartFooter">
<div class="row dropup">
<button class="btn footerDropup dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>PHONE<span class="text-right">$99.99</span></li>
<li>PLAN</li>
<li>ACCESSORIES</li>
<li>BUNDLE</li>
</ul>
</div>
<div class="row cartInfo">
<div class="col-xs-4">
<p><span class="glyphicon glyphicon-shopping-cart"></span> CART</p>
</div>
<div class="col-xs-4 text-center">
<p>$99.99</p>
</div>
<div class="col-xs-4 text-right">
<p><a><span class="glyphicon glyphicon-trash"></span></a></p>
</div>
</div>
</footer>
Here is the css
#cartFooter{
position:fixed;
left:0px;
bottom:0px;
width:100%;
color: white;
height: 60px;
background:#000;
overflow: hidden;
}
.cartInfo{
padding-top: 10px;
}
.footerDropup{
width: 100%;
background-color: #212121!important;
color: #fff!important;
border-radius: 0;
font-size: 10px;
border: 0px solid transparent;
}
.footerDropup:hover{
background-color: #212121;
color: #fff!important;
}
.footerDropup:visited{
color: #fff;
}
Heres a link to the code pen
http://codepen.io/theMugician/pen/KdqNpj
Can you try this, run the code snippet to see the result
<!DOCTYPE html>
<html>
<head>
<title>The code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link media="all" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css">
#cartFooter{
position:fixed;
left:0px;
bottom:0px;
width:100%;
color: white;
height: 30px;
background:#000;
overflow: hidden;
}
.cartInfo{
padding-top: 10px;
}
#divDropup{
position: fixed;
bottom: 30px;
width: 100%;
}
#divDropup button{
width: 100%;
background-color: #212121!important;
color: #fff!important;
}
#divDropup ul{
width: 100%;
background-color: #212121!important;
color: #fff!important;
text-align: center;
}
</style>
<body>
<div class="dropup" id="divDropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>PHONE<span class="text-right">$99.99</span></li>
<li>PLAN</li>
<li>ACCESSORIES</li>
<li>BUNDLE</li>
</ul>
</div>
<footer id="cartFooter">
<div class="row cartInfo">
<div class="col-xs-4">
<p><span class="glyphicon glyphicon-shopping-cart"></span> CART</p>
</div>
<div class="col-xs-4 text-center">
<p>$99.99</p>
</div>
<div class="col-xs-4 text-right">
<p><a><span class="glyphicon glyphicon-trash"></span></a></p>
</div>
</div>
</footer>
</body>
</html>
Did you add the links to javascript libraries? Otherwise, dropdowns are not working.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Related
I have the following HTML with navbar, 3 column body and a large footer bar. I have included a button on the navbar clicking which a modal should pop up. I have used the basic example given in the WS schools as a demo one. The WSS demo works flawlessly when I run it as a standalone page. However, when I include the same example in my html, the modal is not popping up. I have included the script in JSFiddle too https://jsfiddle.net/3Lonzx1f/2/.
I am including the same below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- View meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DEMO
</title>
<!-- Color CSS Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<script src="https://use.fontawesome.com/f87c84f770.js"></script>
<script src="jtree.js"></script>
<style type="text/css">
body, html, .sidebar, .body .rhsbar{
height: 100%;
min-height: 100%;
}
html, body {overflow:auto}
body { padding-bottom: 200px; }
#container{
width:100%;
height:100%;
/* position:absolute; */
}
.sidebar{
width:25%;
float:left;
height:100%;
border-right: solid 6px #f1ded9;
overflow-y: auto;
}
.body{
background-color: white;
float:left;
width:50%;
height:100%;
}
.rhsbar1{
background-color: white;
float:right;
width:25%;
height:10%;
border-left: solid 6px #f1ded9;
overflow-y: auto;
}
.rhsbar2{
background-color: white;
float:right;
width:25%;
height:90%;
border-left: solid 6px #f1ded9;
border-top: solid 6px #f1ded9;
}
.rhsbar2 .xmldirectories{
margin-top: 50px;
padding:2px;
}
.navbar {
height: 20px;
position: absolute;
background-color: black;
width:100%;
border-bottom: solid 6px #f1ded9;
z-index:999;
}
#loaded_img_panel {
display:block;
height: 200px;
position: relative;
background-color: white;
overflow: auto;
white-space: nowrap;
border-top: solid 6px #f1ded9;
}
</style>
</head>
<body>
<div class="navbar">
<div class="col-sm-1" style="padding:10px 0 0 0;color:white;">
</div>
<div class="col-sm-1" style="padding:5px">
</div>
<div class="col-sm-1" style="padding:5px">
</div>
<div class="col-sm-3" style="padding:5px 0 0 0;color:white;">
</div>
<div class="col-sm-1" style="padding:5px">
</div>
<div class="col-sm-2" style="padding:5px">
</div>
<div class="col-sm-1" style="padding:10px;color:white;">
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>
<div class="col-sm-1" style="padding: 5px 0px 0px 0px;color:white;">
</div>
<div class="col-sm-1" style="padding:10px;text-align:right;color:white;text-decoration:none;">
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Php code to list all the match sub folders -->
<div id="container">
<div class="sidebar">
</div>
<div class="body">
</div>
<div class="rhsbar1">
</div>
<div class="rhsbar2">
</div>
</div>
<div id="loaded_img_panel" name="loaded_img_panel" class="dragscroll" >
</div>
</body>
</html>
Can someone help please?
This is because you are missing the bootstrap3 javascript library. Just add this library below your jQuery script tag
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Updated Fiddle
I am trying to use the grid structure by bootstrap to create a nice looking page. However, my div is moved and columns in rows are not aligned anymore:
The box with the three should be in line with the blue background. What am I doing wrong? What is the reason for this? I would like to understand. My code is:
EDIT1
I added no-margto the <h1>but now it looks like this: How can I get to fill out the full height?
.no-marg{
margin:0 !important;
padding:0 !important;
}
.sm-pad{
padding:5px;
background-clip:content-box;
}
.col-white{
color:white;
}
.dark-theme {
color: white;
background-color:#17191B;
height: 100%;
}
#step-no{
margin:20px;
}
.light-theme {
color: black;
background-color:#EFEFEF;
}
.cont-box {
margin:6px;
}
body {
background: black;
}
#media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
.red-square{
background-color: red;
border-radius: 0;
}
.btn:hover{
background-color: #78BE20;
}
.blue-rectangle{
background-color: #008ECF;
border-radius: 0;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>
<body>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10">
<h1 class="col-white">Step</h1>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10 blue-rectangle">
<div class="row equal">
<div class="col-sm-3">
<div class="dark-theme">
<h1 class="col-white">3</h1>
</div>
</div>
<div class="col-sm-9">
<span color<img alt="Warning Logo" src="./image/warning.svg">
</div>
</div>
<div class="row equal">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<script src="steps_v1.js"></script>
</body>
</html>
The box has a margin-top. Set it to 0
.no-marg{
margin:0 !important;
padding:0 !important;
}
.sm-pad{
padding:5px;
background-clip:content-box;
}
.col-white{
color:white;
}
.dark-theme {
color: white;
background-color:#17191B;
height: 100%;
}
#step-no{
margin:20px;
}
.light-theme {
color: black;
background-color:#EFEFEF;
}
.cont-box {
margin:6px;
}
body {
background: black;
}
#media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
.red-square{
background-color: red;
border-radius: 0;
}
.btn:hover{
background-color: #78BE20;
}
.blue-rectangle{
background-color: #008ECF;
border-radius: 0;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>
<body>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10">
<h1 class="col-white">Step</h1>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10 blue-rectangle">
<div class="row equal">
<div class="col-sm-3">
<div class="dark-theme">
<h1 class="col-white no-marg">3</h1>
</div>
</div>
<div class="col-sm-9">
<span color<img alt="Warning Logo" src="./image/warning.svg">
</div>
</div>
<div class="row equal">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<script src="steps_v1.js"></script>
</body>
</html>
Add display: -webkit-box; to .dark-theme
.no-marg{
margin:0 !important;
padding:0 !important;
}
.sm-pad{
padding:5px;
background-clip:content-box;
}
.col-white{
color:white;
}
.dark-theme {
color: white;
background-color:#17191B;
height: 100%;
display: -webkit-box;
}
#step-no{
margin:20px;
}
.light-theme {
color: black;
background-color:#EFEFEF;
}
.cont-box {
margin:6px;
}
body {
background: black;
}
#media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
.red-square{
background-color: red;
border-radius: 0;
}
.btn:hover{
background-color: #78BE20;
}
.blue-rectangle{
background-color: #008ECF;
border-radius: 0;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>
<body>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10">
<h1 class="col-white">Step</h1>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10 blue-rectangle">
<div class="row equal">
<div class="col-sm-3">
<div class="dark-theme">
<h1 class="col-white">3</h1>
</div>
</div>
<div class="col-sm-9">
<span color<img alt="Warning Logo" src="./image/warning.svg">
</div>
</div>
<div class="row equal">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<script src="steps_v1.js"></script>
</body>
</html>
Hello I am trying to design a web page everything works but container-fluid is adding extra padding on the right.
As you can see in the picture there's a gap right after the navigation bar ends.
This is my index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--Custom Stylesheets and Scripts -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/index.css"> </head>
<body>
<!-- navigation bar -->
<div class="container-fluid navigation-bar-container text-center" >
<div class="navigation-bar">
<div class="row">
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Home</button>
<div class="dropdown-content">
Login
Register
Van Boening Sets World Record
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Tour Info</button>
<div class="dropdown-content"> How it Works Games Played How to get your room playing Become an event coordinator Mission and Goals </div>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Logo -->
<div class="logo"> <img src="resources/images/Logos/Logo%20Vertical%20Transparent.png" class="img-responsive center-block"> </div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Events</button>
<div class="dropdown-content"> Schedule Results Locations </div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Contact</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is my app.css:
body{
font-family: "Open Sans";
}
.navigation-bar{
background-color: black;
height: 65px;
padding-top: 10px;
}
.navigation-bar-container{
padding-left: 0px;
padding-right: 0px;
}
.navigation-item{
padding-top: 10px;
}
.dropdown{
position: relative;
display: inline-block
}
.dropdown-btn {
background-color: transparent;
border: none;
color:#8CFB76;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1E392A;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #cccccc;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #234331;
color: #e6e6e6;
}
.dropdown:hover .dropdown-content {
display: block;
}
This is my index.css :
body{
background-color: #1a1a1a;
}
Can someone please tell me how I can fix this?
Edit:
After Changing the code like ZenSystem suggested:
In Bootstrap, .row should be the immediate child of
.container-fluid
The padding on .navigation-bar-container is breaking the normal offset container provides for the .row
Change it to this..
<div class="container-fluid text-center">
<div class="navigation-bar row">
<div class="col-md-2">
<div class="navigation-item">
...
http://www.codeply.com/go/NPtXsxCSxX
I'm currently building a website but I've been having troubles with arranging the content. I'd like to add content to the center of the page, inline with the music tab in the left sidenav. Everytime I add something to the center, it pushes everything downwards.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Rob's Music</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='//fonts.googleapis.com/css?family=Biryani' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/c37e8e0ff9.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
background-color: #f8f5ef;
}
.navbar-default {
background-color: #f8f5ef;
border-color: #f8f5ef;
color: #f8f5ef;
}
[class^="btn-"],
[class*="btn-"] {
display: inline-block;
background-color: #f8f5ef;
float: right;
padding-top: 1%;
}
[class^="reverb-nation"],
[class*="reverb-nation"] {
background-position: right;
height: 16px;
width: 16px;
padding-top: 2.5%;
}
[class^="navbar-brand"],
[class*="navbar-brand"] {
padding-left: 0%;
font-size: 450%;
padding-top: 2.5%;
}
#home {
font-size: 200%;
color: #000000;
}
#home:hover {
font-size: 200%;
color: #000000;
}
#music {
font-size: 200%;
color: #000000;
}
#music:hover {
font-size: 200%;
color: #000000;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
#content {
font-size: 100%;
padding-left: 0%;
width: 600%;
}
</style>
</head>
<body>
<!-- Navbar -->
<div class="container-fluid">
<h1 class="navbar-brand">My Band</h1>
<div class="btn-group">
<a class="btn btn-default" href="">
<i class="fa fa-facebook-square"></i>
</a>
<a class="btn btn-default" href="">
<i class="fa fa-youtube" aria-hidden="true"></i>
</a>
<a class="btn btn-default" href="">
<img src="../1484039391_ReverbNationsm.png" class="reverb-nation"></img>
</a>
</div>
</div>
<!-- Title and links to other pages -->
<div class="container-fluid">
<div class="col-sm-2 sidenav">
<div class="hover-icon">
<br></br>
<div class="row">
<a id="home" href="">Home</a>
<div class="col-sm-6">
<a id="music" href="music.html">Music</a>
</div <div class="col-sm-6">
<h2>News</h2>
<p class="well" id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus magna ut se
</p>
</div>
</div>
<div class="row">
<h3>News</h3>
<h3>Events</h3>
<h3>Photos</h3>
<h3>Videos</h3>
<h3>About</h3>
<h3>Contact</h3>
</div>
</div>
</div>
</div>
<br></br>
<br></br>
</body>
</html>
I am having trouble to align my image to the navbar correctly its slightly to the side. I am trying to set it out so that it fits with the navbar together in the white area.
So when you click on the image the navbar pops up below it.
body {
font-family: 'Arimo', sans-serif;
padding-top: 50px;
}
.menu-bar {
position: absolute;
top: 20px;
left: 50%;
height: 14px;
margin-left: -10px;
}
.logo {
width: 100px;
height: 50px;
}
.menu {
display: none;
width: 100%;
padding: 30px 10px 50px;
margin: 0 auto;
text-align: center;
background-color: #fff;
}
.menu ul {
margin-bottom: 0;
}
.menu a {
color: #333;
text-transform: uppercase;
opacity: 0.8;
}
.menu a:hover {
text-decoration: none;
opacity: 1;
}
/*deviders*/
.home{
height: 100%;
padding-top: 150px;
text-align: center;
background: #423840;
}
.about {
height: 100%;
padding-top: 150px;
text-align: center;
background: #8dd8f8;
}
.service {
height: 100%;
padding-top: 150px;
text-align: center;
background: #9D714F;
}
.info{
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.contact {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="js/custom.js"></script>
</head>
<body class="scroll-area" data-spy="scroll" data-offset="0">
<a class="menu-bar" data-toggle="collapse" href="#menu">
<img src="http://i.imgur.com/Bu0B6O8.png" alt="Logo" class = "logo">
</a>
<div class="collapse menu" id="menu">
<ul class="list-inline">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>Contact</li>
</ul>
</div>
<section id="home" class="home">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Home</h1>
</div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Profolio</h1>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="service" class="service">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Service</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="info" class="info">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Info</h1>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact us</h1>
</div>
</div>
</div>
</section>
</body>
You need to make little change in your css, Just replace the below css code. I hope it work for you.
.menu-bar {
top: 20px;
margin: 0 auto;
display: table;}