I the example below, use can open a modal, type a message and then send it... It would take 2 seconds to send the message... I would like to show a spinner (which is already working) but also I want to background of the modal to be greyed-out while spinner is showing...
$("#sendBtn").click(function() {
$('.sending-message-spinner').show();
setTimeout(function () {
$("#myModal").modal("hide");
}, 2000);
});
textarea {
width: 100%;
height: 80px;
}
#keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.sending-message-spinner {
position: fixed;
text-align: center;
z-index: 20;
display: none;
width: 40px;
height: 40px;
border: 8px solid #B0B0B0;
border-radius: 50%;
border-top-color: #000;
animation: loading .75s linear infinite;
}
<!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/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="d-flex justify-content-center">
<div class="feedback-position sending-message-spinner">
</div>
</div>
<p>type your message: </p>
<Textarea> </textarea>
<button id='sendBtn' type="button" class="btn btn-primary">Send Message</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can add a class to CSS and have your JS call it when the button is clicked. I added to CSS .myClass and set the opacity in there, then called it in JS with $("#myModal").addClass('myClass'); to add that class to myModal when the button is clicked. See here:
UPDATE: Here I did it with an overlay div inside myModal This will grey out the modal without making it transparent.
$("#sendBtn").click(function() {
$("#overlay").show();
$('.sending-message-spinner').show();
setTimeout(function () {
$("#myModal").modal("hide");
}, 2000);
});
textarea {
width: 100%;
height: 80px;
}
#keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.sending-message-spinner {
position: fixed;
text-align: center;
z-index: 20;
display: none;
width: 64px;
height: 64px;
border: 8px solid #B0B0B0;
border-radius: 50%;
border-top-color: #000;
animation: loading .75s linear infinite;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 10;
}
<!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/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<div class="modal" id="myModal">
<div id="overlay"></div>
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="d-flex justify-content-center">
<div class="feedback-position sending-message-spinner">
</div>
</div>
<p>type your message: </p>
<Textarea> </Textarea>
<button id='sendBtn' type="button" class="btn btn-primary">Send Message</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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 tried to link a bootstrap modal box to an image button. The modal box will be displayed when I click the image button. Anyone know how to make the background of the modal box transparent and full screen?
This is my html file
<!DOCTYPE html>
<html>
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.modal-content {
height: 100%;
min-height: 100%;
height: auto;
border-radius: 0;
}
</style>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/ionic.min.css" />
<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>
<title>Add an item</title>
</head>
<body onload="selectCategory()">
<div class="bar bar-header">
Back
<h1 class="title">Add Item</h1>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="padding" style="margin-top:75px;">
<label class="item-input">
<input name="photo1" id="photo1" type="image"
src="images/photo-icon.png"
onclick=""
width="20%"
data-toggle="modal" data-target="#myModal"/>
<input name="photo2" id="photo2" type="image"
src="images/photo-icon.png"
onclick=""
width="20%" />
<input name="photo3" id="photo3" type="image"
src="images/photo-icon.png"
onclick=""
width="20%" />
<input name="photo4" id="photo4" type="image"
src="images/photo-icon.png"
onclick=""
width="20%" />
<input name="photo5" id="photo5" type="image"
src="images/photo-icon.png"
onclick=""
width="20%" />
</label>
<label class="item-input">
<span class="input-label">Item Name</span>
<input type="text" placeholder="" id="itemName">
</label>
<label class="item-input">
<span class="input-label">Category</span>
<select id="select_category" name="select_category">
<option value="0">- Select -</option>
</select>
</label>
<label class="item-input">
<span class="input-label">Price</span>
<input type="number" placeholder="" id="price">
</label>
<label class="item-input">
<button class="button button-block button-positive" id="addProduct">Add item</button>
</label>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript" src="js/addProduct.js"></script>
</body>
</html>
This is the output after I clicked the image
.modal-backdrop.in {
background: rgba(0, 0, 0, 0.5);
}
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
If you want the outside area of the modal will become white.
Then Use this:
.modal-open .modal{
background: #fff !important;
}
I found the solution. Add this to css part
.fade.in {background-color: transparent;}
Just add the following code:
<style>
.modal-backdrop.in{
opacity: 0 !important;
}
</style>
I would suggest using this..
.modal-backdrop.in {
background: rgba(0, 0, 0, 0.5);
}
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
I assume you are looking for a lightbox kind of effect in you modal. If so try here some links that can help you further..
https://bootsnipp.com/snippets/7XVM2
http://ashleydw.github.io/lightbox/
https://codepen.io/webcane/pen/bNEOXZ
I have to add a background image to modal header and it should be responsive as well. I am able to add the image but I am getting issues in making it responsive. Any help appreciated.
Below is the sample snippet.
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(https://s9.postimg.org/ky3v3mduz/Jellyfish.jpg);
height: 208px;
background-size: contain;
background-repeat: no-repeat;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: #hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</body>
Use a combination of background-size: cover; background-position: center center; assuming you want the center of the image to be the part that is always shown. Otherwise, adjust those as needed to ensure the focal point of the image will be shown.
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(https://s9.postimg.org/ky3v3mduz/Jellyfish.jpg);
height: 208px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: #hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</body>
To have a responsive background image, what you're looking for is a percentage-based background-size. To completely cover the content area, you would use:
.modal-header {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(https://s9.postimg.org/ky3v3mduz/Jellyfish.jpg);
height: 208px;
background-size: 100% 100%;
background-repeat: no-repeat;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: #hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</body>
Note that this will distort the image, which may not be what you want. In order to not distort the image, you should only specify a single parameter in background-size, and also tell the background to be fixed to the center:
.modal-header {
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(https://s9.postimg.org/ky3v3mduz/Jellyfish.jpg);
height: 208px;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: #hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</body>
Ultimately, considering the modal header itself will never change in height, you may want to look into simply using an <img> tag instead of a background-image.
Hope this helps! :)
I think all you need to have is a right size image and changing the background-size to cover.
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(http://www.bahai.org/chrome/img/beliefs/bahaullah-covenant-feature-img.jpg?3e7a0319);
height: 208px;
background-size: cover;
background-repeat: no-repeat;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: #hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</body>
I want to make my bootstrap modal content responsive but when I resize browser modal contents like modal header , textboxes and login button going out of div please let me know how to make them responsive.
Here is the code.
HTML:
<!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/1.12.4 /jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- 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 class="modal fade" id="myModal" 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" style="vertical-align:central">Login With Facebook</h4>
</div>
<div class="modal-body">
<img class="modal-content" src="http://www.firstbaptistashland.com/wp-content/uploads/2015/09/facebook-logo-png-transparent-background-150x150#2x.png" width="100" height="100" style="margin-left:220px;display:block;width:auto;" />
<br>
Email:<input type="text" /><br>
Password::<input type="text" />
</div>
<div class="modal-footer">
<input type="submit" class="btn-default modal-content" style="background-color: #4CAF50; border: none; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; padding: 10px 24px; margin-right: 200px; cursor: pointer; " value="Login" />
</div>
</div>`
</div>
</div>
</div>
try this way on image tag
style="margin-left:220px;display:block;width:auto;"
style="width: auto; left: 50%; transform: translateX(-50%); display: block;"
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;}