Hey @habitualshaker Stuart, I’m having an issue with the dropdowns on my menu going underneath the page content. Is the best way to sort this by adding a z-index value to the nav bar with css or am I missing a checkbox I should be ticking?
I’d also like to get rid of those little drop down triangle icon thingies if possible?
Cheers,
Roger
An update went out last night that should fix that drop down issue. Am presuming that your Nav bar is in a partial?
And there is no way in the settings (currently at least) to remove or change the triangle thingies.
Oh yeah… Just checked for updates and found it.
Can you recommend a 3rd party nav bar stack? I’m a UIKit user so I don’t have any framework independent ones…
Thanks
Do the triangle thingies offend you that much ;)
I don’t use any but Navigation from @yuzoolthemes is popular. Gator from @willwood looks good too. One Little Designer have a couple of nice ones too.
A Nav ‘Plus’ stack may come along for Source at some point. What would you like to see in that?
You can also build your own using some of BWD’s splendid stacks such as Pop Drop
Ha! They don’t offend me at all but my clients are designers and they get a bit anal about how things look.
I guess menu features I’d like to see would be granular control over link and dropdown styling, such as padding between menu items and positioning of logos/icons etc.
You already have the option to drop stacks in there so that’s good, although nice to have on mobile too.
Ability to add grids to dropdowns, so complex menus with lots of items/images can be made.
The problem of course is that Source is so nice and minimal you don’t want to bloat it with tons of features as that would defeat the point of it. I love the simplicity of it and I guess if I need loads of features I’ll just use UIKit.
I’ll take a look at those menu suggestions now.
Cheers
These things could easily be offered in a future update.
This probably less so ;)
Exactly that.
They serve a very useful purpose to communicate to the web visitor that there is a drop down menu. Nothing communicates it better than those symbols.
That might be true, but I think a dropdown that pops out on hover is pretty easy to find. Also, as I mentioned, I work with designers and they are not going to compromise their designs for anything… Best practise goes out the window I’m afraid. :-)
Here’s the first project I did with RW. I think the dropdowns are easy enough to find:
Building your own menus in Source is super easy: http://ci-clientservices.com/clientdev/source/ Doing it yourself means you have finite control.
The popdrop one uses PopDropMenu stack by the great @tav for mobile. It’s part of the Popdrop stack family: https://www.bigwhiteduck.com/stacks/popdrop/
The desktop menu is Source grid and button Group/
Ah balls, posted from the wrong account, but you know who I am!
… but not on touch devices.
Back as me!
Those menus were made with the Source Beta, and the grids need a bit of work to get back working 100% again, which I will do at some point. But if you want that project let me know and I’ll fire it over, just bear in mind you will need to fix the grids.
Cheers @steveb, this is cool. I will investigate further
Hi @tav, yep, this is true of course, but if you look on the site you’ll see I left them on for the mobile menu :-)
Good point worth remembering though!
Thanks for the offer @steveb, much appreciated but I like to work things out myself as I find I retain it longer that way! Keeps the alzheimer’s at bay too! If I get stuck I’ll give you a shout
The only problem with that is that the mobile menu is shown depending on screen size as opposed to whether it is a touch device or not.
ah the joys of web design! There’s no way to get everything perfect all the time. I have to deal with ‘print’ people who want text blocks to perfectly line up with other content at ALL screen sizes. They can’t understand why they can make it work in inDesign but I can’t when its on a web page…Such fun!
If you really want to kill them for non touch devices you can remove the ml-arrows class just paste this JS into the page inspector or site wide JS
Disclaimer: I’ve just written this JS on my phone from memory in a coffee shop (edit: turns out it works fine):
document.querySelectorAll('html:not(.touch-stripped) .ml-dropdown').forEach((men)=>
men.classList.remove('ml-arrows'));
…but I still think it’s a bad idea.
On your web site, if I was looking for Metal Table Legs, I would never guess that there was a drop down hidden under Hard Woods. This is a good example where a dropdown triangle enhances the user interface. Maybe Kent Logs Tree Surgery don’t want to see Metal Legs - I don’t know, but assuming that they do, then a dropdown indicator would be a good thing to have.
If you work with designers who do not understand this stuff you should stop working with them. Tree surgeons very likely do understand this stuff.
That’s a bit above my pay grade! At the moment I can use UIKit if I need to… It was just a query as to if it was possible. ‘No’ is fine, it’s no biggie