Garison Andrers Garison Andrers - 5 months ago 17
CSS Question

Navbar alignment with click?

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><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Services</a></li>
<li><a href="#info">Works</a></li>
<li><a href="#contact">Contact</a></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">&times;</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>




Answer

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;}