Hi
I re-posted this from the WP thread, as this this more of a css question.
This page is a responsive page built on the bones theme.
www.offtapevents.com/category/djs/ (I turned parse off)
If you collapse the page I lose the menu. I know I need a media query to do this
something like
@media 500px {
display:…
etc
}
But I am not sure what, or how to arrange my list items for a smaller display. Can anyone help?
Ta
It’s an incredibly bad practice (IMHO) to hide a menu on small screens, and gives responsive design a bad name, if you ask me—so shame on Bootstrap, if that’s where these styles came from. The problem starts here:
@media (max-width: 979px) {
.nav-collapse {
overflow: hidden;
[COLOR="#FF0000"]height: 0;[/COLOR]
}
}
Remove that height: 0 and the other rules that set the LIs to float: none etc.
I agree with what you’re saying but Bootstrap doesn’t hide the menu, it collapses it to an icon up the top which I find works quite well.
I still find that a bad practice myself, it can be frustrating and confusing for a lot of people. If my other half was browsing a site and collapsed the menu into an icon she would be handing the iPhone to me to sort out as “the site just broke”, or she would just leave the site.
Whats better IMO is to create a navigation that is not obtrusive and is designed to work well organically on a mobile device rather than one that you try to hide away.
We disagree then, what you are saying might be good in theory but in practice, on mobile menus generally get in the way. If you play with http://twitter.github.com/bootstrap/ on a mobile it’s pretty easy to navigate.
Luke W writes about the pros and cons in Mobile First, there’s no one size fits all but I think those menu’s top right are one of the best solutions out there.
Your comment about the site visibly ‘breaking’ and having the phone handed back isn’t quite right. Nothing resizes and collapses automatically on a phone, you see the content first, and if what you’re looking for isn’t there, you’ll click the one thing the looks a menu.
Well I’m talking purely from a usability perspective; where I have to disagree. I agree that no one size necessarily fits all and that navigation (particularly navigation systems that stay in focus regardless of scrolling) get in the way on mobiles.
From our end user testing we’ve found that; particularly with more casual computer users and older users; tend to get taken by surprise by collapsing navigation systems that hide away; even into an icon that may be obvious to you or I; importantly as savvy users who are used to this kind of UI both online and in software applications. Of course whether this is really a problem depends on a sites audience.
Even then, the basic fundamentals of UI design teach not to have Pandora’s Box style navigation systems, of which this kind of UI is a textbook example (collapsing a navigation away into a button).
Therefore, unless absolutely necessary I would try to avoid doing this and would instead investigate alternative approaches, even if that means having to be a bit more inventive or even handle the UI slightly differently on a mobile. Having a responsive design doesn’t mean you can’t have platform specific deviation where it is better for the end-user to do so.
But that’s based on an assumptions that may not be true.
For one, a user may not intentionally collapse the menu; on touch devices its not difficult to do. If the menu slides away then they may well just hit the button again, however end users don’t always react like this; in fact they tend to react in every way you expect them not to react; and the less savvy they are the more this becomes true.
Cheers guys!
I now remember there is a little JS script that you can plug in make the menu collapse, however as this menu was done custom I’m unsure if that will work (the script gives you the icon.
Facebook now uses a similar icon, I am sure this type of nav will become common. Ralph, will this solution work within the framework? Or am I breaking outside of it. I guess the custom nav is doing that anyway. I’ll take a look at your suggestion and see what happens.
Do you mean the code I pointed to? I’m not sure. I’m not into frameworks, pertly because of situations like this, where you aren’t quite sure how your site works. But I’m sure it’s viable to modify the code to suit your needs.
Hi
Yess- I mean the code you pointed out. For me, I am using the framework as a way of increasing my understanding. See how I go. I find the framework useful when you confirm to it. I can ofcourse add cose to a custom style sheet. I’ll let you guys know how I go.
Cool, please do. 
Have not had a chance to try yet - was up til 1am making bootstrap work on a web app I am making. But, I shall. I don;t think the bs js plugin will be the soloution as it’s a custom nav and not the fixed nav bar that sits at the top. I am still trying to figure out how to apply html to wordpress sites. I should just get in there, I Know how it works in theory and have done plenty of tutes.