Take the 2-minute tour ×

I am new to the web site designing and this is the first web site that I have designed for a friend

I am having an issue with the navigation bar on this web site, sometimes it appears on left and sometimes on right. This is easily replicable in chrome. It usually breaks on the first load or after a few refreshes.

This is how it should look like, http://project02.businesscatalyst.com/Jing/2012-11-08_0121.png

Erroneous state: http://project02.businesscatalyst.com/Jing/2012-11-08_0123.png

I am not able to figure out why this is happening. I have used certain JS plugins like scrollorama, scrolldeck etc. My custom JS file is js.js

Any help would be appreciated.

share|improve this question
Do you have any code examples? –  Michael Nov 7 '12 at 20:16
He is talking about the webpage mentioned in the headline. But I agree with you that he should provide code examples here since Stack Overflow is a code related question and answer platform. –  danijar Nov 7 '12 at 20:40

2 Answers 2

In my browser (newest Firefox) the navigation bar of http://ruvij.businesscatalyst.com/ looks fine for every first page visit (with clean cache) and breaks for the second.

The navigation bar is positioned with the following two properties, which might result of a javascript.

left: 83.15px;
padding-left: 816.7px;

I advise you to position the navigation bar with right: 0; to be sure that it will stay at the right side of the page. You can use any other number to define an offset.

By the way you might have another problem with our page. The animated arrow indicating the user to scroll down appears after every reload even if the page was already scrolled down when it was loaded. That is because many browsers remember the scroll position between page reloads.

share|improve this answer
Let me show you what I mean, project02.businesscatalyst.com/Jing/2012-11-08_0245.swf The problem is easily reproducible in chrome. I am using a variable 'count' to calculate the width of all the 'lis' in the navigation bar to position it to the right. And that's what breaking the code I think. Here is my code: var allinks = $(".nav").find("ul li"); var count = 0; allinks.each(function () { count += $(this).width() + 50; }); Is there something wrong in this code? Can you suggest an alternative ? –  maurya8888 Nov 7 '12 at 21:16
You problem is easily reproducible in all major browsers and I already suggested you an alternative. It is unnecessary to compute the width and the left offset since you can simply use a right offset of zero. You should get rid of all the unneeded javascript and try out my solution. –  danijar Nov 8 '12 at 14:36
I actually didn't want to work this around because there was something breaking the entire layout not just the navigation. Fixing the navigation leaves the other things broken, thus I wanted a fix for this. Moreover, this is my first web site so I wanted to learn as much as possible, instead of rather just fixing things. –  maurya8888 Nov 14 '12 at 10:59
I guess you will find many webdesign tutorials on the internet. This is a question and answer platform for specific cases. I tested my fix and it worked for me without breaking anything. Maybe another javascript breaks you layout. –  danijar Nov 14 '12 at 14:32

Thanks for answering to my question.

I changed the document ready function to window load and that fixed it. Not sure why that happened though.

share|improve this answer

Your Answer


