Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1372635

    hi,

    we would like to have a black bar across the entire left side and the footer at the bottom of the page. The left bar should contain the menu and other logos. So far we got this implemented. The problem here is that if the content is long enough, the footer is at the bottom, but the left bar is not completely black. If the content text is shorter, the bar on the left is completely black, but the footer is not attached to the bottom.

    Can you help here?

    #1372832

    Hey gdsconcepts,
    Thanks for the link to your page, it looks like you have added custom css to set the footer as fixed to the bottom of the screen, as I understand your question you actually want the footer at the bottom of the page so it will scroll into view. So please remove your custom css for this.
    Now the issue that the sidebar header doesn’t reach the bottom can be solved with this function added to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_sidebar_header_min_height() { ?>
      <script>
    window.addEventListener('DOMContentLoaded', function() {
      (function($){
        $('.html_header_sidebar #top #header').each(function() {
          var pageHeight = $('body').height();
          $(this).css({'min-height': pageHeight })
      });
    })(jQuery);
    });
    </script>
      <?php
    }
    add_action('wp_footer', 'custom_sidebar_header_min_height');

    Best regards,
    Mike

    #1372908

    Thanks for your answer.
    Unfortunately I get an error message when I enter the code.

    #1372910

    Hi,
    Please ensure that you copied the code from the support forum and not an email that you may get from the forum because copying from an email may convert the quotes in the code to “curly quotes” which will break the code.
    If this doesn’t help please include an admin login in the Private Content area so we can be of more assistance.

    Best regards,
    Mike

    #1372913

    I can now paste the code. The right bar now fits in the desktop view. Unfortunately it doesn’t fit in the mobile view. here the black area is too big, so you have to scroll down far. In addition, the footer is not at the lower edge of the browser on pages with less content in the desktop view.

    #1372949

    Hi,
    Thank you for the login, I see that you are using a plugin to add a background slider to the page: Unlimited Background Slider which is taller than the page content, so I have adjusted the function to also change the height of the page content to match your slider.

    function custom_sidebar_header_min_height() { ?>
      <script>
    window.addEventListener('DOMContentLoaded', function() {
      (function($){
          var pageHeight = $('body').height();
          $('.html_header_sidebar #top #header').css({'min-height': pageHeight + 51});
    	  $('.html_header_sidebar #top #av_section_1').css({'min-height': pageHeight});
    })(jQuery);
    });
    </script>
      <?php
    }
    add_action('wp_footer', 'custom_sidebar_header_min_height');

    This seems to work on the pages that I checked, please check.

    Best regards,
    Mike

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Background color side menu’ is closed to new replies.