This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: 

Mobile navigation button not opening/closing on homepage – btn-navbar

  • Creator
    Topic
  • #19309
    srumery
    Participant

    There seems to be a conflict with the parallax sections on the homepage that are interfering with the mobile navigation opening and closing when touching or clicking the btn-navbar. It works on the rest of the site quite well but not on the homepage.

    http://www.ropescoursesinc.com/

    I have a plugin that loads the necessary javascript and CSS for the parallax sections to function just on the homepage. I have worked through each line of the code and found that it is isolated to jquery but still can’t find a solution to the problem.

    Maybe there is a class element that has the same name and is interfering somehow. I’ve also tried z-index and other css options and still can’t find the root of the problem.

    Another issue is that I would like to make the menu bar fixed (sticky) like the rest of the site. If I position the menu bar as fixed on the homepage, it disappears when you scroll down. I think these two issues are related.

    There is another site that I have seen the same issue with and maybe looking at that will help. There seems to be a conflict with the event single page that is interfering with the mobile navigation from opening and closing when touching or clicking the btn-navbar. It works on the rest of the site quite well but not on event single pages. Here is one example event:

    http://positivelyallegan.org/event/hubbard-street-farmers-market-5/

    Can you see if anything specific is going on that is causing this?

    If we can find the issue with one of these, I’m sure it is related to the other.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #19311
    srumery
    Participant

    From what I can tell, the display: block; attribute of the #access element is set when the page loads but it is not being triggered when btn-navbar is touched/clicked.

    media=”all” @media (max-width: 992px)
    #access {display: none;}

    When I change this to display: block; using the Chrome inspector, the menu appears. Can this be triggered by a script? Is is getting blocked by a script?

    #19332
    Jason Bobich
    Keymaster

    You need assess the javascript errors. In your Chrome developer tools, click the “Console” tab. Basically, the javascript you’re adding in the plugin you’ve created is breaking anything that comes after it, which includes (1) theme.js (which has mobile nav javascript) and (2) a Foobox script.

    First, your plugin shouldn’t be including jQuery because jQuery is already included in the theme. So, you’re putting it there twice. You can avoid duplicate scripts by enqueuing scripts properly. For example, to enqueue jQuery, you’d do this:

    wp_enqueue_script('jquery');

    … You can do this because it’s already a file that’s included with the WordPress package. And this ensures it doesn’t get placed in your source code more than once.

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    If that doesn’t solve the issue, you’ll need to dive further into your scripts. After you’ve made it so there are no javascript errors, in your console — If your button still isn’t working, there may be a second issue, which is a CSS z-indexing issue. But until you debug all of your javascript, it’s not going to work.

    #19333
    Jason Bobich
    Keymaster

    On another note, you should check out the Jump Start 2.0 beta — http://support.themeblvd.com/forums/topic/jump-start-2-0-beta/

    Layout Builder 2.0 paired with the Jump Start 2.0 beta has support for parallax BG’s in the display options for sections of elements. I’m not really sure why you’d need all that javascript to accomplish parallax backgrounds. If anything, you can checkout the script I wrote for it, just open up /framework/assets/js/themeblvd.js, and search for “parallax”.

    #19352
    srumery
    Participant

    Got it. I enqueued all scripts required by the parallax features and set themeblvd_theme as the dependent. I was also able to determine some scripts were unnecessary so they have been removed.

    Thank you for the tip, Jason.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.