Hustle Display problems

I have a Hustle Slide in on this site that had some custom css added to hide the mailchimp group checkboxes (to get around the hidden groups not working).
It looks like the plugin updated from 2.x to 3.x and this has all broken.
The groups weren't getting passed through to Mailchimp, so I reloaded the Mailchimp settings in Hustle which has fixed that, but then the layout broke by showing all the hidden checkboxes. I have hidden them again myself, but:
1) I can't get the submit box on the same line as the email
2) On Chrome, the slide in on the homepage is too low, seems fine on all other browsers and pages for me though
If you look in the custom CSS, the bottom 3 items I have added to fix new issues, the other was all there from the version 2.x issues

  • Kris Tomczyk

    Hi artroom

    Hope you are doing good today. Thank you for support access.

    I made small investigation on your site. As for nr 1 - submit box on the same line as the email, please try to add this media query in custom css section:

    @media (min-width: 783px){
    .hustle-modal .hustle-modal-optin_form .hustle-modal-optin_groups{-ms-flex-direction:none;flex-direction:none}
    .hustle-modal .hustle-modal-optin_form .hustle-modal-optin_group {float:left; }
    .hustle-modal .hustle-modal-optin_form .hustle-modal-optin_group input {width:580px;}
    }
    
    @media (min-width: 883px){
    .hustle-modal .hustle-modal-optin_form .hustle-modal-optin_group input {width:610px;}
    }

    It should fix this.

    As for nr 2 - Chrome issue - I notice that home page use extra top black menu, which does not exist on other pages.

    This menu is added above <!DOCTYPE html>

    I see your Home — Front Page use "home -template" and your theme is a child theme of Twenty Sixteen.

    It is possible you add this menu in this "home -template" above the
    <?php get_header(); ?>
    which make the issue here and Chrome cannot interpret this correctly, that is why Slide in can be move here.

    Your Wordpress installation block php editor for theme. To confirm my observation I will need your FTP credentials(host/login/password).
    Please send it through our secure contact form here https://premium.wpmudev.org/contact/#i-have-a-different-question and make sure that subject is "I have a different question" and:
    - Mark to my attention: ATTN: Krzysztof Tomczyk
    - FTP credentials (host / username / password)
    - Link back to this thread

    Please confirm here in thread that you have sent that message.

    Or please double check that home template.

    If you have any more questions, please ask :slight_smile:

    Kind Regards,
    Kris

  • Kris Tomczyk

    Hi artroom

    Thank you for access and ftp credentials.

    As I suspected the code for extra menu was implemented in home.php file above <?php get_header(); ?> line.
    I try to move this below but another issue appear - menu on home page starts display below the banners. I took a closer look on your header.php file and turned out there is many php code/define for this homepage banner.

    What I did:
    - I remove menu from home.php file
    - I add this menu to header.php file with extra code to display only on home page

    <?php if(is_front_page()) { ?>
    <div class="menu-middle">
    	<div class="container1">
    
    			<?php
    			wp_nav_menu( array(
    			'menu' => 'EMU',
    			'theme_location' => 'secondry',
    			'container_class' => '',
    			'menu_class' => '',
    			'menu_id' => '',
    			'container' => '',
    
    			) );
    			?>
        </div>
    </div>
    <?php } ?>

    This remove the issue with incorrect html source and issue in Chrome with Hustle Slide in.

    As for a Hustle input width I correct my css and I added this code to your Slide in custom css section:

    @media all and (min-width: 783px){
    .hustle-modal .hustle-modal-optin_form {display:block;display:block;-ms-flex-wrap:nowrap;flex-wrap:nowrap; overflow:hidden;}
    .hustle-modal .hustle-modal-optin_form .hustle-modal-optin_groups{-ms-flex-direction:none;flex-direction:none}
    .hustle-modal .hustle-modal-optin_form .hustle-modal-optin_group {float:left; }
    .hustle-modal .hustle-modal-optin_form .hustle-modal-optin_group input {width:580px;}
    }
    
    @media all and (min-width: 883px){
    .hustle-modal .hustle-modal-optin_form .hustle-modal-optin_group input {width:610px;}
    }

    Kind Regards,
    Kris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.