Attempting to use your demo on iPad with IOS 5.1 and Mobile Safari 5.1, can navigate one menu item, however attempting to navigate another menu item fails like as though the menu is locked out unless you move/scroll the page.

After moving/scrolling the page (even just by a tiny amount) enables the menu item again.

Hello!

I'm using the single-page-scrolling version of your plugin for my nav. It's working fine as long as all the nav links are for anchors in the page, but when I add an outbound link, I lose the section-highlighting for the in-page sections. The links and scrolling all still work, I just lose all of the section highlighting.

Any idea what I might be doing wrong? Thanks!

bart

How can I adjust where the page scrolls to when linking from an external page?

Background
I have a one-page site that uses this nav, with TOS and Privacy Policy pages that are separate from the home page. I want a seamless experience, so included the nav on these external pages. However, if a user navigates to one of the sections, it cuts off the top 20-30px of the section. This does not occur when navigating to or between different sections from the home page.

What I've Done
I have already adjusted the headerHeight on line 127.
Right now I'm using a hacky workaround of adding 40 pixels to the line-height of the h1 in each section, which works ok for some sections, but not for the sections that don't have a h1 at the very top.

Other Helpful Info
Margins and padding are ignored when the script looks for the id, so I cannot use them for the above mentioned sections that don't start with an h1 such as the one pictured in the attached screenshot.

If the <ul> tag is surrounded by a <div> (all within the <div class="nav-collapse">), the height is calculated as 0 when loading the page at a mobile size. This makes the menu items not show up when hitting the toggle, and they remain hidden when scaling up to desktop size. Loading the page first in desktop mode and scaling down, the items remain visible and the toggle works.

Obviously, a <div> around the <ul> is pretty unnecessary, but in some CMSs, it's difficult to change. It would be nice if the script was a bit more agnostic about existing menu markup.

Tested on https://www.adtile.me/fixed-nav/

1. resize window so menu will collapse
2. open menu but do not select anything; leave it open
3. resize window so menu will extend
4. click on "logo"

The active mask is defaulting to the last list item in my nav. When I click on a menu item the mask does move to the actual id chosen, however it moves immediately back to the last list item. Also , if I am at a particular id and click the button that corresponds with it, the mask will then stay in place.
I included my header code below...
Would love any suggestions. Thanks.

BusinessName

• About
• Services
• Nurture
• Clients
• Contact

can't seem to align the navigation text in center tried every option in the css file, any help would be appreciated.
Thanks

Hi there,

I am trying to integrate your plugin on an AngularJS project. I am not really experienced with it, so maybe I am messing it up somehow, but here is my code:

<div class="topbar" >
  <div class="container clearfix">
    <a href="#" id="nav-toggle" class="menu-link nav-toggle"></a>
    <nav id="menu" role="navigation" class="nav-collapse">
      <ul>
        <li ng-show="user"><a data-scroll href title="" >Give Us Feedback</a></li>
        <li ng-show="user"><a data-scroll href title="" ng-click="logout()">Logout</a></li>
      </ul>
    </nav>
  </div>
</div>

And my directive:

directives.directive('topBar', function(AuthService) {
  var navigation;
  var controller = function($scope, PhotoService){
    $scope.hideNavigation = function(){
      navigation.close();
    };
    $scope.logout = function(){
      AuthService.logout();
    };
  };
  var linker = function(scope, elem, attr){
    navigation = responsiveNav(".nav-collapse", {
      closeOnNavClick: true,
      customToggle: "nav-toggle"
    });
  };

  return {
    restrict: 'A',
    replace: true,
    templateUrl: '/partials/directives/topBar.html',
    link: linker,
    controller: controller
  };
});

The problem is that every time we move to a different section, I am instantiating a new navigation and it works fine, but this css:

.js .nav-collapse-0.opened{max-height:45px !important}

generated by line 480:

var innerStyles = "." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened{max-height:" + savedHeight + "px !important}";

its not getting updated with the proper index of the new instance of the navigation. I hacked it by modifying the previous line to:

var innerStyles = "." + opts.jsClass + " ." + opts.navClass + ".opened{max-height:" + savedHeight + "px !important}";

I guess this will affect to multiple instances of the navigation, so I am not sure if this could be solved any other way...

Thanks for your work!

When i use 2 navigation there is issue in active class. Please help how i can fixed?

Thanks for great navs = Responsive Nav and now Fixed Nav.

I noticed that other navigation menu li classes are removed when active class is added. Is this how it is suppose to work? This have some issues when trying to use it in WordPress theme where we have classes in menu items by default.

This is ready plugin, some partial script or what? How should I know how to implement this? It's some kind of joke ... I know that You are doing this for free but ... do not do it if You even do not have time to write to sentences how it work :/

Hi,
The menu should change to the mobile version when the number of items is too large.
If this is already a feature, then I am doing something wrong.
If it is not, It would be awesome to add it.

Thank you.

selecting the section through the menu gives me a different position than over the url.
how can i fix this?
thanks for your reply

Trying to make a dual-level navigation that expands the sub-nav when clicked. Inexperienced with JS so the original closeOnNavClick: true is boggling me. Your help is appreciated.

HTML

JS

// Courtney's cheesy magic

$('#hamburger').click(function () {
this.expanded = !this.expanded;

if (!this.expanded) {
    //collapse all menus
    $('#menu ul.sub-menu').slideUp();
    //put our expand sign back
    $('#menu div.menuExpand').html('+');
}

$('#right').animate({
    'marginLeft': this.expanded ? '+=90%' : '0%'
});

});
/*
$('#hamburger').toggle(
function () {
$('#right').animate({
'marginLeft': '+=90%'
}, 'slow');
},

function () {

$('#right').animate({
    'marginLeft': '0%'
}, 'slow');


//collapse all menus
$('#menu ul.sub-menu').slideUp();
//put our expand sign back
$('#menu div.menuExpand').html('+');

});
*/

$(document).ready(function () {
$('#menu div.menuExpand').on('click', function (ev) {
//$('#menu .sub-menu').not($(this).parents('.sub-menu')).slideUp();
$(this).next('ul.sub-menu').slideToggle();

    if ($(this).html() == '-') {
        $(this).html('+');
    } else {
        $(this).html('-');
    }
});

});

I integrated this solution into my project only to discover that the links in the dropdown mobile menu aren't responding. I didn't touch the javascript and I've been over the css and html several times looking for an explanation. Any ideas?

instead of having the menu be fixed from the start, could i keep the menu relative then fixed after scrolling past it?

First of all thanks so much to adtile for uploading this, very cool code! This is my first time on GitHub - believe I'm seeing a bug but it could just be that I'm implementing something incorrectly.

I would like to have a footer that only shows up in the last section - one that goes all the way to the bottom of the screen. But when I place something at the bottom the menu and links stop working in Firefox and IE when you scroll to that area (on small screens the Menu toggle opens but the page does not scroll when you click on sections, likewise on large screens no scrolling when the header links are clicked). No issue in Chrome or on the mobile devices I've tried.

Here's the site I'm working on, scroll all the way to the bottom in Firefox/IE and the links stop working: http://viverolamilagrosa.tk/

I've been at it for hours but nothing I've come up with seems to help - the only way I can get the links to work is if I change the "top'' values in the below code raising the footer, but then I have an ugly gap between the footer and bottom of the page.
/* grass box */
.infoboxFooter {
position:absolute;
top: 3130px;
left: 0;
right: 0;
}

/* green fill and links box */
.infoboxFooter2 {
background-color: #516d18;
position:absolute;
top: 3280px;
left: 0;
right: 0;

I checked out the other questions but none seemed to match my problem. My apologies if this isn't how/where I should ask, very new to this. Thank you for looking at my issue - any ideas or guidance greatly appreciated!

Would like to see coding suggestion for the best way for this to be fixed to the bottom. Also any conflicts with bootstrap? The three common needs I have for a menu, are top, bottom, and below logo. All with fixed and non-fixed positioning.

My fixed nav is slightly taller than the example, so when you scroll to a section it covers about 30px.
Can you adjust the top offset?

Hi all,

I am having an issue where the navigation hamburger in the mobile section is jumping all over rather than staying in the same place. This is a new issue that I have come across, and I have no idea why it is happening. It used to change color when you hovered over it, and now it doesn't do that. If anyone knows why this is happening and how to correct it, you will be my hero!

You can see what I mean here:
http://sydneyjacobson.com

We have a rather lengthy navigation but it won't scroll on devices.

I had a request to make the title/logo and the menu icon all trigger the nav-toggle. I've been trying to get this to work but it gets messy, any thoughts?

IS there a way to change the hamburguer and x icons?

Hi, I am unsure how to do this but, I would like to modify the navigation so that it says in its position and doesn't move when the user scrolls, I want this to happen on a device that is a tablet or desktop. Also how could I make the navigation not to appear over the top of content when the navigation is at the top of page. Currently I am using a temporary solution which uses the code that pushs the content that is behind the navigation down the page (my code is padding: 100px 0 0;).

Thanks

This is a really great piece of code! Would you consider putting it up on rubygems, or npm, or something?

I'm just curious if there is an easy way to remove the hashtag-anchorlink from showing up in the URL? The #home link does not show up and on scrolling there's no change to the URL, but if you click the other links then they show up in the menu bar. For example: https://www.adtile.me/fixed-nav/#projects.

If anyone knows what I can change to remove this feature that would help me a lot as my knowledge of JS is shameful. Thanks in advance!

Hi,

first of all thanks for the help and this great code.

I've rewritten the code a bit to fit my design. I have the mask now covering the whole site to create a overlay navigation instead of the top navigation. However, when I close the navigation, the text is still shown about 0.2 seconds, creating a weird transition. Any ideas on how to solve this?

here's the site, to recreate the issue, click the + in the top right corner, then close it by clicking the x.
http://500stockholm.se/500stockholm/index.html

Hi! First of all, sorry about my english ;)

I need a little help with something that is annoying me for two days.

It seems that is not possible to use a flexible height for the sections. What I wanted is to use something like this: section { ... height: 100%; min-height: 800px; ... }

Using the default (800px) or another fixed height gives me a problem on higher resolutions: the next section covers the content of the previous.

I know that I could set this over the different breakpoints, but it would be nice to have something flexible for a dynamic content, right?

Anyway... thanks in advance for any tip/help. Cheers from Brazil ;)

Sorry about this - being new to programming and having been retired for a number of years I am impressed with the programme - but I cannot seem to add drop down programmes - could you please supply code for this

Thanks and Regards

Using the demo would you be able to implement the HTML History API
so that when users hit the back and forward button in the browser going from e.g. Projects to About instead of always going back to the Index?

Regardless of what menu item the user is on, currently the back button always returns to the Index.