hello everyone this is all boy in this video I'm going to talk about smart menu add-on for elemental pro I'm also going to share 10 copies of that very add-on with the lifetime upgrade included and no restriction when it comes to the number of websites is being used so what is it all about I can bet that many of you found themselves very disappointed when it comes to setting up the proper break point for the nav menu widget because you only have two options literally to immediately show that mobile drop down menu for both tablet and mobile devices or just a little bit later for mobile devices only in any way there's only one single thing that actually forces you to make a breakpoint decision and which is the number of menu items that fit the available horizontal space but the real issue is the fact that menu items sometimes break the line due to the lack of horizontal space before the breakpoint occurs that's something you can't see by switching responsive mode you got to do that by resizing browsers window so I thought why not making the nav menu widget be aware of the of the available horizontal space that's what makes a lot more sense than just setting up the breakpoint and trying to guess how it's going to turn out because the result is rarely satisfying more often it's followed by all kinds of adjustments like I don't know decreasing the initial font size reducing the space between menu items trying to group items etc etc it's like juggling the sandbox okay so I guess you've probably already got the point of what I'm talking about here and what problems we are faced with when it comes to choosing the proper break point so let me show you what I mean by saying that the nav menu widget should be aware of the available horizontal space I'm going to turn on the smart menu feature for my target manual and let's see what difference it makes you can find smarter menu under the style tab it has its own panel with options okay so I'll just turn it on nothing else I'll leave all other options is is and now let's get back to the mobile drop-down breakpoint settings I'm going to do the test with the breakpoint set for mobile devices first all right now switch responsive mode everything is just fine here's my drop-down toggle button it all works fine but let's now take a look what really happens when you resize browsers window out of the editor what's actually going on behind the scenes so to speak I'm going to slowly resize the window to demonstrate so we were still in desktop mode as you can see so still in desktop now we reach the tablet mode let's continue resizing until the hamburger icon becomes visible and once it's there we can be sure that the mobile breakpoint took the place okay there it is you can see all of the menu items that don't fit space are simply grouped under the newly created menu item drop-down that grouping continues until the target breakpoint is reached beat a tablet or mobile breakpoint which means no unwanted line breaks anymore but most important is that you actually don't need to define any breakpoint you can simply let the smaller menu do all the work and this is how you'll never ever have to be concerned whether the horizontal space affects the number of menu items or not now I'm going to temporarily disable the smart menu feature then I'm going to come back to the front end and show you how everything looks like when smart menu is disabled so if I resize browser's window all of the menu items that don't fit simply take the new line and that's something that doesn't look good at all that's something nobody wants to see you might say yeah but the menu breaks the line only because you set up the break point for mobile devices that's true but the line break might happen if even if I set the break point earlier for tablet devices you can see what's going on with the menu items in the meantime in the meanwhile especially if checking responsiveness in editor only the point is that you can't know the exact size of the browser window someone's using it's rarely a full screen it's more like random and that randomness might be somewhere between the desktop and tablet size it might be at the point where the menu line break occurs okay I have created the menu with ten plus items like 11 I think it's 11 and there's no way to make enough room for all the items regardless the font size either spacing or any other factor you can see that smarter menu groups all of the items that don't fit even if some of them already work has drop-down trigger I just got a mention whether you like it or not that this video cannot be one of those where I provide you with the necessary code that you just copy/paste at the right place and everything starts to work things here are way more complicated and I was forced to kind of pack all the code into an element or add-on that's supposed to make everything as simple as possible for everyone I said at the beginning that I'm going to share ten copies of smart menu at all with my channel subscribers and here's what you should do open my channel home page you can do that by clicking on my avatar once there click the about link and send me a private message with the subject smarter menu the message itself doesn't matter but it must include your YouTube username so I can identify you as a subscriber so be quick you're gonna get a free copy of smart man you add-on that is installable as any other wordpress plugin and of course updatable as any other wordpress plugin for lifetime okay in case you guys miss the opportunity you still be able to buy the add-on from my camera of CHOP for a small fee the purchase includes force lifetime updates upgrades and the unlimited license alright let's take a brief look look at the available options first of all you can easily define how the smart menu is going to look like it can be an icon the text or a combo of both something that speaks for itself something that makes things obvious and intuitive I can't I like to use the horizontal ellipsis icon only because it represents continuation of something it reminds you that there's something more like read more of course the choice is yours you're gonna do whatever you like also you can control almost every aspect of the menu item more or less standard features pairings margin border radius typography background and text or icon color etc etc if you wonder about the drawbacks of smaller menu I'd really say that there's no greater grow back than being unable to have a better control over the breakpoint that's what makes me go nuts and that's the reason I felt like I to do something about it and if there's a better solution than making a drop down out of menu items that don't fit the space please let me know of course apart from creating and off canvas menu and which doesn't count in this case other than that everything should be working fine and that's pretty much it once again be sure to check this video description for more info good bye thanks for watching and thanks for the support .
***** How to get a free copy of OoohBoi Smarter Menu addon *****
Open my channel home page, you can do that by clicking on my avatar, once there click the “About” link and send me a private message with the subject “Smarter Menu”.
The message itself doesn’t matter but it MUST include your YouTube user name so I can identify you as a subscriber.
***** Buy OoohBoi Smarter Menu for $5.00 *****
Buy once, update forever, use anywhere.
::::: DOWNLOAD LINK:
::::: MORE INFO: