Navigation drop down with images using Bootstrap 4 and CSS 3

I'm struggling to turn the image into a drop-down button, but I can't seem to figure it out. I added the dropdown class to the div. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 <nav class="navbar ">
    <div class="dropdown">
      <a class="navbar-brand" href="#">
        <div class="dropdown">
        <img id="navvy" src="https://picsum.photos/30" width="30" height="30" alt="menu" />
        <button class="button">Button</button>
      </div>
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </nav>`

Anyone know a way to convert this image into a drop-down button?

htmlcssbootstrap-4

Answer №1

To create a dropdown button, follow these steps:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 <nav class="navbar ">
    <div class="dropdown">
      <a class="navbar-brand" href="#">
        <div class="dropdown">
        <img id="navvy" src="https://picsum.photos/30" width="30" height="30" alt="menu" />
        <button class="button">Button</button>
      </div>
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </nav>

Answer №2

It's unclear if this solution aligns with your needs, as your problem isn't entirely clear to me. However, if you are utilizing Bootstrap, one possible approach is to set the dropdown link content to an image.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img id="navvy" src="https://picsum.photos/30" width="30" height="30" alt="menu" />
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>


<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <img id="navvy" src="https://picsum.photos/30" width="30" height="30" alt="menu" />
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Answer №3

Here is the code snippet:

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384- 
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
crossorigin="anonymous"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
crossorigin="anonymous"></script>

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" 
aria-haspopup="true" aria-expanded="false"><img id="navvy" 
src="https://picsum.photos/30" width="30" height="30" alt="menu" /></a>
  <div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
  </div>
  </li>
  <li class="nav-item">
  <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
  <a class="nav-link disabled" href="#" tabindex="-1" aria- 
 disabled="true">Disabled</a>
 </li>
 </ul>

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

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...

javascriptjqueryhtmlcss

When will the search bar toggle and the logo appear sliding down?

.navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" in ...

htmlcssfrontendnavigationbootstrap-5

Exploring the World of jQuery Caching and Navigating Through Objects

I'm interested in learning more about jQuery caching and how it can enhance performance. Can you explain how to properly utilize this technique? From what I understand, when using a jQuery selector, you're essentially searching the DOM to create ...

javascriptjqueryhtmldom

Exploring ways to retrieve information stored in localStorage within an android mobile application

I am currently developing an Android App using phonegap. The app is a simple game that generates random numbers for math problems. If the user answers correctly, their score increases, but if they lose, their name and current score are saved in localStor ...

javascriptandroidhtmlphonegap

Creating a Google Captcha with validation is a straightforward process that can enhance the

I am having issues with adding Google Captcha to my form. Despite all fields working properly, the Captcha integration seems to be causing some disruptions. I have included my code below. Thank you in advance for your help. Please also check the following ...

javascriptjquerycsshtmltwitter-bootstrap

Issue with the Bootstrap navbar not responding to clicks for toggle functionality

I have integrated Bootstrap 4 to enable the collapse of dropdown menu on small screens (sm) within my navbar. However, I am facing an issue where the toggling functionality is not working - clicking on the toggle button does not produce any results. I hav ...

asp.net-corebootstrap-4

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

I've been working with a PrimeNG DataView component that requires the use of PrimeFlex's flex grid CSS classes to set up the grid structure. One of their examples includes the following instructions: When in grid mode, the ng-template element ...

cssangulartypescriptprimengprimeflex

Adjusting the layout of a webpage using CSS

I am facing a challenge where I need to adjust the layout of a webpage using CSS for mobile view. Currently, the desktop version has a sidebar floated to the left and a textbox floated to the right. The HTML structure is as follows: <div id="container" ...

csshtmlmobilemedia-queriespage-layout

Tips for achieving vertical alignment of a Bootstrap 4 Carousel slide while it transitions

I am currently working on building a carousel to showcase testimonials, but I am facing some challenges regarding the vertical alignment of the slides. My goal is to have the slides centered when they enter the screen, but currently they start at the top ...

jquerycssbootstrap-4bootstrap-carousel

Exploring ways to integrate Javascript and CSS into a Bootstrap lightbox modal dialog?

Can someone help me figure out how to use the bootstrap lightbox to display a form with specific CSS style and JavaScript code for the form? I'm having some trouble implementing it. I specifically need this setup because I am using Selectize.JS to cr ...

javascriptjquerycsstwitter-bootstraplightbox

Update the display of the mouse pointer

I use CSS to set a custom cursor image: #scroll_up{ display: block; position: absolute; width: 960px; height: 300px; cursor: url(../imgs/cursor_up.png), auto; } The above style is assigned to a div element so that the cursor appea ...

cssattributescursor

How to Customize Button Background Color in Bootstrap 5 Navbars

I tried to adjust the background color of a button within a bootstrap navbar, but I couldn't get it to change completely. How can I fix this issue? See below for the code snippet: <div class="container-fluid"> <nav class=" ...

htmlcssbootstrap-5

The iframe failed to load on the external server

I'm working on a website where the admin can upload PDF files that will be displayed on an HTML page. I'm using an iframe to achieve this, and it works perfectly fine on my local server. However, when I tried uploading it to the remote server, it ...

phphtmlcodeigniteriframe

Wait for the Selenium test to continue only when a specific element is visible on

<img style="width: 640; height: 640;" id="img108686545" alt="Loading Word War..." src="www.something.com/anu.jpg"> Is there a way to detect when this particular element is visible on the page? The value of the "id" attributes keeps changing with eac ...

pythonhtmlseleniumbeautifulsoup

Tips for organizing a dashboard design with Bootstrap

I am looking to design a dashboard using the Bootstrap grid system. Here is the layout I have in mind: https://i.sstatic.net/cqWP5.jpg What would be the optimal way to structure this in the HTML file? Would a layout of 5 rows and 2 columns work best? Th ...

htmlbootstrap-5

Removing div elements containing specific text using jQuery

Hello everyone, I am trying to remove all divs that contain a specific part of a string. Does anyone know how I can do this? This is what my original HTML looks like: <div class="article-options_4"></div> And this is the new HTML structure, ...

javascriptjqueryhtmlajax

Update the image and heading simultaneously when hovering over the parent div

I am looking to enhance the user experience on my website by changing the color of headings and images when a user hovers over a specific section. Currently, I have been able to achieve this effect individually for each element but not simultaneously. Any ...

javascriptjquerycsshover

PHP: I am unable to establish a connection with the script or submit form data to mySQL

Seeking assistance with debugging this script. (The * represents confidential information that I am aware of but cannot share) <?php $dbhost = '*********'; $dbuser = '*********'; $dbpass = '*********'; $conn = mysql_conne ...

phpmysqlformshtml

Utilizing jQuery to generate dynamic nested divs within the ul li tags

I am looking to dynamically generate nested divs within a ul li. The goal is to create the following structure programmatically: <ul> <li> <div class="videoThumbnail"> <img src="./img6.jpg" /> &l ...

javascriptjqueryhtmlcss

In the event that conflicting media queries take precedence over one another

I developed a set of queries for a particular element on a landing page. Here is the HTML structure: <div class="hsContent"> <article> This is my amazing content. Wow! </article> </div> This is how the initial styling looks fo ...

htmlcssmedia-queries