Codi Codi - 24 days ago 11
CSS Question

center nav logo remove parent div click funtion

I am trying to accomplish the following, but for some reason I cannot get the image to stay in the center just as the layout below.

the issue is the whole div even the logo is clickable, I only want the icon clickable.

I also want the logo to remain in the center with the menu icon in the exact same place as the image below.

enter image description here



$(document).ready(function() {
$(".mobile-menu").on('click', function(){
$(".mobile-dropdown").slideToggle("fast");
});
});

.mobile-menu {
width: auto;
position: relative;
padding: 0;
}

.logo{
display: inline-block;
}

.mobile-menu a.dropdown-link{
display: block;
height: 80px;
padding: 0 20px;
color: #FFFFFF;
font-size: 20px;
cursor: pointer;
background: #000000;
}

.mobile-menu a.dropdown-link:hover{
text-decoration: none;
}
.mobile-menu a.dropdown-link i{
float: right;
position: relative;
top: 15px;
}

.mobile-dropdown {
display: none;
list-style-type: none;
background: #000000;
padding: 0;
min-width: 125px;
position: relative;
z-index: 100;
margin: 0;
}

.mobile-dropdown li{
padding: 0;
height: auto;
}

.mobile-dropdown li a{
color: #FFFFFF;
display: block;
padding: 0 20px;
height: 40px;
line-height: 40px;
font-size: 13px;
text-decoration: none;
}

.mobile-dropdown li a:hover{
text-decoration: none;
background: #00adef;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobile-menu">
<img class="logo" src="http://via.placeholder.com/65x65">
<a class="dropdown-link">&#9776;</a>
<ul class="mobile-dropdown">
<li><a href="#">Uw specialist</a></li>
<li><a href="#">Oplossingen</a></li>
<li><a href="#">Greatest care</a></li>
<li><a href="#">Budget smart</a></li>
<li><a href="#">Over ons</a></li>
</ul>
</div>




Answer Source

With the markup you currently have you can just position the logo absolutely. Use left:0, right:0 and margin:auto to center it.

$(document).ready(function() {
	$(".dropdown-link").on('click', function(){
		$(".mobile-dropdown").slideToggle("fast");
	});
});
.mobile-menu {
  width: auto;
  position: relative;
  padding: 0;
  background:black;
}

.logo{
	display: block;
  position:absolute;
  top:7px;
  left:0;
  right:0;
  margin:auto;
}

.mobile-menu a.dropdown-link{
  display: block;
  height: 80px; width:80px;
  padding: 0 20px;
  color: #FFFFFF;
  font-size: 20px;
  cursor: pointer;
  background: #000000;
}

.mobile-menu a.dropdown-link:hover{
	text-decoration: none;
}
.mobile-menu a.dropdown-link i{
	float: right;
	position: relative;
	top: 15px;
}

.mobile-dropdown {
  display: none;
  list-style-type: none;
  background: #000000;
  padding: 0;
  min-width: 125px;
  position: relative;
  z-index: 100;
  margin: 0;
}

.mobile-dropdown li{
  padding: 0;
  height: auto;
}

.mobile-dropdown li a{
  color: #FFFFFF;
  display: block;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  text-decoration: none;
}

.mobile-dropdown li a:hover{
  text-decoration: none;
  background: #00adef;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="mobile-menu">
  <img class="logo" src="http://via.placeholder.com/65x65">
  <a class="dropdown-link">&#9776;</a>
  <ul class="mobile-dropdown">
    <li><a href="#">Uw specialist</a></li>
    <li><a href="#">Oplossingen</a></li>
    <li><a href="#">Greatest care</a></li>
    <li><a href="#">Budget smart</a></li>
    <li><a href="#">Over ons</a></li>
  </ul>
</div>