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

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

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;
}

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

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

 

 

31 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

      1. Genius, thank you!

        If removing the hamburger menu as sited above and replacing with text, you may be able to remove the following lines from the CSS code for .elementor-menu-toggle:before:

        position: relative;
        padding-right: 10px;
        bottom: 3px;

        This article and video saved me a big headache!

  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

  9. Hi Sniffle. Loving the vids.

    I’m looking to change the default style of the hamburger and the close button of Elementor. The style currently has rounded corners and im looking to thin out the lines…

    Is this possible?

    1. Hi Mark,
      Thanks! 🙂
      To style the hamburger item, add/adjust the code in the second block of CSS “Transparent background with red bars”.
      What lines are you wanting to “thin out”? The hamburger ones or the X ones or both? If it’s the hamburger ones, then add font-weight: 100; to that code block. If it’s for the X, I’ll have to snoop around a bit and post back here.
      Cheers!
      Lyle

    1. Hi Hoya,
      Yep. Add this to the end of the first code block:

      font-size: 18px;

      Adjust as required.
      Cheers!
      Lyle

    1. Yep again 🙂
      Add this new separate block:

      .elementor-menu-toggle:hover:before {
      color: green;
      }

      Adjust color as needed.
      Cheers!
      Lyle

  10. Hi Lyle,
    I have a challenge for you. Here is what I’m trying to do. First I want to change the hamburger from 3 bars to 4 with squared edges, by default they have a radius. The second challenge is when the visitor clicks the hamburger I want the whole screen to become the menu, just like the full-screen menu option in Astra.

  11. hi Sniffle, this is my first time in this blog, i’m looking to try change the hamburger menu for other icon , is this posible?

Leave a Comment

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