1

I am trying to use an image (thumbnail image in navbar) as a Bootstrap dropdown. I tried the solution in How do I make an image a dropdown?, but it didn't work.

The image will be the user's thumbnail image when logged in and I want a drop down for user settings, logout, etc.

BestCoderBoy
  • 186
  • 13
ReeseB
  • 297
  • 1
  • 3
  • 23

3 Answers3

2

I tried it once again and checked out meetup dot com. I got the dropdown while clicking the image without the background but i could not find a way to add the caret.

<div class="container">
    <div class="dropdown">
        <img class="btn dropdown-toggle" src="images/thumbnail_image.png" alt="dropdown image" data-toggle="dropdown" class="img-responsive">
        <ul class="dropdown-menu">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Log Out</a></li>
            <li><a href="#">Dropdown menu 3</a></li>
        </ul>
    </div>
</div>

Hope this helps :)

Pragyakar
  • 642
  • 6
  • 15
  • P.S. Just saw the code in your reply. Looks good. Glad i could help. :) – Pragyakar Sep 04 '16 at 05:49
  • This works but I still get a white border/background when I click the image. I am using the img-responsive and the img-circle for the image. – ReeseB Sep 06 '16 at 15:59
1

The solution is quite simple. All you have to do is use an 'img' tag between the button tags.

<div class="container">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
            <img src="images/example_image.png" alt="dropdown image" class="img-responsive">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Log Out</a></li>
            <li><a href="#">Dropdown menu 3</a></li>
        </ul>
    </div>
</div>

If you still have problems, please attach your code along with you question. Hope this helps.

Pragyakar
  • 642
  • 6
  • 15
  • This adds a button outline around my image. I just want my thumbnail image with a caret to the right as the drop down, no button. Like the way it is done on meetup dot com. – ReeseB Sep 03 '16 at 21:20
0

I have it the way I want by doing the following but there is no hand pointer on mouse over, I have to add the pointer style and I get a white background behind my image when I click for the drop down. Now I need to correctly style the drop down toggle to fix this. Thanks for your reply.

                        <li class="side-padded margin_left">
                        <div class="dropdown top_margin15">
                            <a class="dropdown-toggle" data-toggle="dropdown">
                                <?php
                                echo '<img id="profile-img" class="img-circle img-responsive" src="'.base_url().'i/mbr/img/'.$this->auth_user_id.'.jpeg">';
                                ?>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Settings</a></li>
                                <li><a href="#">Log Out</a></li>
                                <li><a href="#">Dropdown menu 3</a></li>
                            </ul>
                        </div>
                    </li>
ReeseB
  • 297
  • 1
  • 3
  • 23