HG WEB STUDIO

Filed in: ,

Neon Nav Menu Hover Effects for Elementor

Updated on: June 21, 2024

Table of Contents

In this post, I’ll walk you through how to create a neon nav menu for Elementor with a fun hover effect so you can easily add it to your web designs.

This navigation menu is perfect for modern web designs that prioritize creative and fun aesthetics.

Neon button with CSS Hover Effects svg of arrow pointing right

CSS Neon Nav Menu Demo

See the Pen Nav bar hover with neon text by Kate (@kate_hg123) on CodePen.

HTML Breakdown

In CodePen, I used the ‘<nav>‘ element with the list ‘<ul><li>‘ elements and anchor links ‘<a>‘.

HTML Code using the nav element

<nav class="custom-nav">
    <ul>
        <li><a href="#" class="custom-link" role="link">Home</a></li>
        <li><a href="#" class="custom-link" role="link">Blog</a></li>
        <li><a href="#" class="custom-link" role="link">Podcast</a></li>
    </ul>
</nav>

For the anchor elements, we need to have the following attributes: href, class, and role.

  • href: Defines the destination link. Replace the ‘#’ with your link or anchor.
  • class: Defines the selector to target for styling.
  • role: Defines the purpose of the element for accessibility technologies like screen readers.

Learn more about links at W3Schools.

Learn more about navigation menus at W3Schools.

CSS Breakdown

To style our nav menu, we need to target the class we assigned in the HTML. I’m using .custom-nav. We also need to target the ‘<ul>’ list element to remove the bullet points and padding.

/* Style the nav menu container */
.custom-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 600px;
}

/* Remove Bullets and Padding from list */
ul {
  display: flex;
  gap: 50px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Next, let’s style the links in their normal state.

/* Anchor links in their normal state */
.custom-link {
  position: relative;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

Now we need to create the pseudo-element for the circle pointer hover effect.

/* after pseudo-element in normal state */
.custom-link::after {
  content: '';
  height: 0px;
  width: 10px;
  bottom: -25px;
  left: calc(50% - 5px); /* Subtract half the width of the pointer for centering */
  position: absolute;
  background-color: #faaffa;
  border-radius: 50px;
  transition: all 300ms;
}

Lastly, we need to create the hover effects for the anchor element and the pseudo-element. On hover, the text has a neon glow, and the circle pointer appears.

/* Anchor element hover */
.custom-link:hover {
  color: #faaffa;
  text-shadow: 0 0 10px #faaffa;
}

/* After pseudo-element hover */
.custom-link:hover::after {
  height: 10px;
}

How to create this nav menu in Elementor

Demo of neon nav menu in Elementor

To create this nav menu in Elementor, I’m using the WP menu widget instead of writing my own HTML code. We can write fewer lines of custom CSS by using some of the style settings available in the widget.

For this example, I’ve adjusted some of the properties to fit the styling of the web design, like the spacing, pointer, and font.

Step 1: Add the WordPress menu widget to your canvas and give it some basic styling

Navigate to the menu widget content tab:

  1. Select the appropriate menu from the drop down list.
  2. Set the layout to horizontal.
  3. Set the pointer to underline.

Then, in the menu widget style tab:

  1. Change the typography to match your website (font family, font size, weight, etc.).
  2. Choose the text color. I’m using #fff for normal and #faaffa for hover.
  3. Change the pointer width to 0. Change the pointer hover color to #faaffa.
  4. Adjust the space between property to 12px, or whatever size fits your design.

Lastly, in the menu widget advanced tab:

  1. In the CSS classes box, type in your class selector. I used ‘custom-menu’.

Now let’s write our code.

Step 2: Write the custom CSS in the WordPress Customizer

You can also use the custom CSS area in the advanced tab of the WordPress menu widget. I prefer keeping all my custom code in one place for better management.

Neon nav menu CSS code in WP customizer

In the WP customizer navigate to ‘Additional CSS’

1. Adjust the underline pointer styling so it becomes a circle. We are targeting the Elementor class .elementor-item::after.

/* Underline pointer in its normal state */ 
.custom-menu .elementor-item::after {
    left: calc(50% - 5px) !important;
    height: 0px;
    width: 10px !important;
    border-radius: 50px;
    transition: all 300ms !important;
}

2. Next, create the hover state for the pointer and the text. The pointer grows 10px in height, and the text glows neon pink.

/* Pointer in hover state */
.custom-menu .elementor-item:hover::after {
    height: 10px !important;
    left: calc(50% - 5px);
}

/* Link text in hover state */
.custom-menu a:hover {
    text-shadow: 0 0 10px #faaffa;
}

Publish your changes.

Step 3: Checking for mobile responsiveness in Elementor

Image of nav menu on mobile device with website in responsive mode

Lastly, we need to check our code for mobile responsiveness.

To remove the neon text shadow from mobile, we need to add the following code in the customizer.

/* Removes neon text shadow from all screens smaller than 1024px (tablets and phones) */
@media only screen and (max-width: 1024px) {
    .custom-menu a:hover {
        text-shadow: none;
    }
}

Final Thoughts

Feel free to use my code as is, or play around with the different properties to create a menu that fits your website’s aesthetic. Experiment with the colors and font, and make it yours!

Remember, if you experience any issues or have questions along the way, feel free to drop them in the comments below. I’d love to see your work, and I’m here to help!

Full Code for Neon Nav Menu with CSS Hover Effects in Elementor

/* Underline pointer in its normal state */ 
.custom-menu .elementor-item::after {
    left: calc(50% - 5px) !important;
    height: 0px;
    width: 10px !important;
    border-radius: 50px;
    transition: all 300ms !important;
}

/* Pointer in hover state */
.custom-menu .elementor-item:hover::after {
    height: 10px !important;
    left: calc(50% - 5px);
}

/* Link text in hover state */
.custom-menu a:hover {
    text-shadow: 0 0 10px #faaffa;
}

/* Removes neon text shadow from all screens smaller than 1024px (tablets and phones) */
@media only screen and (max-width: 1024px) {
    .custom-menu a:hover {
        text-shadow: none;
    }
}

Table of Contents

Search

Browse by Category

Leave a Reply

Your email address will not be published. Required fields are marked *