Viewing 6 posts - 16 through 21 (of 21 total)
  • Author
    Posts
  • TomC Moderator
    #537939

    Okay, Try This . . .

    Within file path –> /templates/ja_medicare/css/template.css
    at line 5974, modify as follows:


    .logo-image img {
    margin-right: 1px;
    }

    SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

    Does That Work ??

    oharris3 Friend
    #537943

    No Tom. Sorry. That did not work either. So I have put back the file to its original state.

    TomC Moderator
    #537944

    <em>@oharris3 430932 wrote:</em><blockquote>No Tom. Sorry. That did not work either. So I have put back the file to its original state.</blockquote>

    This is really strange . . . because I’ve been testing it in real-time (via Firebug) and it works.

    I’ll forward this onto the JA Development Team for review and further suggestion.

    Sorry I couldn’t be of better assistance. :-[

    Adam M Moderator
    #538004

    @oharris3,

    I have just updated a little bit so it might solve all your problems.

    1. Please use this script in your header file instead :

    <script>
    jQuery(function() {

    var pageHeader = jQuery("#t3-header");

    pageHeader.wrap("<div id='t3-header-wrapper'></div>");

    pageHeader.parent().height(pageHeader.outerHeight());

    pageHeader.children().wrap("<div class='container'></div>");

    var sticky_navigation_offset_top = pageHeader.offset().top;

    var sticky_navigation = function(){
    var scroll_top = jQuery(window).scrollTop();

    if (scroll_top > sticky_navigation_offset_top) {
    pageHeader.css({ 'position': 'fixed', 'top':0, 'left':0 });
    } else {
    pageHeader.css({ 'position': 'relative' });
    }
    };

    sticky_navigation();

    jQuery(window).scroll(function() {
    sticky_navigation();
    });

    });
    </script>

    2. And make sure your custom.css file contains this declaration:

    .t3-header {
    width: 100%;
    z-index: 9999;
    background: #fff;
    }

    Hope this helps.

    oharris3 Friend
    #538750

    Works!

    Only the logo has a slight issue. Only 70% of the logo shows as you scroll. Can there be a way that the logo “shrinks” (or displays smaller) as the user scrolls? (eg. http://46.16.75.22/demo/themes/joomla/2014/digit/index.php?style=default which allows the logo to display smaller as you scroll)

    Adam M Moderator
    #538775

    In this case, please look for this part in the previous js code :

    var sticky_navigation = function(){
    var scroll_top = jQuery(window).scrollTop();

    if (scroll_top > sticky_navigation_offset_top) {
    pageHeader.css({ 'position': 'fixed', 'top':0, 'left':0 });
    } else {
    pageHeader.css({ 'position': 'relative' });
    }
    };

    and update as follows:

    var sticky_navigation = function(){
    var scroll_top = jQuery(window).scrollTop();

    if (scroll_top > sticky_navigation_offset_top) {
    pageHeader.css({ 'position': 'fixed', 'top':0, 'left':0 });
    pageHeader.addClass('animate');
    } else {
    pageHeader.css({ 'position': 'relative' });
    pageHeader.removeClass('animate');
    }
    };

    To adjust the logo and add animation when resizing, please add these CSS rules to your custom.css file :

    .t3-header.animate .logo-image img {
    width: 31%;
    transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    }

Viewing 6 posts - 16 through 21 (of 21 total)

This topic contains 21 replies, has 3 voices, and was last updated by  Adam M 10 years, 4 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum