Mobile Menu View Not Working - Desktop Fine

JavaScript
1

Our web page is nearly done and ready to publish except the Mobile Menu Views in Tablet view and Phone view do not work right for some events.

www.enflow.com/index.html

  1. In Mobile Pad/Tablet View and in Mobile Phone view… When you CLICK A LINK FROM THEIR DROP DOWN MENU the page scrolls to the proper bookmark section but the link menu does not then disappear or slide back out of view. The user would have to click the back arrow (that is present just above) to slide the mobile menu back out of view.

Any FIX suggestions on how to do an onclick auto slide back event versus the need to click the back arrow button to manually get the mobile menu in pad view/phone to slide back out of view immediately.

  1. In Phone View (smallest view) most times when you click a link to go to a bookmark section nothing happens ?

Any FIX suggestions on what we are doing wrong in phone view for menu onclick that does not jump to a bookmark section on our page…

thank you…

2

That would require JS and you would need to remove the active classes from the hamburger toggle and the from the navbar parent when you click an item.

I’ll move the thread to the JS forum as it’s not a css answer.

It looks like you are using this navbar plugin so I would suggest you check whether there is actually a build in option to do this. This looks like a paid for product so I would check their support first (unless I’m mistaken).

1 Like
3

It appears to just be going to “contacts” and then it’s stuck. The console isn’t throwing any errors that I can see, which isn’t helpful.

Personally I would want to strip this page back or create a new page with just the nav menu and some lorem ipsum with respective ids ‘about’, ‘services’, ‘products’ etc, that way removing any potential conflicts out of the equation.

If you look at the demo, which doesn’t have the mobile issue
http://cms.devoffice.com/coding-dev/rd-navbar/demo/#features

This appears to be the JS setup code (js/script.js).

(function ($) {
    var o = $('.rd-navbar');
    if (o.length > 0) {
        include('../dist/js/jquery.rd-navbar.js');

        $(document).ready(function () {
            o.RDNavbar({
                stickUpClone: false,
                stickUpOffset: 170
            });
        });
    }
})(jQuery);

On yours it appears to be this section

// RD Navbar
if (plugins.rdNavbar.length) {
  var aliaces, i, j, len, value, values, responsiveNavbar;

  aliaces = ["-", "-sm-", "-md-", "-lg-", "-xl-", "-xxl-"];
  values = [0, 576, 768, 992, 1200, 1600];
  responsiveNavbar = {};

  for (i = j = 0, len = values.length; j < len; i = ++j) {
    value = values[i];
    if (!responsiveNavbar[values[i]]) {
      responsiveNavbar[values[i]] = {};
    }
    if (plugins.rdNavbar.attr('data' + aliaces[i] + 'layout')) {
      responsiveNavbar[values[i]].layout = plugins.rdNavbar.attr('data' + aliaces[i] + 'layout');
    }
    if (plugins.rdNavbar.attr('data' + aliaces[i] + 'device-layout')) {
      responsiveNavbar[values[i]]['deviceLayout'] = plugins.rdNavbar.attr('data' + aliaces[i] + 'device-layout');
    }
    if (plugins.rdNavbar.attr('data' + aliaces[i] + 'hover-on')) {
      responsiveNavbar[values[i]]['focusOnHover'] = plugins.rdNavbar.attr('data' + aliaces[i] + 'hover-on') === 'true';
    }
    if (plugins.rdNavbar.attr('data' + aliaces[i] + 'auto-height')) {
      responsiveNavbar[values[i]]['autoHeight'] = plugins.rdNavbar.attr('data' + aliaces[i] + 'auto-height') === 'true';
    }

    if (isNoviBuilder) {
      responsiveNavbar[values[i]]['stickUp'] = false;
    } else if (plugins.rdNavbar.attr('data' + aliaces[i] + 'stick-up')) {
      responsiveNavbar[values[i]]['stickUp'] = plugins.rdNavbar.attr('data' + aliaces[i] + 'stick-up') === 'true';
    }

    if (plugins.rdNavbar.attr('data' + aliaces[i] + 'stick-up-offset')) {
      responsiveNavbar[values[i]]['stickUpOffset'] = plugins.rdNavbar.attr('data' + aliaces[i] + 'stick-up-offset');
    }
  }


  plugins.rdNavbar.RDNavbar({
    anchorNav: !isNoviBuilder,
    stickUpClone: (plugins.rdNavbar.attr("data-stick-up-clone") && !isNoviBuilder) ? plugins.rdNavbar.attr("data-stick-up-clone") === 'true' : false,
    responsive: responsiveNavbar,
    callbacks: {
      onStuck: function () {
        var navbarSearch = this.$element.find('.rd-search input');

        if (navbarSearch) {
          navbarSearch.val('').trigger('propertychange');
        }
      },
      onDropdownOver: function () {
        return !isNoviBuilder;
      },
      onUnstuck: function () {
        if (this.$clone === null)
          return;

        var navbarSearch = this.$clone.find('.rd-search input');

        if (navbarSearch) {
          navbarSearch.val('').trigger('propertychange');
          navbarSearch.trigger('blur');
        }

      }
    }
  });


  if (plugins.rdNavbar.attr("data-body-class")) {
    document.body.className += ' ' + plugins.rdNavbar.attr("data-body-class");
  }
}

There’s some stuff going on at the top which appears to be setting up breakpoints, but it’s all a bit ambiguous.

I would want to test out the stripped back page with the short demo version js first just to see if it works.

I’ve also just seen this !isNoviBuilder. Is this a drag and drop website builder service?

2 Likes
4

Thanks for your reply… Your diagnosis is very helpful as we were stuck on why we could not just css our way out of the media view problem.

As you suggest, I will check with the plugin navbar support option first and then go from there and reply back if i have any coherent info to query about back to SPt…

thanks Paul…

1 Like
5

Hi RPG…

thanks for your input…appreciated too…

“”“Personally I would want to strip this page back or create a new page with just the nav menu and some lorem ipsum with respective ids ‘about’, ‘services’, ‘products’ etc, that way removing any potential conflicts out of the equation.”“”

Exactly !.. When we first started to flesh out this page, a ways back, that was my exact FIRST idea, similar to yours, to strip out everything that was unnecessary in this upper Navbar area upper section so we did not have classes or modules effecting each other. But i did not follow my own intution.

thanks… CJ

1 Like
6

“”“I’ve also just seen this !isNoviBuilder . Is this a drag and drop website builder service?”“”

Not a website builder service it was a template page I purchased because I liked the large business image very much for my website.

We should have only used the image and removed the code… the Navbar part of the template has been very difficult to work with… but we are 98% there to publish even after struggling with this for a month or two… If i can just get the Mobile View drop down menu to work right i can publish this page.

Even then, after we publish it, I want to do what you have suggested… Make another development page copy of this and strip out everything unnecessary to factor the little guy into complete simplicity.

So it is not a mudball string.

1 Like
7

That sounds like a plan to me :grin:

1 Like
8

Regarding the menu closing after clicking on a menu item.

I could be barking up the wrong tree, but if you look at the repository
https://github.com/ZemezPlugins/rd-navbar/blob/master/dist/js/jquery.rd-navbar.js

Line 56 we have

callbacks: {
  onToggleSwitch: false,
  onToggleClose: false,
  onDomAppend: false,
  onDropdownOver: false,
  onDropdownOut: false,
  onDropdownToggle: false,
  onDropdownClose: false,
  onStuck: false,
  onUnstuck: false,
  onAnchorChange: false
}

onAnchorChange seems to be a possibility.

It’s also mentioned at the bottom of the documentation
http://cms.devoffice.com/coding-dev/rd-navbar/documentation/index.php?lang=en&section=settings

Oh and these are the two elements that appear to need ‘active’ removing from.
.rd-navbar-main .rd-navbar-toggle
.rd-navbar-main .rd-navbar-nav-wrap

One to toggle the burger and the other to trigger the transition of the menu.

Edit: Looking over your script again I see you already have a section dealing with callbacks

plugins.rdNavbar.RDNavbar({
    anchorNav: !isNoviBuilder,
    stickUpClone: (plugins.rdNavbar.attr("data-stick-up-clone") && !isNoviBuilder) ? plugins.rdNavbar.attr("data-stick-up-clone") === 'true' : false,
    responsive: responsiveNavbar,
    callbacks: {
      onStuck: function () {.....

I would imagine you could add an onAnchorChange here and amend the two elements.

2 Likes
9

RPG… Thank you… Excellent researching and I appreciate what you have found… We will add it to our notes.

Some how we will get this sorted out.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.