I've been struggling to reduce the size of my hamburger menu (both height and width) for some time now. I managed to make it a bit smaller, but I can't seem to figure out how to shrink it further. Additionally, I'm having trouble creating a perfect circle border around it. Can someone please assist me? I modified the code from a codepen but I just can't get it right.
Check out my jsfiddle here: https://jsfiddle.net/annahisenberg/ft10ersb/6/
Here is the JS Code snippet:
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);
}
// Rest of the JS code goes here...
And here's the CSS snippet:
#more_options_button {
/* CSS styles for the button */
}
#more_options_button.open div {
/* Open state styles */
}
/* Additional CSS styles for better appearance */
@keyframes modalFade {
/* Modal animation keyframes style */
}
.more_options_icons {
/* Icon styles */
}
.help_icon_ctnr {
/* Container styles */
}