Issue with dropdown with image in bulma

Viewed 686

I am trying to make a dropdown menu with the user image. however either the image is misplaced when I use (1st case), or it is in the right place using only but not rounded as I want (2nd case).

https://imgur.com/a/bJPprXH

I started using the image component as the bulma documentation says. I was going through some classes, I removed the external to . without I can't get the image to be round

1st case:

2nd case:

<div class="navbar-link">
<img src="image">
</div>

i wan this dropdown to be like the second case image but image with rounded shape

1 Answers

Maybe like this?

<div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link">
        <img
           src="https://www.stickpng.com/assets/images/58e91a21eb97430e81906500.png" 
           style= "border-radius: 9001px;"
           alt="Placeholder image"
        >
    </a>
    <div class="navbar-dropdown">
        <a class="navbar-item">
         Jobs
        </a>
    </div>
</div>

https://codepen.io/bluebrown/pen/OJJggMM?editors=1000

Related