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.

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Join our Mastery Membership

Group Support, Private Facebook Group, and Site Reviews.