Support » Theme: Sela » Mobile WordPress menu button reloads page = vicious cycle?

  • This is a pretty basic question (I think) but I just can’t figure out how to fix it. On my WordPress site, when I view it on a mobile device, when I click the MENU button/bar, the menu expands briefly before the page reloads. When the page reloads, the Menu bar is collapsed again and this cycle just repeats, it’s like I cannot use the Menu on a mobile device.

    I found a post on Stack Overflow where someone seems to have the same issue but I’m just not sure how to follow their instructions:

    Change <a class="navicon mtoggle" href=""> to <div class="navicon mtoggle"> then update your css:

    nav#mobile .navicon{
    cursor:pointer;
    }

    Can someone maybe please explain to me in which file I change <a class="navicon mtoggle" href=""> to <div class="navicon mtoggle"> and also in which file I update my CSS?

    Or if there is a different solution to this issue, can someone please provide me with some guidance on how to fix it? I would be very grateful!

    I am just hoping to have my Menu expand properly on a mobile device without it reloading the page and getting stuck in this loop. Any assistance would be greatly appreciated! Thanks so much in advance for any help with this!

    • This topic was modified 6 months, 4 weeks ago by  iconoclastix.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hi there,

    I can see the issue if I view your site on mobile, but I’m not able to replicate it on a test site with this theme active, so it appears the issue is specific to your site, rather than a problem with the theme.

    The first thing we need to rule out is a plugin conflict, so please try deactivating all your plugins except Jetpack and see if this still happens. If it works, re-enable your plugins one at a time, checking the site in between, until you find the one that causes the problem to start again.

    If you’re able to track this down to a specific plugin, please contact the developers of that plugin for help.

    I found a post on Stack Overflow where someone seems to have the same issue but I’m just not sure how to follow their instructions:

    Can you please give a link to the post so I can see that code in context? I can find only one post on the WordPress Stack Exchange at https://wordpress.stackexchange.com/search?q=sela, and none of the threads I can find for Sela on Stackoverflow.com appear to be about this.

    I definitely would not advise modifying your theme’s files directly to add code like that, besides which that code don’t appear to even exist in this theme – the Menu item on the mobile view is a button element, not an a element.

    iconoclastix

    (@iconoclastix)

    Hi Kokkie, thanks so much for your reply! Sorry for my late reply, I just returned from vacation.

    I tried disabling all of the plugins that were active on this site except Jetpack, and the error is still occurring. I then tried deactivating Jetpack as well, just to see, and the error is still occurring with all plugins deactivated. I am not sure if this is helpful to see, so I have left all of the plugins deactivated at the moment on the site: http://ssmcwl.ca/wpdev

    Here is the post I found on Stack Overflow: jQuery Mobile Drop Down Menu Causing Page Reload

    Thank you again for any assistance you can provide! I greatly appreciate your help!

    lizkarkoski

    (@lizkarkoski)

    Hi –

    Just to be clear, did you also try disconnecting and reconnecting the Jetpack connection?

    When I click on the blue menu on mobile view the entire menu opens up as I would expect. I have not replicated the behavior that you’re seeing. Does the behavior persist in more than one browser?

    Hi, just checking in on this. I actually do see the error on my phone.

    I noticed you’re missing accordion.js — have you modified the theme?

    Hi Liz, yes I did disconnect and reconnect the Jetpack connection, the behaviour is persisting. And yes, I am experiencing this behaviour in Firefox, Chrome, Edge and Opera when viewing on a mobile-sized browser window. When I click the Menu button, the menu appears very briefly before the entire page reloads – it’s as if the Menu button on mobile is linked to to root “/” of the site…is there any way to prevent it from linking to this page, and to just open the menu like it’s supposed to do?

    Hi Supernovia, yes I have made some modifications to the theme, but as far as I know, the only changes I made were to the look, not to the functionality. In order to use the accordions I’ve created on that site, I’m using the Accordions plugin (https://wordpress.org/plugins/accordions) – is this somehow interfering with the menu accordion?

    Thank you very much for any advice you can provide!

    Hi there,

    What happens if you deactivate the Accordions plugin? Also, what modifications did you performed on your theme?

    Hi Fotis, even when I deactivate the Accordions plugin, the issue still persists on a mobile browser window.

    I just used WinMerge to compare the style.css files in my current site vs the one that comes with the Sela theme from a fresh download – all that I’ve changed throughout the theme are element colours and background colours, as well as some fonts and font styles. I also have added/created the following code to the bottom of the file, which styles the accordions (could this be causing the issue?) as well as some other elements:

    .accordionStyle .ui-accordion .ui-accordion-header {
        background:#000080;
        color:#fff;
    }
    .accordionStyle .ui-accordion .ui-accordion-content {
        color:#000;
    }
    
    a.footerLink:hover, a.footerLink:focus, a.footerLink:active {
    	color: #ffc000;
    	text-decoration: none;
    }
    p a, li a, td a {
        font-weight: bold;
    }
    .sub-menu a {
        color:#000080 !important;
    }
    .sub-menu a:hover,
    .sub-menu a:focus,
    .sub-menu a:active {
        color:#ffc000 !important;
    }
    .wpsm-show, .wpsm-hide {
        font-weight:bold;
    }
    .wpsm-hide {
        margin-bottom:15px !important;
    }
    .wpsm-show a, .wpsm-show:active, .wpsm-show:visited, .wpsm-hide a, .wpsm-hide:active, .wpsm-hide:visited {
       color:#000080 !important;
    }
    .wpsm-show:hover, .wpsm-hide:hover {
       color:#ffc000 !important;
       text-decoration:none !important;
    }
    .accordions .ui-widget-content a, .accordions .ui-widget-content a:visited {
        color:#000080;
    }
    .accordions .ui-widget-content a:hover {
        color:#ffc000;
    }
    .noLink {
        font-weight:bold;
        color:#000080;
    }
    .img_TopRight {
        float:right;
        padding-left:10px;
    }
    .centered {
        text-align:center;
    }
    .videoButton {
        font-size:16px !important;
    }

    Thank you again for any assistance you can provide! I would really appreciate it, I am so confused why this menu is producing this error!

    Hi Supernovia, yes I have made some modifications to the theme, but as far as I know, the only changes I made were to the look, not to the functionality.

    I just used WinMerge to compare the style.css files in my current site vs the one that comes with the Sela theme from a fresh download

    Hi there,

    The menu fails to function correctly because the accordion.js file appears to be missing from /wp-content/themes/sela/js/

    Additionally, it looks like the footer.php file may have been modified to change the links at the bottom without the use of a child theme.

    Please note that making modifications to theme files without using a child theme will result in those modifications being overwritten each time the theme is updated, creating more problems in the future.

    If core files in the theme have been removed or edited, please:

    • make a copy of those changes and store them on your PC or laptop
    • delete the modified version of Sela currently being used on the site
    • install a fresh, unmodified version of the theme
    • check if the issue persists when a fresh version of Sela is activated and all plugins are temporarily disabled at the same time

    I just used WinMerge to compare the style.css files in my current site vs the one that comes with the Sela theme from a fresh download

    Custom CSS can be safely added to WordPress in Appearance > Customize > Additional CSS. CSS added here is update-proof, unlike changes made to the main style.css of the parent theme.

    If you need to modify the footer links, the safe update-proof way to do it is to:

    • create a child theme
    • make a copy of Sela’s footer.php in the child theme
    • make your modifications to the file in the child theme

    How to create a child theme – https://managewp.com/blog/how-to-create-a-child-theme

    I hope this helps 🙂

    Hi Gary, thanks so much for your reply, this is definitely very helpful!

    A few more questions for you, since I’m (clearly haha) no expert at this.

    Where am I supposed to find the file ‘accordion.js’? When I downloaded a fresh copy of the Sela theme and extract, inside the /js folder I don’t see any such file. The files inside the /js folder that I do see are:

    • customizer.js
    • keyboard-image-navigation.js
    • navigation.js
    • sela.js
    • skip-link-focus-fix.js

    I’m confused why the site is looking for a file that doesn’t seem to be part of the theme? Is this a result of something that I did?

    I am currently in the process of replacing my modified version of the Sela theme with a freshly downloaded version of it instead, and will deactivate the plugins as instructed and let you know what the results are!

    EDIT: Hi Gary, just as a quick update, I installed a fresh version of the Sela theme and the menu seems to be working just fine on mobile, so you were right, it was definitely something related to however I had modified it. I didn’t even have to deactivate any of the plugins (that would have been my next step) but upon re-installing a new version it worked immediately, so thank you for this tip!

    That is really helpful to know about the child theme styling, I will follow this approach to re-apply the changes I had made to the previous version!

    • This reply was modified 5 months, 2 weeks ago by  iconoclastix.

    You’re right. There isn’t an accordion.js file in Sela, and there isn’t supposed to be.

    However, something on your site was causing the browser to try to load that non-existing file. That was causing a javascript error.

    I installed a fresh version of the Sela theme and the menu seems to be working just fine on mobile, so you were right, it was definitely something related to however I had modified it.

    Glad to see things are working correctly with a fresh install of the theme 🙂

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