Mobile Menu Not Working - Single Page Navigation

[VitalityCBD]

Hello,

My mobile menu starts as collapsed, and when I click it, it does not open.
Any trouble shooting on this?
I’m using a single page navigation on this website.

Official Homeboy Sandman | Rapper, Writer, Lyricist

Also, I have a code that rounds the edges of all images, but I was hoping to exclude that rounding on the navigation icon.
Any trouble shooting you have for that would be great as well.

Jesse

[Prasant]

Hello Jesse,

Thanks for writing in!

I can see mobile menu not working on mobile devices. Please try out following solutions and let us know the outcome:

1. I see that you are using Cloudflare. Please clear Cloudflare cache and for now put Cloudflare on development mode.
2. Try testing for plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
3. I see that you are using child theme. If you have made any changes into child theme then activate parent theme and then test hamburger menu to see if it works.

If you still have problems kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

[VitalityCBD]

No plugins other than cornerstone was in play at the time.
It’s not plugin related.
Cleared the cloudflare cache, but that didn’t do anything.

[VitalityCBD]

And for the other issue I reported, this is the CSS i’m using to round all images.

img {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

I just need to exclude the navigation icon from the rounding.

[ruenel]

Hello Jesse,

The mobile menu is not displaying because you have added this custom css:

ul.x-nav {
    display: none;
}

Please remove that code block and the mobile menu should display. And if you only want to round the edges of the images within the content area, please have your code updated and use this instead:

.entry-content img {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

Hope this helps. Kindly let us know.

[VitalityCBD]

ul.x-nav {
display: none;
}

got rid of the bottom nav, so what should i use to replace that code that won’t break the mobile nav?

Though now that i’m looking at it, I think i’d rather just swap the bottom nav with the bottom footer.
What code should i use to switch the placement so that the nav appears above the footer credits?

Jesse

[ruenel]

Hey Jesse,

Do you want to swap the footer menu and the footer content? If that is the case, since you have your child theme active and ready, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/ICON/WP-FOOTER.PHP
// -----------------------------------------------------------------------------
// Footer output for Icon.
// =============================================================================

?>

  <?php x_get_view( 'global', '_footer', 'widget-areas' ); ?>

  <?php if ( x_get_option( 'x_footer_bottom_display' ) == '1' ) : ?>

    <footer class="x-colophon bottom" role="contentinfo">
      <div class="x-container max width">

        

        

        <?php if ( x_get_option( 'x_footer_menu_display' ) == '1' ) : ?>
          <?php x_get_view( 'global', '_nav', 'footer' ); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_social_display' ) == '1' ) : ?>
          <?php x_social_global(); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_content_display' ) == '1' ) : ?>
          <div class="x-colophon-content">
            <?php echo do_shortcode( x_get_option( 'x_footer_content' ) ); ?>
          </div>
        <?php endif; ?>

      </div>
    </footer>

  <?php endif; ?>

<?php x_get_view( 'global', '_footer' ); ?>

3] Save the file named as wp-footer.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/footers/views/icon

You will need to create the folder path since it does not exist in the child theme yet.

We would love to know if this has worked for you. Thank you.