This was working fine until yesterday. I edited some CSS

This was working fine until yesterday. I edited some CSS on the header region, saved and then the problem came about.
When I enter the edit function of the header region, nothing is clickable, not the green settings cog, not the red delete icon, not the add functions.
I was using Chrome (version 47) but have tested on Firefox (version 43.0.4) and IE (version 10) - with IE I can't even see that section - see screenshot attached.
I have also tested on another PC to make sure it's not just my laptop.
I have used different internet connections and I have restarted, cleared caches, and uninstalled Scribe and deactivated the Dashboard.

I have noticed a few issues with the UI (shuddering screen when I try scroll down, image placeholder is not editable - have to close and reopen Upfront).

Is there an optimal working environment to be using Upfront? Device/connection speed/browser/OS etc etc?

Thanks

  • Adam Czajczyk

    Hello Dianne!

    I visited your site and I can see that the navigation header sticks to the top right now and seems to be playing well with the rest of the site.

    In order to make it "shrink" on scroll you will want to use some additional JavaScript code. Here's a piece that should do the trick:

    <?php 
    
    function wpmu_shrink_upfront_nav() {
        ?>
        <script type="text/javascript">
        jQuery(function($) {
    		$(window).scroll(function() {
    			if ($(document).scrollTop() > 150) {
    				$('#upfront-region-header').css('min-width','70px');
    				$('#upfront-region-header').css('height','70px');
    			} else {
    				$('#upfront-region-header').css('min-width','85px');
    				$('#upfront-region-header').css('height','85px');
    			}
    		});
    	});
        </script>
        <?php
    }
    add_action('wp_footer', 'wpmu_shrink_upfront_nav');

    In order to use it, please create an empty file with a ".php" extension (for example: "shrink-menu.php") and paste that code inside. Next, access your server via FTP and upload this file to the "/wp-content/mu-plugins/" folder.

    If there's no "mu-plugins" folder inside "wp-content", just create it.

    You may want however to adjust header "on scroll" size though as well as "scroll amount". Header size can be adjusted by changing values (in pixels) in lines

    $('#upfront-region-header').css('min-width','70px');
    				$('#upfront-region-header').css('height','70px');

    and the scroll amount is here (just replace "150" with value in pixels, if needed):

    if ($(document).scrollTop() > 150) {

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Dianne!

    The downside of the code I gave you is that it's very "fragile" and it may have been updated with some changes made via Upfront editor. The fix would be easy fortunately as it only requires identifying a proper container (HTML element).

    It seems you did this right as according to my tests "upfront-region-container-header" will do the trick. However it's a class name and not an ID of an element and should be addressed as

    ".upfront-region-container-header"

    Please note the point/dot at the beginning. How would you know that in future?
    In case an identified element is like class="upfront-region-name", you use a "." (dot) in front of it. In case it's like id="upfront-region-name", you use a "#" (hash character) in front of it.

    Replacing "#upfront-region-container-header" with ".upfront-region-container-header" should then make the code work again.

    Best regards,
    Adam

  • Adam Czajczyk

    Hey Dianne!

    I took another look at your site and I think I may know what was the effect. I think the "header area" got shrinked but the logo remained the same size (thus cut-off) and the menu items disappeared. Am I correct?

    If so, the solution would be to add more "shrinking functions" to the code. The main container must get shrinked but additionally you would then want to reduce logo's size (so it would fit inside the container and move the menu items a big up so they wouldn't disappear.

    In order to do this, you would want to add two more lines right below this one:

    $('.upfront-region-container-header').css('height','70px');

    The lines would be:

    $('.upfront-region-container-header .upfront-image-container img').css('height,'50px');
    $('.upfront-region-container-header .menu-top-nav-menu-container').css('margin-top','-70px');

    Best regards,
    Adam

  • DIANNE

    Hi Adam

    Sure it's this:

    <?php

    function wpmu_shrink_upfront_nav() {
    ?>
    <script type="text/javascript">
    jQuery(function($) {
    $(window).scroll(function() {
    if ($(document).scrollTop() > 150) {
    $('.upfront-region-container-header').css('min-width','70px');
    $('.upfront-region-container-header').css('height','70px');
    $('.upfront-region-container-header .upfront-image-container').css('height','50px');
    $('.upfront-region-container-header .menu-top-nav-menu-container').css('margin-top','-70px');
    } else {
    $('.upfront-region-container-header').css('min-width','85px');
    $('.upfront-region-container-header').css('height','85px');
    }
    });
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'wpmu_shrink_upfront_nav');

    I need to go study this stuff a bit more too. Appreciate your help.

  • Adam Czajczyk

    Hello Dianne,

    I'm sorry this still isn't working for you. Let's try a bit different approach and hopefully this time we'll get it working :slight_smile:

    That said please replace the code that you used so far with this one (replace entire code):

    <?php
    
    function wpmu_shrink_upfront_nav() {
    	?>
    	<script type="text/javascript">
    	jQuery(function($) {
    	$(window).scroll(function() {
    		if ($(document).scrollTop() > 150) {
    			$('#upfront-region-container-header').addClass('menu_shrinked');
    			}
    		else {
    			$('#upfront-region-container-header').removeClass('menu_shrinked');
    		}
    	});
    	});
    	</script>
    	<?php
    }
    add_action('wp_footer', 'wpmu_shrink_upfront_nav');

    This itself will not affect the site visually but will give us a convenient way to change header design with CSS. That said, please add these custom CSS rules and see how it works for you. If necessary, I'll be able to tweak that for you.

    .menu-shrinked {height:80px;}
    .menu-shrinked .upfront-region-container-bg {height:79px;overflow:hidden;}
    .menu-shrinked .upfront-image-container {margin-top:0px;}
    .menu-shrinked .upfront-image-container img {height:50px;}
    .menu-shrinked .menu-top-nav-menu-container {margin-top:-60px;}

    To add this CSS to your site:

    - open your front-page in browser
    - enable "Upfront" editor by clicking on an Upfront link in admin toolbar
    - switch left Upfront panel to "Theme settings"
    - click on "add custom CSS rules" link there
    - add above code at the very end of an existing CSS code
    - save CSS editor and entire Upfront

    Let me know if this helped, please!

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Dianne!

    Thank you for your response and please take my sincere apologies as I didn't notice that I made a mistake I made. I created and tested the code on my own site and then prior to posting it here I've adjusted it to match your site's HTML structure. While doing this I misspelled class name in CSS so instead of

    ".menu_shrinked"

    I made it

    ".menu-shrinked"

    and that's a significant difference. Once again, I apologize for this mistake.

    That said, I took a liberty of accessing your site's dashboard and have already fixed that for you. I also checked the site's front-end and it seems it's now working :slight_smile:

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.