search

saltnpixels / seasaltpress

A simple starter theme for developers.
https://seasalt.press
16 stars 6 forks source link

Improved indents and widths on mobile "cool" menu #1

Open m9n opened 7 years ago

m9n commented 7 years ago

On my unit test site, I've got a stupid long menu title, and it runs behind the page content: https://www.dropbox.com/s/3yus9maq8n1uvt2/Screenshot%202017-04-26%2021.20.17.png?dl=0

Maybe set a max-width for menu items in this context?

Also, as you can see from that screenshot, sub-menu indents might benefit from a bit of tidying.

saltnpixels commented 7 years ago

Thanks I'll look into it and make some changes soon. I am currently tidying up some code and stuff.

m9n commented 7 years ago

It's a very awesome theme. I'll try and help as well as just whine :)

saltnpixels commented 7 years ago

Im just excited someone is giving input! I need to get used to using github... I had an old version on here. I overhauled the whole thing. Then dropbox synced and destroyed everything... its been an interesting day!

Soon I will make a site for the theme and add some more stuff... Is anything hard to figure out? I plan on making a video with all the features

m9n commented 7 years ago

Honestly, it all feels really easy to understand and work with. I'm used to working with underscores, and this feels very similar. It's a great bit of work.

saltnpixels commented 7 years ago

I fixed the mobile submenus... I think. As for desktop, if you have so many menu items, im not sure what we can do. We can make the lfexed menu items wrap... but thats about it...

Unless you have a better idea

m9n commented 7 years ago

I tend to make excess menu items wrap on Desktop.

I advise clients to avoid having more than 5-6 main menu items, but they sometimes choose more, and sometimes with long names. I think if you make things wrap, which looks less tidy, then they kinda get the message and work harder to reduce the number of top level items };)

Another tricky problem is which way to make third-level menu items extend (left or right). Right works better for RTL languages. But then they run off the edge of the screen if the parent item is too near the right of the screen.

On one site, I defaulted to extending level-3 items to the right, but I added some JS to detect how close the parent item was to the right edge of the screen, and if it was less than a minimum amount, a class would be added to the parent so the child would extend to the left instead.