Joomla Templates Club 406,261 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#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 oharris3Join date: June 2011Posts: 87Downloads:60Uploads:16 Thanks: 6 Thanked: 2 times in 1 posts]

#537943

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

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#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 Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#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 oharris3Join date: June 2011Posts: 87Downloads:60Uploads:16 Thanks: 6 Thanked: 2 times in 1 posts]

#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 Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#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;
}

1 user says Thank You to Adam M for this useful post

1. wbroda

[Author]

Posts