Elementor Pro

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

 

 

Similar Posts

95 Comments

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

    Reply

    1. Hi Genevieve,

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

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

      Cheers!
      Lyle

      Reply

      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!

        Reply

          1. Hello menu text very big i want small text plese give me css code
            İ m sorry my english very bad

          2. Hi Husan,
            Add this this to the first block of CSS listed on the site:

            font-size: 12px;

            Adjust value as needed. You may also have to adjust the bottom: value too.
            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?

    Reply

    1. 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

      Reply

  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.

    Reply

    1. 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 🙂

      Reply

  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.

    Reply

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

      🙂

      Reply

  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.

    Reply

    2. 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!

      Reply

  6. 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

    Reply

    1. 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

      Reply

        1. Hi great advice on here and worked well for me but I need the text to sit under the 3 bars. Could you please help with the code for this. Thank you

          Reply

          1. Hi Mark,
            Let me see what I can come up with and will post back here.
            Cheers!
            Lyle

  7. 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!

    Reply

    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

      Reply

  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

    Reply

    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

      Reply

  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?

    Reply

    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

      Reply

      1. Hi Sniffle, great content here!

        Would it be possible to share some CSS on how to decrease the weight (both vertical lines and X) of the hamburger menu?

        Reply

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

      font-size: 18px;

      Adjust as required.
      Cheers!
      Lyle

      Reply

        1. Hi Bernard,
          You can add the following code to that which is on the site:

          font-family: “Times New Roman”, Times, serif;

          For other examples, please visit: https://www.w3schools.com/css/css_font.asp

          Cheers!
          Lyle

          Reply

    1. Yep again 🙂
      Add this new separate block:

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

      Adjust color as needed.
      Cheers!
      Lyle

      Reply

  12. 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.

    Reply

  14. 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?

    Reply

  16. Hi Sniffle,

    You are very helpful for Non – coders!
    I want to display Nav menu widget dropdown hover effect for laptop view!

    If any user hover the menu link, Then dropdown will be slide up effect! Now there are no option to add hover effect! Please help me

    Thanks in advance!

    Reply

    1. Hi Dhinesh,
      Thank you 🙂
      Regarding your nav question, one possibility is to use the new Popup Builder in Elementor Pro.
      Cheers!
      Lyle

      Reply

  17. Hello, thanks for your tutorial.

    I am trying to remove the hamburger and use a Menu title for my menu for my main menu as well as a nav menu on my blog page that allows visitors to view content based on a category.

    It seems that the CSS for this works well – like when editing the header, it displays correctly, and when editing the blog nav menu it also displays correctly there. However, when I go to look at the page outside of the editor, the main menu shows correctly and the blog menu shows as a hamburger…despite looking accurate within the editor.

    I’ve cleared cache’s etc…and I am not sure what to do – any thoughts?

    Thanks!

    Reply

    1. Hi Natalia,
      Not too sure what could be causing that. Perhaps post this on the Elementor Facebook group where you can provide screenshots and a link to the site, if it’s online. I check there often so would be easier for me to look into there than here in the comments.
      Cheers!
      Lyle

      Reply

  19. Hi Lyle,
    Do you have any recommendations for working with a hamburger menu which triggers a slideout menu on desktop view? In context of a sticky Elementor header?
    Thanks for any tips!
    Anna

    Reply

    1. Hi Anna,
      Unfortunately, I am not familiar with either as I use the Astra Pro options for sticky header and the standard menu.
      Cheers!
      Lyle

      Reply

    1. Hi Allen,
      Not really to sure. I know there are some themes and plugins that can do this. I haven’t tried.
      Cheers!
      Lyle

      Reply

  21. Hey Sniffle,

    Do you have any idea how you would add a countdown timer to the nav menu like this site does on Mobile? https://bethany.com/

    Thanks!
    Dylan

    Reply

    1. Hi Dylan,
      You can add the Elementor Pro countdown widget to the primary header in the Astra theme (free or Pro).
      – create a new Section template and add and style the widget
      – copy the generated shortcode and add it to the Last Item option using the Text/HTML selection in the Customizer > Layout > Header > Primary Header
      – in the Mobile settings, uncheck the Hide Last Item option if you want it to display on mobile
      – you’re probably need some custom CSS to get the size/styling just right
      Cheers!
      Lyle

      Reply

  22. Hi Sniffle,
    I am a newbie to making website on elementor pro.
    I have a doubt,that how can i make this
    https://www.hugeinc.com/
    here when you click on the logo then the menu nav comes.
    Please help how to do this

    Reply

    1. Hi Shubham,
      You could do something like that with Elementor Pro and a popup.
      Cheers!
      Lyle

      Reply

  23. Hi,

    I have a basic menu in Elementor with Astra. I used Elementor Customizer to have the menu to open from right on mobile. However, there are small arrows which must be clicked in order to open a submenu. At the moment I disabled the main button with CSS

    /* Top Menu Buttons */

    .unclickable > a:hover {
    cursor: default;
    }

    There is no problem on the desktop. It also affects mobile of course.
    From my recording, in analytics, I see that visitors often don`t hit the arrow on the right side. They click the button which brings them to nowhere (CSS). They open toggle again and then eventually realize there is an arrow. Sometimes they keep repeating with no success as there was no arrow at all. Don`t they see an arrow or are dumb? (sorry)

    How do I make a clickable whole section in the mobile menu as is on a desktop?

    Can CSS help? If yes, would you mind to provide the code here? Thank you

    Thanks

    Reply

    1. HI Wojtek,
      The only thing I can think of is use medial queries to negate your CSS.
      Cheers!
      Lyle

      Reply

  24. Hi Sniffle
    Thanks a lot for your article.
    I have an issue: I would like two menus next to each other on the same menubar. One menu should say “Articles” (which work), and the other menu should say “Books”.
    But when I type “Books” in the CSS code for “Content”, the word “Articles” appear on the website.
    It seems like the “Content” of the first navigationmenu overrules the next.
    What could be the problem?

    Reply

    1. Hi Rudi,
      This request is more that what could be answered in the comments.
      I would recommend that you post this to the Elementor FB group.
      Cheers!
      Lyle

      Reply

  25. Hi Sniffle Valve, how i can add this code to navi menu with elemntor pro here is link https://codepen.io/karlovidek/pen/aNYWKE?editors=1100 if possible?

    thank you

    Kader

    Reply

  26. Hello,

    Please help if able. My mobile menu toggle button is displaying numbers next to the lines. This appeared out of nowhere and I have no idea how it happened. Also, the active state, which used to be an “x” is now a left facing classic. Any ideas? Website is mywebreps .com

    Reply

        1. Hi Dan,
          It’s coming from the Elementor menu toggle CSS. Do you have the latest versions of Elementor (2.6.1) and E Pro (2.5.13)?
          This has come up a few times on the Elementor FB group but I never really paid attention for a fix, if there was one. I don’t get this on my local test site.
          Cheers!
          Lyle

          Reply

          1. This worked for me.
            You should consider updating both Elementor and Elementor Pro.

            Thanks for sharing Dan.

    2. Dan, I had the same issue.

      I couldn’t find any settings to change this so I did it in css.

      The css is pulling a specific icon for the hamburger menu so you just need to change what icon it’s pulling and add !important to it to override the default css.

      Add this to your css for the hamburger menu item:

      .elementor-menu-toggle i::before {
      content: “\e816” !important;
      }

      .elementor-menu-toggle.elementor-active i::before {
      content: “\e803” !important;
      }

      Reply

  27. I’m using a css hamburger icon animation. I have it set for a popup menu action. However it opens once and then doesn’t open again after that.

    Thoughts?

    I am using Elementor Pro.

    Reply

  28. A bit off subject but is it possible to have the Hamburger aligned Center on Tablet but Right aligned on Mobile??

    Reply

    1. Hi Justin,
      Unfortunately, the alignment settings for the toggle are not device independent. You would need to use CSS with media quires to do so.
      Cheers!
      Lyle

      Reply

  31. Hi Snifflevalve

    I have issue in my ongoing menu ,the distance from icon to menu text is not consistent. hope you will help me Thanks

    Reply

    1. Hi Romz,
      Not too sure that I understand what you mean. Perhaps post this question on the Elementor Facebook Group along with an image and/or link to the site and I can take a look at it there.
      Cheers!
      Lyle

      Reply

  32. Hi Sniffle Valve, I use Elementor Pro to create a Nav Bar menu with a Pointer Background on hover, how I can change the size of the pointer to adjust at the size of the text?
    Thanks
    Pedro

    Reply

    1. Hi Pedro,
      Not too sure about how to do that. I would like to take a look at doing so on my test site but since E Pro 2.9 has disabled E Pro widgets if the licence is not activated, and I have on the single one, I won’t be able to test any solution.
      Perhaps checkout the E Pro docs or post this to the Elementor Facebook group.
      Cheers!
      Lyle

      Reply

  33. Hi Sniffle Valve,

    This was so useful! However, on mobile, when the dropdown menu comes down there is a gap between MENU and the the dropdown items? Do you know of any way to alter this so the dropdown items appear directly beneath the menu?

    Thanks,

    Jack

    Reply

    1. Jack,
      This would be better asked on the Elementor Facebook group, where I am quite active, so that you can provide a URL to the site in question and I’ll be able to inspect the code. Can’t do it here in the comments.
      Cheers!
      Lyle

      Reply

  34. Hi Sniffle Valve,

    Is there any way to add my custom icon in elementor pro nav widget ?
    I tried to change the default one by css helping with font awesome 5 but unfortunately I need my own custom icon !! Please if there is any way to do that help me.

    Thanks
    Meber

    Reply

    1. Not to familiar with doing that but I believe you can add your own icon via Fontello.
      Cheers!
      Lyle

      Reply

  35. Thanks for the code, worked a treat. Still surprises me though that Elementor Pro’s widget doesn’t have a text-label built-in for the mobile menu toggle.

    But this code with some tweaking was perfect, thanks!

    Reply

    1. Hi Dean,
      You’re welcome and yes, one would think that by now Elementor would have that. Glad to hear it worked for you 🙂
      Cheers!
      Lyle

      Reply

  36. Hi Lyle, the code for creating “Menu” next to the hamburger works just great – thank you for sharing!. Do you know if it is possible to add “Close” next to the cross to close the menu? and if so what the code is?

    Thanks, Les

    Reply

    1. You’re welcome 🙂
      I’ll have to do some testing for the Close and report back if I find a way.
      Cheers!
      Lyle

      Reply

  37. Hi Lyle, thanks for the code snippet. It works really well! I have a follow on question. Do you have a code snippet that I can add to the “X” close button so instead of just the “X” being displayed I can have “Close Menu” text?
    Thanks//les

    Reply

Leave a Reply

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