Help with Responsive Nav

HTML & CSS
1

I’m trying to implement Responsive Nav from responsive-nav.com. For some reason I can’t understand the toggle function is not working correctly.

I want the responsive-nav to collapse the nav to the “menu” toggle when the browser window is narrower than 37em. Currently at that 37em point the nav collapses but it is in the open state and causing the horizontal scroll bar to appear. You can see it here:
http://www.openrangeimaging.com/Test/rra/nav-test.html

Any help in getting this to appear as the closed/collapsed “menu” toggle versus the open state will be much appreciated. Thanks in advance for any help!

2

You’ve gotten rid of some of the critical styles somewhere along the line, such as this:

.js #nav {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}

At a certain point, the standard navigation switches to position: absolute and gets clipped, but the clip seems to be missing from your styles, or at least is not being called.

You need to place the original code into your page and carefully modify it step by step to suit your purposes, testing every change so that you know where the problems are arising.

3

Ralph, Thanks for your reply! I did place the original responsive-nav code into the page. Are you saying I need to modify the css rules that are styling the standard navigation?

below is what my responsive-nav.css file contains:
/*! responsive-nav.js v1.0.14 by @viljamis */

#nav ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
}

#nav li {
width: 100%;
display: block;
}

.js #nav {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}

#nav.opened {
max-height: 9999px;
}

@media screen and (min-width: 37em) {
.js #nav {
position: relative;
max-height: none;
}
#nav-toggle {
display: none;
}
}

4

Actually, I think the problem is that the CSS file that comes with the script is looking for a wrapper around the menu with an ID of “nav”, which doesn’t exist on your page. It’s also expecting the #nav div to be wrapped around a <ul>. So the issue is really with how you’ve structured your HTML. It needs to match the original source files more closely.

5

Thank you again for your help Ralph. I need it!
I do have the nav wrapped in a div with id=“nav”. Below is the html. (should I be pasting code into this forum post in some other way?)

<body>
<div id="p7CCM_1" class="p7CCM01 p7ccm01-fixed-960">
  <div id="masthead" class="p7ccm01-content-row p7ccm01-dyn-img p7ccm-row">
    <div class="p7ccm01-1col-column1 p7ccm-col">
      <div class="p7ccm01-1col-column1-cnt p7ccm01-content"><img id="logo" src="../images/logo01.png" width="163" height="128" alt="Rock And Roll Academy" />
        <div id="p7PMM_1" class="p7PMMh09 p7PMMnoscript">
          <div id="nav">
            <ul class="p7PMM">
              <li><a href="#">ABOUT</a></li>
              <li><a href="#">LOCATIONS</a></li>
              <li><a href="#">PRESS</a></li>
              <li><a href="#">CONTACT</a></li>
            </ul>
          </div>
          
          <!--[if lte IE 6]>
<style>.p7PMMh09 ul ul li {float:left; clear: both; width: 100%;}.p7PMMh09 {text-align: left;}.p7PMMh09, .p7PMMh09 ul ul a {zoom: 1;}</style>
<![endif]-->
          <!--[if IE 5]>
<style>.p7PMMh09, .p7PMMh09 ul ul a {height: 1%; overflow: visible !important;} .p7PMMh09 {width: 100%;}</style>
<![endif]-->
          <!--[if IE 7]>
<style>.p7PMMh09, .p7PMMh09 a{zoom:1;}.p7PMMh09 ul ul li{float:left;clear:both;width:100%;}</style>
<![endif]-->
          <script type="text/javascript">
<!--
P7_PMMop('p7PMM_1',1,0,-5,-5,0,0,0,1,0,3,1,1,0,0,0);
//-->
        </script>
        </div> <!-- end #p7PMM -->
        <img id="camp" src="../images/camp-button01.png" width="220" height="48" alt="rock and roll academy summer camp" />
<p id="tagline">Seek Mystery, Not Answers.</p>
      </div>
    </div>
  </div> <!-- end #masthead -->
</div>
<script> var navigation = responsiveNav("#nav"); </script>
</body>

Thanks again for your help!

6

Yep, post code here, but wrap it in [noparse]

[/noparse] tags.

Woah, how wierd. It is getting changed by JavaScript into something else. That’s a bit over my head, but some JS on your page is changing the ID of “nav” to something else. A lot going on there. :frowning:

7

Yeah, unfortunately it’s more than a bit over my head. I’m not versed in JavaScript.

Thanks for trying to help me Ralph!

8

I can’t really see any good use for JS on that page anyway, so my recommendation would be to remove this completely:

<script type="text/javascript" src="p7pmm/p7PMMscripts.js"></script>

It’s just working against you.

Then, with that done, adjustments can be made (if necessary). :slight_smile:

9

Thanks Ralph. I was using a third party menu building system and that is clearly not going to work. I think I’m going to redo the nav ul in a more conventional way and go from there. Thanks again for your help, it is appreciated very much!

10

No probs! Let us know how you go. It’s not hard to create a menu like that, but if you need assistance, we are always here. :slight_smile: