Sticky Menu on Focus

I need the top menu (see screen shots) to be sticky. I've looked at documentation, but I just don't know enough to make it happen. Can you help?

This is a screenshot of the page before scrolling...

This is the page after scrolling - what I want it to do...

I went through and tried the modifications per the link you suggested and it works for the header.php and the header of the site. I like it.

But I need it for the mainnav / menu.

Where do I change that? Is it similar?

Based on the link, this is what I did:

/public_html/templates/ja_focus/tpls/blocks/mainnav.php
line 32 change from

added to custom.css
header#t3-mainnav.affix {position: fixed;top: 0px;z-index: 9999;float: none;background: #fff;margin: 0 15em;}

Front end - the menu bar stayed fixed but not at the top of the browser window.

AND it loses its functionality.

How do I do this?

take a look: https://idwtube.com scroll down...

I can't access your site now, it seems that your host limits access from my place (Vietnam). Could you add exception for IPs from my place?

Does anyone want to modify ja_focus for me as a paid gig?

You can try to login now. I updated the firewall access.

I updated a bit in custom.css file, pls check.

If this is the mod:


  .t3-mainnav.affix {
	position: fixed;
	top: 0px;
	z-index: 9999; 
	background: #fff;
	width: 1152px;
  }

It worked beautifully! Thank you so much.

My pleasure!