Elementor WordPress Tutorial – Reveal a Menu by Hovering on an Icon with No Close Button Required.

Let’s add an Icon and enable a Menu to appear by hovering with some code.

Add the below code to the HTML Widget:

<nav>
  <div class="navicon">
    <div>
        <i class='fa fa-navicon';
        style="color: #ffffff;
        font-size: 2REM";></i>

    </div>
  </div>

<a href="https://websquadron.co.uk">Home</a>
<a href="https://websquadron.co.uk/About">About</a>
<a href="https://websquadron.co.uk/Services">Services</a>
<a href="https://websquadron.co.uk/Contact">Contact</a>
</nav>

Then go to Advanced, and add this CSS Code;

nav {
  width: 200px;
  background: #00000000;
  color: #ffffff; /*Font colour*/
  padding-bottom: 20px;
  font-family: Raleway;
  font-weight: 600;
  font-size: 1.2REM;
  -webkit-clip-path: circle(24px at 30px 24px);
}

nav:hover {
      background: #00000099;
  transition-timing-function: ease-out;
  transition-duration: 0.75s;
  -webkit-clip-path: circle(400px);
}

a {
  display: block;
  line-height: 3REM;
  padding: 0 20px;
  color: inherit;

}

a:hover { background: #222222;
        color: #ffffff; }

.navicon {
  padding: 10px;
}

To refine the position; go to Advanced; then to Positioning, and then choose Absolute or Fixed and position it.