• Resolved nlamont

    (@nlamont)


    I’m very happy with the Neutro theme except for the fact that when I reduce the size, or view it on a smaller device, the menu disappears. I’m using the secondary menu as my main navigation because I want the coloured strip. At smaller sizes the colour I’ve chosen changes to the default blue of Neutro and the menu items are replaced by a link ‘Menu’ which should show the items in a dropdown but just seems to refresh the page. This doesn’t happen in the demo site so I must have something in mine that’s causing it but I can’t see what. I’m not using a child theme or custom css. Can you help please?

    The site is at https://www.normanlamont.com/

Viewing 7 replies - 1 through 7 (of 7 total)
  • The Google Analyticator plugin’s js file is interfering with the menu. I don’t know why but firebug’s console tab shows the following error when I click on that menu

    ReferenceError: analyticsSnippet is not defined
    https://www.normanlamont.com/wordpress/wp-content/plugins/google-analyticator/external-tracking.min.js?ver=6.4.7.1
    Line 1

    Disable this plugin and see if it works.

    EDIT: I found out why it interferes. The JS tracks clicks on the page so if an anchor tag is clicked this code gets the value in the “href” attribute.

    But in the case of this mobile menu there is the href is empty

    <a id="mobile-secondary-menu-btn" class="btn btn-neutro" href=""><span>Menu</span></a>

    So this code is generating an error. As a temporary fix edit this file

    wp-content/plugins/google-analyticator/external-tracking.min.js

    Replace

    var t=e.attr("href");if(t==undefined)return;

    with

    var t=e.attr("href");if(t==undefined || t=="")return;

    If this works we can notify the plugin developers to do this in their next release.

    Thread Starter nlamont

    (@nlamont)

    Excellent! Thank you. I’ve disabled the plugin for now and the menu works. It still loses the colour but I’ll work that out. Tomorrow I’ll try reinstating the plugin with that fix but for now thank you very much!

    Thread Starter nlamont

    (@nlamont)

    Thanks. I’ve changed the code as you suggest and reactivated the plugin and the menu link still works.

    I’d still like to know why the appearance changes at smaller resolutions. I could probably work it out if I could see the style sheet the developer is using but in the Editor styles.css has nothing visible but comments.
    How do I view the actual style sheet? All I see is:

    /*
    Theme Name: Neutro
    Theme URI: https://seotemplates.net/blog/theme/neutro-wordpress-theme/
    Author: Septian Ahmad Fujianto
    Author URI: https://seotemplates.net/
    Description: A responsive modern design theme geared to unleash your website content potential. Built based upon HTML5, CSS3 and the rock solid Hybrid Core framework, ensuring the best design and backend code. Support WordPress post formats, with specially tailored design for every supported post formats. Built in touch ready featured content slider with configurable content options, you can easily show your best content to audiences. With Theme customizer and custom css, you can easily customize the theme look and feel to match your desire. The perfect starting point theme for any kind of website you desired.
    Version: 1.0.1
    License: GNU General Public License
    License URI: https://www.gnu.org/licenses/gpl.html
    Tags: gray, white, green, blue, two-columns, three-columns, right-sidebar, flexible-width, custom-background, custom-colors, custom-menu, featured-images, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
    Text Domain: Neutro
    
    */

    I emailed the developer last week about this but have had no reply so I assume I have to work it out for myself. I could if I could see the stylesheet.

    This theme uses the loads styles from css/main.css. There is a media query there which hides the default menu and displays the mobile menu in smaller screens.

    @media only screen and (min-width: 768px) and (max-width: 959px) {
    .......
      #mobile-main-menu-btn,
      #mobile-secondary-menu-btn {
        display: block;
        text-align: left;
        border-bottom: 1px solid #e6e6e6;
      }
    ........
      .main-menu,
      .secondary-menu {
        display: none;
      }
    ............
    }
    Thread Starter nlamont

    (@nlamont)

    Thanks Jesin. Can you tell me why main.css doesn’t show in the list of files I can edit from within WordPress? The only CSS file that shows in the Editor is style.css, although all the rest of the PHP files for the theme are there. Is it normal for theme developers to hide some of the files from editing in this way?

    I presume I have to download main.css from FTP to edit it?

    AFAIK the WordPress file editor only displays files in the main directory of the theme and this file is inside a sub directory called css/

    The authors do not have to hide anything, they may have wanted to segregate all CSS files in one directory for better management.

    I presume I have to download main.css from FTP to edit it?

    Yes but you can also use the File Manager provided by your web host.

    How can I setup for the visibility of mobile menu in The 7 them?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Problem with menu at smaller sizes’ is closed to new replies.