Elementor Pro

Elementor Pro – Mobile Nav Menu Styling

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

This tutorial shows you how to add text next to the “hamburger” menu and how to style it.

Adjust the CSS values to suit.

.elementor-menu-toggle:before {
    position: relative;
	content: "Menu";
    padding-right: 10px;
    bottom: 3px;
    color: red;
}
Add text before icon and set color

Set the background color to transparent and the icon bars to red.

.elementor-menu-toggle {
    color: red;
    background-color: transparent;
}
Transparent background with red bars

 

18 thoughts on “Elementor Pro – Mobile Nav Menu Styling”

  1. Genevieve Reid

    Is there a way I can remove the 3 lines and just have the words ‘menu’ ? Thanks in advance!

    1. Sniffle Valve

      Hi Genevieve,

      To remove (hide) the three lines (hamburger menu), use this CSS:

      .elementor-menu-toggle i::before {
      display: none;
      }

      Cheers!
      Lyle

  2. I’m having trouble getting this to work on my website, I used simple css, added the code and the changes do not show up on mobile. Any idea what the issue would be?

    1. Sniffle Valve

      Hi Dean,
      Have you cleared all your caches? If you are running a cache plugin make sure to clear that one as well. Same if you are using a CDN like Cloud Flare; that should be in Developer Mode when making changes. Caching is the most likely issue.
      Cheers!
      Lyle

  3. Hi Sniffle Valve,

    I don’t believe caches are the issue, I don’t have any caching plugins active yet and I have not setup a CDN yet. I’ve tried purging the cache with the built-in WP cache purge option but I still don’t get text for my mobile menu. I have three menus in my header. Two are for desktop and tablet only with mobile hidden, the third is visible on mobile only and that is the one I want the text on. I’ve used the elementor pro nav menu widget, but this css does not add the text beside my mobile menu. I still just the get the burger menu dead centre, no text.

    1. Sniffle Valve

      Try adding a CSS ID to the nav widget for mobile. In this example, I used mobile-nav

      #mobile-nav .elementor-menu-toggle:before {
      position: relative;
      content: “Menu”;
      padding-right: 10px;
      bottom: 3px;
      color: red;
      }

      #mobile-nav .elementor-menu-toggle {
      color: red;
      background-color: transparent;
      }

      Tried it on a local test site and it works fine. Also make certain that you have copied and pasted the CSS correctly 🙂

  4. Hey Lyle,

    I appreciate you trying to help me through this. Unfortunately, the revised code did not work, I copied and pasted everything you had right into simple CSS, saved it, purged the cache, refreshed the page holding the shift key, and even tried loading the site in MS Edge, but still no “menu” text. The website I’m trying this on is, deancentgarage.com

    Can’t figure this out, been trying since last night. I even tried creating a global widget/template with two columns as you showed in another video but that didn’t work correctly on mobile, the two elements showed up on separate lines, menu text above the burger menu icon.

    1. Sniffle Valve

      I am only seeing the second block of CSS when I use Firefox dev tools to inspect the menu in mobile view. I am not seeing the first block, which gives the “Menu” text 🙂
      I should be seeing this as well:

      #mobile-nav .elementor-menu-toggle:before {
      position: relative;
      content: “Menu”;
      padding-right: 10px;
      bottom: 3px;
      color: red;
      }

      🙂

  5. I just discovered how to link the css to the menu widget by using the “CSS ID” field of elementor. The code you provided has changed my menu color to red, which is fine for testing, it shows the code is affecting the display of the menu correctly, but the text will not display for some reason.

    1. Fixed: for anyone seeing this in the future, it’s important for the code to be indented. When I first copy/pasted, the indenting didn’t copy over. Make sure it’s there.

      Thanks Lyle!

  6. Holly Castellow

    I have a question about the navigation menu overall. I am simply looking to get my parent page remain in an active state on the menu when viewing individual portfolio items. I am not an expert coder and have been doing quite a bit of research the past few days and testing different things but have not had any success. I would tremendously appreciate it if you could help with this one!

    My site is hc.design.

    Thanks,

    Holly

    1. Sniffle Valve

      Hi Holly,
      Unfortunately, I don’t have any ideas for this. I would also like to have my Portfolio items to behave this way.
      That said, I did have some code to do just that but it was for Genesis + Dynamik Website Builder. If I have some time, I may look into it to see if it can be adapted for this configuration.
      Cheers!
      Lyle

  7. Gastón Dourrom

    Hi SNIFFLE! Thank you very much for your video!
    I commented that I am creating a ONE PAGE site and the problem I have is that when I click on a link in the menu (mobile), the menu does not disappear when you slide to the section.
    From already thank you very much!
    regards!
    gaston!

    1. Hi Gaston,
      Do you have the nav menu or header set to be sticky? That could be what is causing this to happen.
      Cheers!
      Lyle

  8. Hey,

    Thanks for the super helpful video/css code. Was wondering if you had a css code for the drop down menu icon for mobile websites?

    For example my website goes services > dog grooming, pet sitting etc.

    On a mobile website it shows a line ( | ) as a drop down, and when clicked on the thin line, it shows the multiple services.

    I want it to say MORE

    Thank you

    1. Hi Minie,
      Your’re welcome!
      I don’t have anything for that at the moment but if I come up with something, I’ll post it here.
      Cheers!
      Lyle

Leave a Comment

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