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

 

 

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

    1. Avatar

      Hi Genevieve,

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

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

      Cheers!
      Lyle

      1. Avatar

        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!

          1. Avatar

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

          2. Avatar

            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

  1. Avatar

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

  2. Avatar

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

  3. Avatar

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

      🙂

  4. Avatar

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

      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!

  5. Avatar
    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. Avatar

      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

        1. Avatar

          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

          1. Avatar
            Sniffle Valve

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

  6. Avatar

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

      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

  7. Avatar

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

      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

  8. Avatar

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

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

        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?

    1. Avatar

      Yep again 🙂
      Add this new separate block:

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

      Adjust color as needed.
      Cheers!
      Lyle

  9. Avatar

    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.

  10. Avatar

    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?

  11. Avatar

    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!

    1. Avatar

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

  12. Avatar

    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!

    1. Avatar

      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

  13. Avatar

    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

    1. Avatar

      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

    1. Avatar

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

    1. Avatar

      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

  14. Avatar

    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

    1. Avatar
      Sniffle Valve

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

  15. Avatar
    Rudi Kristensen

    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?

    1. Avatar

      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

  16. Avatar

    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

        1. Avatar
          Sniffle Valve

          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

    1. Avatar

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

Leave a Comment

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