CSS circular menu

user_19590672 0
Viewed 60

I get some HTML and CSS code. https://codepen.io/lbebber/pen/pvwZJp

.menu-item,
.menu-open-button {
  background: #00bcd4;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  color: white;
  text-align: center;
  line-height: 80px;
  transform: translate3d(0, 0, 0);
  transition: transform ease-out 200ms;
}

I tried to use this code, but I did not succeed pushing the hamburger menu to be at the bottom-left corner. I think something outside the part I copied here is blocking the menu to get it to the bottom.

The second thing, I wanted to use little pictures instead of icons. Do you have an idea how? When I add a picture, I am getting weird behavior.

Thank you for your help in advance.

css html
1 Answers

Code is Fixed!

So in your .menu attribute, I added the following. These attributes move your menu (.menu) in a fixed position in the bottom left of the screen.

position: fixed;
bottom: 0;
left: 0;
z-index: 998;

I removed the margin-left:-80px; as this caused your menu to warp halfway off the left of the screen when I added the other attributes above. So your .menu attribute should look like this when the proper attributes are edited:

.menu{
  @extend %goo;
  $width:650px;
  $height:150px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 998;
  padding-top:20px;
  padding-left:80px;
  width:$width;
  height:$height;
  box-sizing:border-box;
  font-size:20px;
  text-align:left;
}

This resulted (on codepen) with your site looking like this. Of course, the gooey menu opens as shown below. I cannot insert the code into stack overflow as there were issues with layout and content. But if you make the changes to your CSS code above, you can see your menu working

Codepen User Made Website [Codepen User Made Website - 2

user_166696580
Related