Problema com offset().left

Boa tarde, sem muita enrolação vou direto ao assunto.

$(function() {
 //////aqui não está funcionando
	$("div.borda-topo").prepend('<i class="material-icons"></i>');
	padrao_left = $("nav #nav-mobile li.ativo").offset().left;
	padrao_width = $("nav #nav-mobile li.ativo").width();

	$("div.borda-topo i").stop().animate({'left':padrao_left, 'width':padrao_width}, 0);

 ////////////////////

	$("nav li").hover(
 function() {
 vwidth = $(this).width();
 vleft = $(this).offset().left;
 $("div.borda-topo i").stop().animate({'left':vleft, 'width':vwidth}, 200);
 },
 function() {
 $("div.borda-topo i").stop().animate({'left':padrao_left, 'width':padrao_width}, 100);
 }

	);
});

Esse codigo move uma setinha acima dos botoes do menu de acordo com o que o mouse esta em cima.

a pagina em que o usuario esta o botao fica com uma classe ativo;

então eu queria q quando a pagina carregasse, a setinha ficasse em cima do botao com a classe ativo para indicar a pagina em que ele está.

Já tentei isso ali em cima mas sempre que a pagina carrega a seta fica um pouco errada.

Para entenderem deem uma olhada no meu aqui, onde estou tentando usar esse exemplo http://hexata.com/volpato.

Obs: o hover esta funcionando normalmente. E quando entrar na pagina aperte f5 para ver.