Adding sticky menu also for anchor links

tcadmin

Dear Sirs,
we use ja_company template and I would like to fix main menu at top (sticky menu), is it possible?
The second thing I would like to do is to add ease scroll effect for anchors on first page (something like arrow "Back To Top", but opposite direction).
I've found some solutions on this pages, but no success.
Thank you.

pavit

Hello tcadmin

1) Fixed menu

Go to thi file templates/ja_company/tpls/blocks/mainnav.php at line 18
change from:

<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">

<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav" data-spy="affix" data-offset-top="150">

Then open this file
templates/ja_companu/css/custom.css file and add below code

.t3-mainnav.affix {
    position: fixed;
    top: 35px;
    left: 0;
    width: 100%;
    z-index: 999;   
}

save and check.

2) You want effect on menu items like if it was a onepage template ?

tcadmin

Hello Pavit,
thank you for fast response,

1# it works somehow, but main menu is deformed now, respectively it is moved up (see attachment) and I'm not able to move it back to place.

And another problem I found is that mobile menu is still open and if you roll down on, new fixed menu is still on page.

2# yes exactly, I would like to make slow transition from up to down anchors.

Thank you!
J.

aman204

tcadmin Hi,

Can you provide a link to your site and add your admin and ftp details for the respective site in edit fields in order to have closer look

For reference, You can follow thread post (5 point) procedure.

aman204

The admin details arent working. Kindly review

Also, I had removed your post with credentials from security point of view and pasted the details in edit fields as the post is publicly seen to others

You can edit the fields in first post as shown in guide thread and update the correct details

tcadmin

aman204
Everything works fine here, the webhoster may be blocks access from abroad IPs (?). Is it possible to send you source code (complete joomla web site)?

aman204

tcadmin I had asked for your login/admin details to access the site and have closer look as it is password protected 🙂

Either, Kindly remove the password protection or provide in right details in order to troubleshoot if issue still persists

However, I couldn't see the change as suggested by Pavit in templates/ja_company/tpls/blocks/mainnav.php file so have replaced the specific code as suggested

Also, Had added the css declarations as suggested and commented this out :

/*.t3-mainnav.affix {
    position: fixed;
    top: 35px;
    z-index: 999;
	color: #ffffff;
	background: rgba(70, 70, 70, 0.4);
	text-shadow: 0px 0px 6px rgba(150, 150, 150, 1);
	height: 30px;
}*/

Note: Have tried the suggested changes on local machine and it works fine with JA company template

tcadmin

I sent you credentials to access web (Access web: ...). But ok, I enabled access to web. Thank you very much! And I also uncommented your code in custom.css - without success.

aman204

tcadmin Kindly check now. There could be changes apparently seen as the code suggested wasnt the same in both the files in which suggestions had been given due to which sticky menu wasnt having consistency in the appearance.

Would be suggested to kindly not make changes or customizations in code structure if not sure as to what the respective code change is for as this can cause havoc for your template structure with bloated codes coming along which would conclusively take more time to fix up than expected.

tcadmin

Great, just one more thing, if you click to open mobile menu (when you have resized your web browser) the menu is still open until you close it by the clicking on the menu button. Could be the menu closed ofter click on a link? Thank you and I hope this is the last thing 🙂

aman204

tcadmin if you click to open mobile menu (when you have resized your web browser) the menu is still open until you close it by the clicking on the menu button.

Appears fine for me while viewing here The menu opens up after clicking on toggle selection

Kindly check again

tcadmin

aman204
Right, this is good, but if you click for example on the link Contacts, than the menu is still opened.

aman204

tcadmin Right, this is good, but if you click for example on the link Contacts, than the menu is still opened.

As I can see that you have set up simple anchor links to go to varied section on the same page however without JS support as the collapse features work fine with this one page template on responsive screen due to JS support

Will ask from our team if someone can help you with this 🙂

tcadmin

If you will have a better/easier solution that works, it would be nice. But thank you for all, I appreciate that.

aman204

tcadmin Please be patient as someone from the team might follow up soon on this 🙂

Meanwhile, To troubleshoot, Can you try to assign menu items to other pages from sticky menu to see if it works fine then

tcadmin

Yes it works, if you change language to Czech, this part of the web uses standard links and it's without a problem.

saguaros

tcadmin

Hi,

For the smooth scroll, I updated for you:

In the 'Contact' menu item: switch to tab Link Type >>> in Link CSS Style >>> type in " smooth-scroll" (with 1 space before class name and without double quote).

In the footer block: /templates/ja_company/tpls/blocks/footer.php, I add some JS script next to the script of 'Back to Top' button:

<script type="text/javascript">
(function($) {
  // Back to top
  $('#back-to-top').on('click', function(){
    $("html, body").animate({scrollTop: 0}, 500);
    return false;
  });
// Add smooth scrolling to anchor link
  $('a.smooth-scroll').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
            || location.hostname == this.hostname) {
 
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
               if (target.length) {
                 $('html,body').animate({
                     scrollTop: target.offset().top - 52
                }, 1000);
                return false;
            }
        }
    });
})(jQuery);
</script>

tcadmin

saguaros
Thank you very much!

saguaros

tcadmin

With the collapse menu on mobile view, I added this script:

 jQuery(document).ready(function(){

 	jQuery('html.com_jabuilder .mod-languages a').click(function(){
 		jQuery(this).parent().toggleClass('open');
 	});

 	setTimeout( function() {
	 	jQuery('.t3-navbar-collapse').find('a').each( function() {
	 		var el = jQuery(this),
	 			href = el.attr('href');

	 		if ( href.indexOf('#') > -1 ) {
	 			el.on( 'click', function( e ) {
	 				el.parents('.navbar-collapse').collapse('toggle')
	 			})
	 		}
	 	})
	 }, 500)
 	
 });

Into the file: /templates/ja_company/js/script.js

and it's working now also.