SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with Responsive Nav

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    You've gotten rid of some of the critical styles somewhere along the line, such as this:

    Code:
    .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. #3
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post

    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.
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by markf1 View Post
    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?
    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. #5
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?)

    Code:
    <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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Yep, post code here, but wrap it in [code] [/code] tags.

    Quote Originally Posted by markf1 View Post
    I do have the nav wrapped in a div with id="nav".
    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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    I can't really see any good use for JS on that page anyway, so my recommendation would be to remove this completely:

    Code:
    <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).

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •