Position the image to the right of the dropdown menu in Bootstrap

While working with Bootstrap to create a top navbar on my webpage, I encountered some issues:

Once the navbar dropdown is opened, I need to display an option list alongside an image positioned to the right of the list. The image should be the same height as the list, similar to what is shown in the provided image.

I managed to achieve this by setting fixed dimensions for the image, but the problem arises when the list expands beyond those set dimensions.

Another approach I considered was incorporating a div that includes both the list and the image, then setting the image size to 100%. However, upon doing this, the dropdown functionality seems to break (presumably due to interfering with Bootstrap's structure for toggling the dropdown). Am I correct in assuming this?

How can I successfully implement this solution?

https://i.stack.imgur.com/pmbRS.png

<div id="navbar" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav top-elements">
                <li id="dropdown-produtos" class="dropdown">
                    <a href="#" class="dropdown-toggle text-uppercase top-text" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Nossos Produtos<span class="caret top-caret"></span></a>
<!-- div was here --> <ul class="dropdown-menu dropdown-menu-produtos">
                        <li class="dropdown-item-active">
                            <a href="#" class="dropdown-item-description">texto1</a>
                            <ul class="dropdown-menu img-dropdown">
                                 <img src="assets/img.png"> 
                            </ul>
                        </li>
                        <li class="dropdown-item">
                            <a href="#" class="dropdown-item-description">texto2</a>
                        </li>
                        <li class="dropdown-item"><a href="#" class="dropdown-item-description">texto3</a></li>
                        <li class="dropdown-item"><a href="#" class="dropdown-item-description">texto4</a></li>
                        <li class="dropdown-item"><a href="#" class="dropdown-item-description">texto5</a></li>
                    </ul>
                </li>
            </ul>
</div>
htmlcsstwitter-bootstrap

Answer №1

Here is a solution that should do the trick:

  <ul class="nav navbar-nav">
       <li><a href="#">Element 1</a></li>
       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">DropDown<span class="caret"></span></a>
           <ul class="dropdown-menu another-class">
               <!-- ROW -->
               <div class="col-md-12">
                   <!-- Column 1 -->
                   <div class="col-md-6">
                      <ul class="list-unstyled">
                         <li><a href="#">Text 1</a></li>
                         <li><a href="#">Text 2</a></li>
                         <li><a href="#">Text 3</a></li>
                      </ul>
                    </div>
                    <!-- Column 2 -->
                    <div class="col-md-6">
                        <div class="drop-image">
                           <img src="./img/img.jpg" class="img-responsive" />
                        </div>
                    </div>
               </div>
           </ul>
       </li>
       <li><a href="#">Element 2</a></li>
       <li><a href="#">Element 3</a></li>
   </ul>

The concept behind this code is to create a full-width div within a dropdown element in Bootstrap. Inside this row, two columns are added using Bootstrap's col-md-6 class. Content can be inserted inside these columns as needed.

In column 2, there is a special class "drop-image" which can be used to customize the image within it.

Hopefully, this explanation clarifies things for you!

Additionally, remember to style your dropdown (as shown with the class "another-class" in the example) to define its position and width accordingly.

Answer №2

If you're facing an issue, this solution might help you out. It utilizes the following plugin: Yamm3!. Take a look at the example Snippet below.

In case you need to adjust the width of the dropdown due to longer link text, make changes to this CSS rule:

.list-unstyled, .list-unstyled ul {
    min-width: 180px
}


body {
  padding-top: 60px;
  color: #666;
}
/* menu styes */

.list-unstyled,
.list-unstyled ul {
  min-width: 180px
}
.list-unstyled > li {
  padding-top: 10px;
}
.list-unstyled > li > a {
  color: #555;
  text-decoration: none;
}
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .container {
  position: relative;
}
.yamm .dropdown-menu {
  left: auto;
  background: #f5f5f5;
}
.yamm .yamm-content {
  padding: 0 30px 10px 30px;
}
.yamm .yamm-content .nav-title {
  margin-left: 15px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}
@media (max-width: 767px) {
  .yamm-content .list-unstyled > li img {
    margin-top: -180px;
    float: right;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar yamm navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

      </button><a href="#" class="navbar-brand">Grande Menu</a>

    </div>
    <div id="navbar-collapse-1" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <!-- Classic list -->
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Our Products<b class="caret"></b></a>

          <ul class="dropdown-menu">
            <li>
              <!-- Content container to add padding -->
              <div class="yamm-content">
                <div class="row">
                  <h4 class="nav-title"><strong>Starting from scratch</strong></h4>

                  <ul class="col-sm-4 list-unstyled">
                    <li><a href="#">Linking one</a>

                    </li>
                    <li><a href="#">Connecting two</a>

                    </li>
                    <li><a href="#">Three-way link</a>

                    </li>
                    <li><a href="#">Four connection</a>

                    </li>
                    <li><a href="#">Link five</a>

                    </li>
                    <li><a href="#">Sixth link</a>

                    </li>
                  </ul>
                  <ul class="col-sm-2 list-unstyled">
                    <li>
                      <img src="http://placehold.it/150x150/ff0/fff">
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav">
        <!-- Classic list -->
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Our Products Two<b class="caret"></b></a>

          <ul class="dropdown-menu">
            <li>
              <!-- Content container to add padding -->
              <div class="yamm-content">
                <div class="row">
                  <h4 class="nav-title"><strong>Starting from scratch</strong></h4>

                  <ul class="col-sm-4 list-unstyled">
                    <li><a href="#">Linking one</a>

                    </li>
                    <li><a href="#">Connecting two</a>

                    </li>
                    <li><a href="#">Three-way link</a>

                    </li>
                    <li><a href="#">Four connection</a>

                    </li>
                    <li><a href="#">Link five</a>

                    </li>
                    <li><a href="#">Sixth link</a>

                    </li>
                  </ul>
                  <ul class="col-sm-2 list-unstyled">
                    <li>
                      <img src="http://placehold.it/150x150/ff0/fff">
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="container">
  <div class="alert alert-warning">Hello</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the dropdown menu title dynamically based on the selection made in Angular

My Angular web-application has a dropdown menu that looks like this: <div class="btn-group" dropdown> <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">NAMEOFDROPDOWN <span class="caret"></span>&l ...

htmlangulartypescriptdropdown

Is there a way to create a dynamic CSS for a custom JSF component through code generation?

I am currently developing a custom JSF component that displays content in multiple columns in a "responsive" manner. This component utilizes the "CSS Multi-column Layout Module" (http://www.w3.org/TR/css3-multicol/) (tutorial available in French: ). Belo ...

htmlcssjsfjsf-2

What could be causing certain link titles to appear outside of my <a> tags?

Check out this jsbin link to see the issue I am facing. I noticed that some of my link titles are appearing outside the anchor tags. Initially, I thought it was because some titles were enclosed in double quotes. I tried creating a function to fix this, b ...

javascripthtmlajaxjson

Guide to presenting pictures from a database using PHP

Currently, my application is able to successfully upload images by saving the file location in a MySQL database. However, I am now facing an issue when trying to display these uploaded images. Below is the code snippet causing problems: include ('co ...

phphtmlmysql

Continuously encountering the "Uncaught Error: Bootstrap dropdown requires Popper.js" message despite having already added popper.js to the code

Recently beginning my journey with Angular and Bootstrap, I decided to create a simple "hello world" app. I've included all the necessary libraries, but I encountered an error that has me stuck. Error: Bootstrap dropdown requires Popper.js I' ...

javascriptjqueryangularjstwitter-bootstrap

Tips for Aligning Form Elements in the Middle using Bootstrap

What could be the issue? I can clearly see the container border, indicating the space available for my work. However, when I insert the row (div) and offset (div), the content gets left-justified. <div id="page" class="container" style="border:soli ...

csstwitter-bootstrap

Using jQuery to animate two images simultaneously in opposite directions

Trying to make two images animate using a single function. The issue is that one image needs to animate the left attribute while the other needs to animate the right. Here's what I have so far: $(document).ready(function(){ v ...

jquerycsspositioningjquery-animate

Ensure that only a single onmouseover event is triggered when hovering over multiple elements

I want to create a simple code snippet like the one below: <span onmouseover="alert('hi')">Hello, <span onmouseover="alert('hello')">this</span> is a test</span> However, I need to ensure that when hovering ove ...

javascripthtml

Is it possible for .getElementByClassName to identify Ajax.GET elements?

I've run into a problem that I need help with: The issue arises when I have an API that makes an Ajax GET request. In the success function, it creates a button, a div, and several span elements with information inside, each with its own class. The GE ...

javascripthtmlajax

Incorporating the Results of a Script into TinyMCE with the Help of

Recently, I developed a script for creating a basic table layout structure. To enhance its functionality, I decided to integrate AJAX with jQuery in order to input the output of the script into a TinyMCE textarea. The PHP script itself works seamlessly whe ...

phpjqueryhtmlajaxtinymce

The modal popup will appear in the center of the screen when the scrollbar is positioned at the top

I have a modal popup that is not consistently displayed in the center of the screen, regardless of the scrollbar position. I always want it to render at the center so the user doesn't need to scroll to see it. Below is the code I am currently using: ...

javascriptphpjqueryhtmlcss

What is the best way to use regex to target only the content within a particular set of tags?

While there have been numerous similar inquiries posed before, mine pertains to a specific selection within the tags. I am not interested in extracting the entire content between <a href and </a>, but rather just targeting the "> within th ...

htmlregexbashsedpcre

having difficulty showing the primary content page

I'm having trouble displaying a header, side navigation bar, and main content on my page with the code below. Instead of showing anything, I keep getting a parse error: unexpected end of file. What could be causing this issue? <!doctype html> ...

phphtml

Show ng-message when email is invalid in Angular Material without using ng-pattern

I need to show an error message that says Please enter valid email. when an invalid email is entered, but I cannot use the ng-pattern attribute with this specific regex pattern. <md-input-container class="md-block" flex-gt-xs> <label>Ema ...

htmlangularjsangular-material

Hover events in the browser are currently operating at a sluggish pace

When I hover over a photo, an overlay is supposed to appear. However, if I move the mouse quickly (from the top to the bottom of the page, for example), the overlay remains visible even after I stop hovering over the photo. I have tried different event ha ...

cssreactjshover

Steps for generating a sophisticated shadow effect using CSS

Currently in the process of revamping a poorly designed website by replacing images with CSS whenever possible, along with other updates. I have encountered a challenging graphic (there are three of these, one for each active tab): Take note of how the sh ...

htmlcss

Using Html.BeginForm to route to a Web Api endpoint

I need help figuring out how to make my page post to my Web API controller instead of my Area/Controller/Action. I've tried using both Html.BeginForm and Ajax.BeginForm, but haven't had any success so far. Here's what I've attempted: @ ...

c#htmlasp.net-mvcasp.net-web-api

Easily updating a SQL row with the click of an HTML button using PHP

I am in the process of creating a basic comment system that includes a rating for each comment. After reading a comment, users will be asked if they liked it with two options, "Yes" and "No". I am seeking a straightforward method to update the number of ...

phphtmlmysql

CSS - Layering new DIVs over existing DIVs

My goal is to implement "vertical-align: bottom;" in order for the DIVs to align from the bottom of the wrapper/parent DIV to the top. However, I am facing an issue where I want the first DIVs to be displayed at the bottom, rather than at the default top p ...

htmlcssflexbox

Tips on showcasing jQuery autocomplete suggestions on different fields?

Seeking assistance with jQuery and autocomplete as a newcomer to the technology. Despite extensive research, I am struggling to understand how to showcase query results on a website. The code below is nearly identical to the example on the jquery autocomp ...

jqueryhtmljquery-uiautocomplete