我怎样才能让我的汉堡菜单更小，并在它周围有一个完美的圆形边框？

Question

I'm trying to make my hamburger menu smaller (both height and width), and I've been trying for awhile and made it a bit smaller but for some reason can't figure out how to make it any smaller. I also am struggling with trying to make a perfect circle border around it. Can someone help me out? I found this code in a codepen and have adjusted it a bit, but I'm struggling to make it just right.

jsfiddle: https://jsfiddle.net/annahisenberg/ft10ersb/6/

JS Code:

class Drag extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: this.props.x,
      y: this.props.y,
      showMoreOptionsPopup: false,
      showHelpModal: false
    };

    this.reff = React.createRef();

    this.dragMouseDown = this.dragMouseDown.bind(this);
    this.elementDrag = this.elementDrag.bind(this);
    this.closeDragElement = this.closeDragElement.bind(this);
    this.showMoreOptionsPopup = this.showMoreOptionsPopup.bind(this);
  }


  componentDidMount() {
    this.pos1 = 0;
    this.pos2 = 0;
    this.pos3 = 0;
    this.pos4 = 0;
  }

  dragMouseDown(e) {
    e.preventDefault();
    this.pos3 = e.clientX;
    this.pos4 = e.clientY;
    document.onmouseup = this.closeDragElement;
    document.onmousemove = this.elementDrag;
  };

  elementDrag(e) {
    e.preventDefault();
    this.pos1 = this.pos3 - e.clientX;
    this.pos2 = this.pos4 - e.clientY;
    this.pos3 = e.clientX;
    this.pos4 = e.clientY;
    this.setState({
      y: this.reff.current.offsetTop - this.pos2 + "px",
      x: this.reff.current.offsetLeft - this.pos1 + "px"
    });
  };

  closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  };

  showMoreOptionsPopup() {
    this.setState({
      showMoreOptionsPopup: !this.state.showMoreOptionsPopup
    });
  };

render() {
    return (
      <div>
        {this.state.showMoreOptionsPopup && (
          <div
            id="more_options_popup"
            style={{
              left: this.reff.current.offsetLeft - 170 + "px",
              top: this.reff.current.offsetTop - 130 + "px"
            }}
          >
           <p>Help Doc</p>
           <p>Help Doc 2</p>
           <p>Help Doc 3</p>
          </div>
        )}

            <a
          id="more_options_button"
          className={this.state.showMoreOptionsPopup ? 'open' : null}
          onClick={this.showMoreOptionsPopup}
          style={{ left: this.state.x, top: this.state.y }}
          onMouseDown={this.dragMouseDown}
          ref={this.reff}
        >
          <div></div>
        </a>
      </div>
    );
  }
}

css:

#more_options_button {
    display: block;
    /* position: absolute; */
    width: 50px;
    height: 50px;
    /* top: 50%; */
    /* left: 50%; */
    position: fixed;
    bottom: 149px;
    right: 63px;
    cursor: pointer;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

#more_options_button.open div {
    background: none;
}

#more_options_button.open div:before, #more_options_button.open div:after {
    top: 0;
}

#more_options_button.open div:before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#more_options_button.open div:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* #more_options_button:hover:not(.open) div:before {
    top: -10px;
}

#more_options_button:hover:not(.open) div:after {
    top: 10px;
} */

#more_options_button div,
#more_options_button div:before,
#more_options_button div:after {
    width: 100%;
    height: 4px;
    background: #222222;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease; 
}

#more_options_button div {
    position: relative;
    margin: 20px auto 0;
}

#more_options_button div:before, div:after {
    content: "";
    position: absolute;
}

#more_options_button div:before {
    top: -20px;
}

#more_options_button div:after {
    top: 20px;
}


@keyframes modalFade {
      from {transform: translateY(-50%);opacity: 0;}
      to {transform: translateY(0);opacity: 1;}
}

#more_options_popup {
    position: absolute;
    /* bottom: 201px; */
    /* right: 66px; */
    text-align: right;
    z-index: 9999;
    animation-name: modalFade;
    animation-duration: .3s;
}

#more_options_popup p {
    cursor: pointer;
}

.more_options_icons {
    border-radius: 50% !important;
    border: 1px solid black;
    height: 1.5rem;
    width: 1.5rem;
    text-align: center;
}


#close_help_modal {
    z-index: 9999;
}

.help_icon_ctnr {
    display: flex;
}

.help_popup_grid_col {
    border-right: none !important;
}

.help_popup_grid_col p {
    margin-right: 1rem;
}

Answer 1

You'd have to tweak all of the appropriate CSS properties to get the size you're looking for. You have them spread out over a lot of different rules and are using absolute positioning/margins in a strange way so it's not straightforward, but I made a basic attempt here

You need to reduce the width of the main menu div, the height of its pseudo elements, as well as reduce their margin and the margins you're using to position it inside the div, then add a border.