I have a JS Fiddle
https://jsfiddle.net/zuer7g75/1/
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".category-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse category-navbar-collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>
<a href="/computers">
Computers
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/desktops">
Desktops
</a>
</li>
<li>
<a href="/notebooks">
Notebooks
</a>
</li>
<li>
<a href="/software">
Software
</a>
</li>
</ul>
</li>
<li>
<a href="/electronics">
Electronics
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/camera-photo">
Camera & photo
</a>
</li>
<li>
<a href="/cell-phones">
Cell phones
</a>
</li>
<li>
<a href="/others">
Others
</a>
</li>
</ul>
</li>
<li>
<a href="/apparel">
Apparel
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/shoes">
Shoes
</a>
</li>
<li>
<a href="/clothing">
Clothing
</a>
</li>
<li>
<a href="/accessories">
Accessories
</a>
</li>
</ul>
</li>
<li>
<a href="/digital-downloads">
Digital downloads
</a>
</li>
<li>
<a href="/books">
Books
</a>
</li>
<li>
<a href="/jewelry">
Jewelry
</a>
</li>
<li>
<a href="/gift-cards">
Gift Cards
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/search" method="get" onsubmit="return check_small_search_form()"> <div class="search_box pull-right">
<input type="text" id="small-searchterms" autocomplete="off"
value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>
<script>
$(document).ready(function () {
$('.navbar a.dropdown-toggle').on('click', function (e) {
var elmnt = $(this).parent().parent();
if (!elmnt.hasClass('nav')) {
var li = $(this).parent();
var heightParent = parseInt(elmnt.css('height').replace('px', '')) / 2;
var widthParent = parseInt(elmnt.css('width').replace('px', '')) - 10;
if (!li.hasClass('open')) li.addClass('open')
else li.removeClass('open');
$(this).next().css('top', heightParent + 'px');
$(this).next().css('left', widthParent + 'px');
return false;
}
});
});
</script>
<script>
function setMouseHoverDropdown() {
if ($(window).innerWidth() > 767) {
$('ul.nav li').hover(function () {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
}
$(window).load(function () {
setMouseHoverDropdown();
});
$(document).ready(function () {
setMouseHoverDropdown();
});
$(window).resize(function () {
setMouseHoverDropdown();
});
</script>
</body>
In JS fiddle , by default you will see a mobile menu.
Please expand the result menu of JS fiddle to maximum. now you will see the web view instead of mobile.
It has a menu which says computers electronics etc and you can see a search box on the right hand side.
Now if you try to decrease the width of jsfiddle result window slowly, you can see the search box jumpind down to bottom.
I want the search menu to stay in same line as the menu, instead wrap the contents of menu into two lines..
How do I do that.
Related
i am using the bootstrap dropdown menu. and transitions between pages, I can provide my transitions without refreshing the page, but there is a situation where I get stuck, when the menu a href and submenu a hrefs are clicked, the dropdown remains open, I want it to be closed in an animated way. Finally, when "menu-item-has-children a" is clicked, "display: none" opens and when I click it again, it doesn't close. I couldn't understand why this was happening.
<div class="header__navigation">
<nav class="navbar-collapse collapse" id="cargopress-navbar-collapse" aria-expanded="true">
<ul class="main-navigation js-main-nav js-dropdown">
<li class="menu-item">
Home
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">Corporate</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/corporate/about-us">ABOUT US</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">Services</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/services/land-transportation">LAND TRANSPORTATION</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">İmportant İnformation</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/important-informations/highway">HİGHWAY</a>
</li>
</ul>
</li>
<li class="menu-item">Contact Us</li>
</ul>
</nav>
</div>
$(".sub-menu").hide();
$('.menu-item-has-children a').click(function (event) {
event.preventDefault();
var elems = $(this).closest('li');
elems.siblings('li').find('ul').hide();
if (elems.find('.sub-menu').length) {
$(this).siblings('.sub-menu', elems).show();
}
});
$("li.menu-item").click(function () {
$('.navbar-collapse').removeClass('in');
});
$(".menu-item ul li a").click(function () {
$('.navbar-collapse').removeClass('in');
});
I think that is just a matter of using .toggle() instead of .show() to be able to close a sub-menu when it is already opened.
$(".sub-menu").hide();
$(".menu-item-has-children a").click(function (event) {
event.preventDefault();
var elems = $(this).closest("li");
elems.siblings("li").find("ul").hide();
if (elems.find(".sub-menu").length) {
$(this).siblings(".sub-menu", elems).toggle(); // .toggle() instead of .show() here...
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header__navigation">
<nav class="navbar-collapse collapse" id="cargopress-navbar-collapse" aria-expanded="true">
<ul class="main-navigation js-main-nav js-dropdown">
<li class="menu-item">
Home
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">Corporate</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/corporate/about-us">ABOUT US</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">Services</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/services/land-transportation">LAND TRANSPORTATION</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">İmportant İnformation</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/important-informations/highway">HİGHWAY</a>
</li>
</ul>
</li>
<li class="menu-item">Contact Us</li>
</ul>
</nav>
</div>
Edit based on comments.
my pages are running with xhr request
So I now assume that a click on a .list-entry link (link on the second menu level) triggers an xhr to update a part of the page... And that menu stays opened because it is not part of the page that changes.
So you would just need additionnal event handler. Something like:
$(".list-entry").click(function(){
$(".sub-menu").hide();
})
There is one way to convert a sidebar Menu to burger menu with Bulma.
With the navbar menu (horizontal on top) i can do this very easy with this code:
HTML
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a href="#" class="navbar-item">
<img src="https://bulma.io/images/bulma-logo-white.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar-example">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbar-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item is-tab">Home</a>
<a class="navbar-item is-tab ">Features</a>
<a class="navbar-item is-tab">Documentation</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
JS
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
const target = el.dataset.target; const $target = document.getElementById(target);
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
I want eliminate this navbar, use only my side menu and convert it to burger in small screens.
I'm trying that and is not working:
HTML
<div class="columns is-fullheight">
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar-example">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<aside class="sidebar">
<nav id="navbar-example" class="menu">
<p class="menu-label">
Liturgia
</p>
<ul class="menu-list">
<li>
<a class="is-active">Breviario</a>
<ul>
<li><a class="action" id="mixto">Mixto</a></li>
<li><a class="action" id="oficio">Oficio</a></li>
</ul>
</li>
<li>
<a class="is-active">Misa</a>
<ul>
<li><a class="action" id="lecturas">Lecturas</a></li>
<li><a class="action" id="rito">Rito completo</a></li>
</ul>
</li>
</ul>
<p class="menu-label">
Tradición
</p>
<ul class="menu-list">
<li><a class="is-disable">Homilías</a></li>
<li><a class="action" id="comentarios">Comentarios</a></li>
</ul>
<p class="menu-label">
Hagiografía
</p>
<ul class="menu-list">
<li>Santo del día</li>
</ul>
</nav>
</aside>
</div>
JS
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
const target = el.dataset.target; const $target = document.getElementById(target);
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
How i can achieve this?
I'm working on the navbar for a site and for the menu it has an unordered list with submenus that are actived when the menu item is hovered over, but when you remove your mouse from the menu item to attempt to click on a submenu item the submenu dissapears. Is there a way with CSS/HTML to hover over it, then have the user click on it to keep it activated? If that's not possible, is it possible to change it to stay activated on a click without the preview on the hover?
HTML:
<!-- Navbar -->
<div class="header">
<div class="topbar">
<ul class="list-inline">
<li class="smallsocial"> </li><li> </li>
<li class="smallsocial"> <a href="https://www.facebook.com/prayingpelicanmissions" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://plus.google.com/+PrayingpelicanmissionsOrg" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Google Plus">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://www.youtube.com/user/petepelican?sub_confirmation=1" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Youtube">
<i class="fa fa-youtube"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://twitter.com/PrayingPelican" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://www.instagram.com/prayingpelicanmissions/" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Instagram">
<i class="fa fa-instagram"></i>
</a></li><li> </li>
<li class="pull-right"><button class="btn btn-dark">CONTACT US</button></li>
<li class="pull-right"><button class="btn btn-dark">LOGIN</button></li>
</ul>
</div>
<!-- End Social Links -->
<div class="navbar mega-menu" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Navbar Brand -->
<div class="navbar-brand">
<a href="index.html">
<img class="default-logo" src="assets/img/whitelogo.png" alt="Logo">
<img class="shrink-logo" src="assets/img/blacklogo.png" alt="Logo">
</a>
</div>
<!-- ENd Navbar Brand -->
<!-- Header Inner Right -->
<!-- End Header Inner Right -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="menu-container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="dropdown">
<a href="javascript:void(0);" class="pull-right dropdown-toggle" data-toggle="dropdown">
About Us
</a>
<ul class="dropdown-menu">
<li>Who We Are</li>
<li>Partners</li>
<li>Trip Media</li>
<li>Trip Journals</li>
<li role="separator" class="divider"></li>
<li> Donate</li>
</ul>
<!-- End Home -->
<!-- Shortcodes -->
<li class="dropdown mega-menu-fullwidth">
<a href="javascript:void(0);" class="pull-right dropdown-toggle" data-toggle="dropdown">
Locations
</a>
<ul class="dropdown-menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container">
<div class="row equal-height">
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>United States</h3></li>
<!-- Typography -->
<li class="location"><i></i> Tucson, AZ</li>
<li class="location"><i></i>San Francisco, CA</li>
<li class="location"><i></i> Miami, FL</li>
<li class="location"><i></i> Chicago, IL</li>
<li class="location"><i></i> Boston, MA</li>
<li class="location"><i></i>Minneapolis, MN</li>
<li class="location"><i></i> Pittsburg, PA</li>
<li class="location"><i></i> Providence, RI</li>
<li class="location"><i></i> Memphis, TN</li>
<li class="location"><i></i>US Reservations</li>
<!-- End Typography -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>CENTRAL AMERICA</h3></li>
<!-- Buttons -->
<li class="location"><i></i>Belize</li>
<li class="location"><i></i>Costa Rica</li>
<li class="location"><i></i>Guatemala</li>
<li class="location"><i></i>Mexico</li>
<li class="location"><i></i>Nicaragua</li>
<!-- End Buttons -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>CARIBBEAN</h3></li>
<!-- Buttons -->
<li class="location"><i></i>Bahamas</li>
<li class="location"><i></i>Cuba</li>
<li class="location"><i></i>Dominican Republic</li>
<li class="location"><i></i>Haiti</li>
<li class="location"><i></i>Jamaica</li>
<li class="location"><i></i>Puerto Rico</li>
<!-- End Buttons -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>AFRICA/EUROPE</h3></li>
<!-- Buttons -->
<li class="location"><i></i>Italy</li>
<li class="location"><i></i>Ghana</li>
<li class="location"><i></i>South Africa</li>
<!-- End Buttons -->
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- End Shortcodes -->
<!-- Demo Pages -->
<li class="">
<a href="http://www.prayingpelicanmissions.org/journals">
Trip Journals
</a>
</li>
<li class=".button12">
<a href="http://www.prayingpelicanmissions.org/mission-trip-registration">
<button type="button" class="btn btn-default">REGISTER FOR A TRIP</button>
</a>
</li>
<div class="header-inner-right">
<li class="menu-icons">
<i class="menu-icons-style search search-close search-btn fa fa-search"></i>
<div class="search-open">
<input type="text" class="animated fadeIn form-control" placeholder="Start searching ...">
</div>
<!-- End Demo Pages -->
</ul>
<!--/navbar-collapse-->
</div>
</div>
</div>
</div>
</div> <!-- End Navbar -->
There might be a small gap between the menu and submenu. Take a look here.
Ideally some code would help, but sounds like a nested dropdown would be more accurate, also I assume you are using Bootstrap 3?
Check this example Multi level dropdown menu BS3
I've looked over this code about ten times now and I can't seem to get the nav bar to work properly when on mobile. It just doesn't work when I click on it.
Edit: We're using React to render the navbar to the page. Added the entire JS file so you can take a look.
var NavLoggedIn = React.createClass({
render: function() {
return (
// <div className ="navcontainer">
// <nav>
// <a href='/index'>Index</a>
// <a href='/pod-search'>POD Search</a>
// <a href='/book-now'>Book Now</a>
// <a href='/current-bookings'>Current Bookings</a>
// <a href='/historic-bookings'>Historic Bookings</a>
// <a href='/contact-us'>Contact Us</a>
// <a href='/pod-profile'>pod profile</a>
// <a href='/my-profile'>My profile</a>
// <a href='/login'>Log In</a>
// </nav>
// </div>
< nav className = "navbar-fixed-top navbar-inverse"
id = "navColor" >
< div className = "container-fluid" >
< div className = "navbar-header" >
< button type = "button"
className = "navbar-toggle collapsed"
data - toggle = "collapse"
data - target = "#navbar"
aria - expanded = "false"
aria - controls = "navbar" >
< span className = "icon-bar" > < /span>
<span className="icon-bar"></span >
< span className = "icon-bar" > < /span>
</button >
< /div>
<div id="navbar" className="collapse navbar-collapse" >
<ul className="nav navbar-nav" id="center myNavbar">
<li id="color" >My Profile </li>
<li>POD Search</li>
<li>Current Bookings </li>
<li>Historic Bookings</li>
<li>Contact Us </li>
<li>Log Out </li>
</ul>
</div>
</div>
</nav>
)}
});
var NavLoggedOut = React.createClass({
render: function() {
return (
<div className ="navcontainer">
<nav>
<a href=' / pod - search '>POD Search</a>
<a href=' / contact - us '>Contact Us</a>
<a href=' / login '>Log In</a>
<a href=' / pod - profile '>pod profile</a>
</nav>
</div>
)}
});
var logged = true;
if (logged) {
ReactDOM.render(<NavLoggedIn />, document.getElementById('
navbar '));
} else {
ReactDOM.render(<NavLoggedOut />, document.getElementById('
navbar '));
}
Also when I click on the hamburger button so many times the nav bar vanishes.
Can anyone help me with this?
I had the same problem and worked for me when I switched the data-target field.
Try using this instead.
<nav class="navbar-fixed-top navbar-inverse" id="navColor">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="center myNavbar">
<li id="color">My Profile
</li>
<li>POD Search
</li>
<li>Current Bookings
</li>
<li>Historic Bookings
</li>
<li>Contact Us
</li>
<li>Log Out
</li>
</ul>
</div>
i'm having trouble centering my branding logo vertically in the center. As of right now my rendered html looks like this:
<a class='navbar-brand' href='#'>
<img alt="brand" height="200%" src="/assets/logo.png" />
If I don't set the height to a size, it will be the full size of the png. But my branding isn't vertically center with the rest of my navbar.
My css for the navbar-brand looks like this:
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
background-color: transparent;
}
What do I need in my css to make this center with the navbar?
This is the full render of the navbar, pulled right from bootstrap docs.
<nav class='navbar navbar-default' role='navigation'>
<div class='container-fluid'>
<!-- Brand and toggle get grouped for better mobile display -->
<div class='navbar-header'>
<button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<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 alt="brand" height="200%" src="/assets/logo.png" />
</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 class='active'>
<a href='#'>Link</a>
</li>
<li>
<a href='#'>Link</a>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Dropdown
<span class='caret'></span>
</a>
<ul class='dropdown-menu' role='menu'>
<li>
<a href='#'>Action</a>
</li>
<li>
<a href='#'>Another action</a>
</li>
<li>
<a href='#'>Something else here</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>Separated link</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class='navbar-form navbar-left' role='search'>
<div class='form-group'>
<input class='form-control' placeholder='Search' type='text'>
</div>
<button class='btn btn-default' type='submit'>Submit</button>
</form>
<ul class='nav navbar-nav navbar-right'>
<li>
<a href='#'>Link</a>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Dropdown
<span class='caret'></span>
</a>
<ul class='dropdown-menu' role='menu'>
<li>
<a href='#'>Action</a>
</li>
<li>
<a href='#'>Another action</a>
</li>
<li>
<a href='#'>Something else here</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
You can try use absolute positioning:
.navbar-brand {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: // half the width of your img
}