Solved

Nav collapse doesn't work correctly

Posted on 2014-11-18
9
86 Views
Last Modified: 2014-11-20
Hello, on mkmeals.com/responsive/index.html, when you make the browser small or use it on a phone, the toggle expands the menu correctly, but it doesn't toggle back to collapse.

I hope I've explained that correctly. Thanks.
0
Comment
Question by:mel200
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
9 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40453345
Same old thing mel200.  The code is not valid.  It is full of tagging errors whose nature would definite create an unstable condition. Cleaning up the code might solve this and if not at least we will know what to expect from the code.  Trying to fix presentation issues when the code is not stable is generally not very productive.

Cd&
0
 

Author Comment

by:mel200
ID: 40453392
I've heard that the validator doesn't work on Bootstrap, in fact I can probably find that here somewhere, I'll find the question.
0
 

Author Comment

by:mel200
ID: 40453406
Here's what I'm talking about, but I'll run the validator now. Thanks.

http://moz.com/community/q/how-important-is-w3c-validation-for-mobile-sites
0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 

Author Comment

by:mel200
ID: 40453476
Ok, all but two are corrected, I can't seem to fix those, they are related:

 Error Line 144, Column 8: End tag for body seen, but there were unclosed elements.

      </body>


Error Line 31, Column 26: Unclosed element div.

                  <div class="container">
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40455309
The link you posted is full of incorrect information, and I doubt any of the posters to it have ever actually seen what browser code looks like. I have and the validator follows exactly the same steps as the parser in modern browsers.  The fact that bootstrap results in invalid code is because it is not optimized for anything but Twitter functionality and like many large site they have in-house staff that has develop code that optimizes for their site.  They ignore standards which means that you get inefficient and frequently unreliable code.

Every error forces the parser to execute extra code because the errors have to be resolved by the parser or what get serialize into the the CSS Object and Document Object can crash the browser with an uncaught exception.

As for the remaining error (2 messages but both are caused by the same error), the fact that the container div is not closed means that every element in the page is inheriting from is and it has padding and margin properties that have a definite impact on positioning.

So either close the container or remove if if it is actually extemporaneous.

Cd&
0
 

Author Comment

by:mel200
ID: 40455493
Will adding a </div> at the end of the document close that correctly?
0
 

Author Comment

by:mel200
ID: 40455502
Nope, that doesn't do it. I'm not sure where to put the end div.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 40455973
Well putting at the end will still let it inherit and I have no clue what the scope of the element is supposed to be the browser has been assuming everything to the end of the page.

but it looks to me like the problem is one of the typical bootstrap messes.  When I inspect that menu I see an element that has multiple classes that conflict, and there are overrides all over the place. Plus it may also be getting scripted, and the @media declarations further complicate it.  I am not surprised that the browser does not seem to get it right because I don't have a clue what the right values are for the menu elements.

You would probably get it working faster if you get rid of the Bootstrap declarations on it and just style straight up using the id as the declaration. There might still be some inheritance issues but those should be manageable.  However if it is being scripted all bets are off because that will override all efforts.

Cd&
0
 

Author Closing Comment

by:mel200
ID: 40456408
Ok... this works correctly: mkmeals.com/responsive/side-nav-basic.html

So I'm going to start from scratch with that again, testing as I go. until it breaks. Maybe that will tell me what's going wrong. Thanks for your help.
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question