Adding an Image to Bootstrap Dropdowns
What would be the best way to add an image to the dropdown in the default navigation bar in Bootstrap3. I would like to recreate the layout in the image below, where the image fills to the right of the items in the dropdown. Any thoughts?
EDIT: I'm planning on hiding the image on mobile for better usability, so I'm only looking for this desktop layout.
Here's the violin where I am now
.dropdown-menu {
padding-right: 150px; /* width of img */
position: relative;
}
.dropdown-menu:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 150px; /* width of img */
background: url(http://placehold.it/150x220) center;
background-size: cover;
}
source to share
His job! See the Fiddle demo!
Screenshot Demo
Html
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">Brand</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 href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown with Image 1 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Menu Item 1</a>
<img src="http://placekitten.com/g/200/300" class="navimg">
</li>
<li><a href="#">Menu Item 2</a>
</li>
<li><a href="#">Menu Item 3</a>
</li>
<li><a href="#">Menu Item 4</a>
</li>
<li><a href="#">Menu Item 5</a>
</li>
<li><a href="#">Menu Item 6</a>
</li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown with Image 2 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Menu Item 1</a>
<img src="http://placekitten.com/g/200/300" class="navimg">
</li>
<li><a href="#">Menu Item 2</a>
</li>
<li><a href="#">Menu Item 3</a>
</li>
<li><a href="#">Menu Item 4</a>
</li>
<li><a href="#">Menu Item 5</a>
</li>
<li><a href="#">Menu Item 6</a>
</li>
</ul>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
CSS
.dropdown-menu {
padding-right: 150px;
/* width of img */
position: relative;
}
.dropdown-menu:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 150px;
/* width of img */
background: url(http://placehold.it/150x220) center;
background-size: cover;
}
.nav .dropdown-menu ul {
position:relative;
overflow:auto;
}
.navimg {
position:absolute;
top:0;
right:0;
height:100%;
}
.dropdown-menu {
position: absolute;
}
source to share
Have you tried setting the parent .dropdown-menu: after , try adding something like this after the Adam CSS:
.dropdown-menu:after < li:nth-child(1){ background: url(1st) center }
.dropdown-menu:after < li:nth-child(2){ background: url(2nd) center }
.dropdown-menu:after < li:nth-child(3){ background: url(3rd) center }
//etc
I haven't tried it, but I find this to be a good solution.
source to share
You have a bulletproof example here:
HTML markup:
<div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu imaged_menu" role="menu" aria-labelledby="dLabel">
<div class="col-lg-6 col-xs-6 fulllist">
<li><a href="#">Longer menu item</a>
</li>
<li><a href="#">More longer menu item</a>
</li>
<li><a href="#">More more longer menu item</a>
</li>
<li><a href="#">More more more longer menu item</a>
</li>
<li><a href="#">More more more more longer menu item</a>
</li>
<li><a href="#">Longer menu item</a>
</li>
<li><a href="#">More longer menu item</a>
</li>
<li><a href="#">More more longer menu item</a>
</li>
<li><a href="#">More more more longer menu item</a>
</li>
<li><a href="#">More more more more longer menu item</a>
</li>
<li><a href="#">Longer menu item</a>
</li>
<li><a href="#">More longer menu item</a>
</li>
<li><a href="#">More more longer menu item</a>
</li>
<li><a href="#">More more more longer menu item</a>
</li>
<li><a href="#">More more more more longer menu item</a>
</li>
</div>
<div class="col-lg-6 col-xs-6 imagebox">
<img src="http://blog.templatemonster.com/wp-content/uploads/2012/10/Bootstraps.jpg" alt="" />
</div>
</ul>
</div>
Then the CSS markup:
/* CSS used here will be applied after bootstrap.css */
.imaged_menu {
white-space: nowrap;
}
.imagebox {
padding:0 2%;
}
.imagebox img {
max-height:100%;
max-width:100%;
}
/* let hide image ----------- */
@media only screen and (max-width : 768px) {
.imagebox {
display:none !important
}
}
As you will notice with the other answers, they all fail at some point because they are trying to use Bootstrap and nothing else, thus suffering from resizing. With this approach, Bootstrap is only used for basic deployment, then we add a little HTML markup to fine tune the elements, and then just use regular CSS. Try resizing and you will see how it behaves EXACTLY as you requested without major changes. And yes, the image disappears whenever you want.
All of this is to say that this is one of the basic scaffolding examples, so you'll probably need to tweak some media query sizes or keypoints, but you get the idea
source to share
You will do the following:
.dropdown-menu {
padding-right: 100px; /* width of img */
position: relative;
}
.dropdown-menu:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100px; /* width of img */
background: url(YOUR URL) center;
background-size: cover;
}
The trick is pretty simple. You expand the padding on the right to create space for the element, and then create a pseudo element after it with your image.
If you want it to only appear on the desktop, just wrap it right @media query.
source to share
Try this: download link ( updated )
HTML:
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<div class="col-md-10">
<li><a href="#">Longer menu item</a></li>
<li><a href="#">More longer menu item</a></li>
<li><a href="#">More more longer menu item</a></li>
<li><a href="#">More more more longer menu item</a></li>
<li><a href="#">More more more more longer menu item</a></li>
</div>
<div class="col-md-2 image .hidden-xs .hidden-sm">
<img src="http://placehold.it/150x220">
</div>
</ul>
</div>
Add .hidden-xs and .hidden-sm class for display on small devices
CSS
.image {
position:relative;
right:0px;
padding:0 5px;
margin:0;
}
.image img {float:right;}
source to share