Joomla Templates Club 406,261 posts

[oharris3 Friend oharris3Join date: June 2011Posts: 87Downloads:60Uploads:16 Thanks: 6 Thanked: 2 times in 1 posts]

#198495

How can I make the menu sticky or fixed for this template?

Using a script from this post (http://www.joomlart.com/forums/topic/sticky-menu/), I inserted the script in header.php (in templatesja_medicaretplsblocks), but the menu now scrolls behind images or modules within each page. Please help.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#537868

Hi,

The menu in JA Medicare is a bit different than JA Decor, so you might have to use another solution.

1. First, open root_foldertemplatesja_medicaretplsblocksheader (PHP) and look for this line :

<!-- HEADER -->

add this JS block right above it

<script>
jQuery(function() {

var sticky_navigation_offset_top = jQuery('#t3-header').offset().top;

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

if (scroll_top > sticky_navigation_offset_top) {
jQuery('#t3-header').css({ 'position': 'fixed', 'top':0, 'left':0 });
jQuery('#t3-header').next().css({ 'margin-top': jQuery('#t3-header').outerHeight() });
} else {
jQuery('#t3-header').css({ 'position': 'relative' });
jQuery('#t3-header').next().css({ 'margin-top': '0' });
}
};

sticky_navigation();

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

});
</script>

<!-- HEADER -->

2. Create new CSS file root_foldertemplatesja_medicarecsscustom (CSS). Please make sure that you MUST use the name custom and add these declarations :

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

Save your file and check the result.

[oharris3 Friend oharris3Join date: June 2011Posts: 87Downloads:60Uploads:16 Thanks: 6 Thanked: 2 times in 1 posts]

#537890

Thanks. It is now sticky or fixed, but upon scrolling down, the logo veers to the left and the header (includes menu and logo) still goes behind the images and module positions.

Additionally, the space (margin) between the menu module position and the slideshow module position has increased. See demo site at http://mof2.janadians.com/

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

#537913

With regerd to the logo image “moving” upon scrolling, the culprit is the following CSS rule . .


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

Within your custom.css file, paste the following (or modify if you already have it in there) . . .


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

When I tested it out in Firebug, the logo didn’t move any more when scrolling down.

Hope That Helps (with that issue)

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

#537914

<em>@oharris3 430863 wrote:</em><blockquote>
Additionally, the space (margin) between the menu module position and the slideshow module position has increased. See demo site at http://mof2.janadians.com/</blockquote>

Which element is the “slideshow” within your demo site?

[oharris3 Friend oharris3Join date: June 2011Posts: 87Downloads:60Uploads:16 Thanks: 6 Thanked: 2 times in 1 posts]

#537920

<em>@TomC 430890 wrote:</em><blockquote>With regerd to the logo image “moving” upon scrolling, the culprit is the following CSS rule . .


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

Within your custom.css file, paste the following (or modify if you already have it in there) . . .


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

When I tested it out in Firebug, the logo didn’t move any more when scrolling down.

Hope That Helps (with that issue)</blockquote>

Tried, but that does not resolve the issue. You can review online at the same domain.

[oharris3 Friend oharris3Join date: June 2011Posts: 87Downloads:60Uploads:16 Thanks: 6 Thanked: 2 times in 1 posts]

#537921

<em>@TomC 430891 wrote:</em><blockquote>Which element is the “slideshow” within your demo site?</blockquote>

I have published the slideshow for you to see.

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

#537922

How much space would you like the area reduced by?

Can you, perhaps, throw together a quick screenshot mock-up to show what it is you are wanting?

[oharris3 Friend oharris3Join date: June 2011Posts: 87Downloads:60Uploads:16 Thanks: 6 Thanked: 2 times in 1 posts]

#537923

Not to worry about that aspect of it Tom. I was wrong. The space between the areas is quite fine. Sorry.

But the menu still scrolls behind the images.

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

#537925

<em>@oharris3 430901 wrote:</em><blockquote>Not to worry about that aspect of it Tom. I was wrong. The space between the areas is quite fine. Sorry.

But the menu still scrolls behind the images.</blockquote>

What if you were to try this? . . . .

Within your custom.css file, paste the following:


.col-sm-12 {
z-index: 9999;
}

[oharris3 Friend oharris3Join date: June 2011Posts: 87Downloads:60Uploads:16 Thanks: 6 Thanked: 2 times in 1 posts]

#537932

It works, partially. Please view at http://mof2.janadians.com/

Note, the menu still veers to the left.

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

#537934

<em>@oharris3 430916 wrote:</em><blockquote>It works, partially. Please view at http://mof2.janadians.com/

Note, the menu still veers to the left.</blockquote>

This is because you haven’t yet put the following within your custom.css file . . .


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

[oharris3 Friend oharris3Join date: June 2011Posts: 87Downloads:60Uploads:16 Thanks: 6 Thanked: 2 times in 1 posts]

#537935

Did that Tom. but the same thing happens.

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

#537937

Do me a favor . . . please temporarily set “Optimize CSS” to “Off” within your Template Manager-General settings

[oharris3 Friend oharris3Join date: June 2011Posts: 87Downloads:60Uploads:16 Thanks: 6 Thanked: 2 times in 1 posts]

#537938

<em>@TomC 430923 wrote:</em><blockquote>Do me a favor . . . please temporarily set “Optimize CSS” to “Off” within your Template Manager-General settings</blockquote>

Completed your request Tom.

[Author]

Posts