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

The sign-up button mysteriously vanishes after the page is refreshed

I am encountering an issue with the sign up button during the user registration process. There is a checkbox for Terms & Conditions, and the button should only become enabled after checking this box. Everything seems to be functioning correctly, but when I ...

javascriptjqueryhtmlangularjs

Ensuring a div remains perfectly centered

Currently, I am new to HTML and still in the process of learning. I am facing a challenge in centering a button within a div, and I have been using margins to position it. While this method works well when the window is fullscreen, the button's positi ...

htmlcssbutton

The first-child and last-child selectors are not working properly in the CSS

In the family of elements, the first child should proudly show off the image icon for home while the last child remains humble without any background imagery: Check out the evidence here: http://jsfiddle.net/gUqC2/ The issue at hand is that the first chi ...

css

Adjust the content of an iframe based on the size of the screen

Hi there, I'm currently facing an issue with an ad that can't be resized. The support team suggested using two different ads - one for mobile and one for desktop. The dimensions of the ads are 720 x 90 and 300 x 100. I would like the ad to automa ...

javascriptjquerycssiframeads

Change the z-index of divs when clicked

When a button is clicked, I want to iterate through a group of absolutely positioned children divs with varying z-indexes. The goal is for the z-index of the currently visible div to decrease on each click, creating a looping effect where only one div is v ...

javascriptjquerycss

Encountered a 404 error when attempting to deploy create-react-app due to failed resource loading

Any assistance would be greatly appreciated. Thank you! Although my website runs smoothly locally, I am encountering issues when trying to deploy it in a production environment. Upon executing npm run deploy, the expected outcome is an automatic build for ...

javascripthtmlnode.jsreactjsdeployment

Tap on the image placeholder to replace it with your own image

Just starting out, I have the following HTML code within a <form>: <div class="image-upload"> <img id="send_photo_img1" src="assets/images/index2.png"/> <input id="send_photo_input1" type="file"/> <img id="send_photo_img2" sr ...

jquerycss

Leveraging Spotify's webAPI to listen to a randomly selected album by a specific artist (ID

Welcome to my little project! As I am not a developer myself, please bear with me for any silly questions that may arise. My idea is to create an "audio book machine." The concept involves using a website that showcases various artists of audiobooks. Upo ...

htmlnode.jsasp.net-web-apiraspberry-pispotify

Issues with Media Queries on Desktop Devices

I've encountered an odd issue with my media queries. While they function properly on my mobile devices, resizing my desktop browser doesn't seem to trigger the changes. This prevents me from inspecting my mobile styles using web inspector/firebug ...

htmlcssmedia-queries

Modify the color of links when hovering using CSS

I am currently utilizing VScode and attempting to modify the link color on :hover. I am also interested in adding a grow Hover Effect. Here is my code snippet: .subareas a.link { margin: 0 0 10px 10px; float: right; height: 30px; line-height: 29 ...

htmlcsshovermousehover

Switch the CSS class for the currently selected link

There are 5 links on the page. When I click on each link, it changes color. However, when I move my cursor to another area of the page, the active link loses focus and I can't show its current state. Can you please advise me on how to fix this issue? ...

htmlcss

The beautiful synergy between Vuetify's v-input component and overflow animation

I am having trouble implementing an overflow animation on vuetify's v-text-field component. Despite my efforts, I can't seem to make it work as intended: <script setup> const text = 'very long long long long long text' </scri ...

cssvue.jsvuetify.jsvuetifyjs3

What are the steps to update your profile picture using Angular?

In my Angular 6 application, I am implementing an image upload feature with the following code: Html: <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> <br/> <input type='file' (change)="onSelec ...

javascripthtmlcssangulartypescript

What could be causing the span tag to not have CSS applied and the background image to not be displaying

The header I have created, shown in the image, is facing two issues. Firstly, I am unable to add ellipsis to the span tag even though I used it. I want the ellipsis to appear when the screen resolution is small. Secondly, the image uploaded is not displayi ...

jqueryhtmlcss

Leveraging CSS to automatically number nested sections

Assume we have an example HTML or XML document structured like this: <body> <section> <h1>This should be numbered 1</h1> <section> <h1>This should be numbered 1.1</h1> <p>blah& ...

htmlcsscss-counter

Selecting the appropriate technology or library for incorporating user-defined text along a designated path within established areas

I am currently developing an admin dashboard with CodeIgniter 2 that allows the admin to upload custom images, particularly ones with blank spaces for text overlay. The goal is to enable regular users to add their desired text in specific areas defined by ...

phpjavascripthtmlsvgraphael

Populating Dropdown list with values based on input provided in Textbox

Can you assist me in finding the solution to this issue? I have a TextBox and a DropDown list. For example, if I type "Anu" into the textbox, I want it to populate the dropdown list based on the text entered. How can I achieve this? I am working with vb. ...

javascripthtmlasp.netvb.net

React Material-UI select component malfunctions when I enclose the menu item within a Tooltip wrapper

Here is a snippet of my code: return( <FormControl sx={{ m: 1, minWidth: 80 }}> <InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel> <Select labelId="demo-simple-select-autowidt ...

javascripthtmlreactjsmaterial-ui

What is the reason behind loading two srcset images?

When it comes to creating responsive web templates, I make use of the srcset attribute in order to load different images based on the current viewport size. This has been working well overall. However, in production mode, the images are fetched from a Digi ...

htmlimageperformanceresponsive-imagessrcset

Is it possible to customize the deep elements of ExpansionPanelSummary using styled-components in React?

After digging into the documentation and examples on how to customize Material UI styling with styled-components, I successfully applied styling to the root and "deeper elements" within an ExpansionPanel and ExpansionPanelDetails. However, when attempting ...

javascriptcssreactjsmaterial-uistyled-components