New site's menu-bar only works on Chrome. Help?

JavaScript
1

I really like the way my website has turned out at http://ridwan.me.

However I tried accessing it using Internet Explorer and Firefox, and in both those browsers the menu-bar that appears when you scroll down doesn’t come up at all. This is beyond frustrating.

Any ideas what I can do to make it work?

Thanks

2

theotherside,

The menu exists and appears when .menubar {margin-top:-80px} is disabled. Your page relies on JavaScript to sense scrolling movement. Perhaps the JavaScript does not function for non-webkit browsers. We’ll move this to the JS forum and ask for an opinion there.

3

Thanks for the insight. I hope someone can help…

4

Not really my area but try changing the js in custom.js to this:


// Menu Scroll Hide
	var nav = $('.menubar');
	var [B]scrollit [/B]= $('.menubar').attr('data-scroll');
	$(function(){
		$('.menubar').data('size','big');
		if ([B]scrollit[/B] == 'false') {
			nav.css({
				marginTop:'0px'
			});
		};
	});
	$(window).scroll(function(){
		if ($('[B]html,body[/B]').scrollTop() > 0 &&[B] scrollit[/B] == 'true') {
			if (nav.data('size') == 'big') {
				nav.data('size','small').stop().animate({
					marginTop:'0px'
				}, 300);
			}
		} else {
			if (nav.data('size') == 'small' &&[B] scrollit [/B]== 'true') {
				nav.data('size','big').stop().animate({
					marginTop:'-80px'
				}, 300);
			}
			
		}
	});

I changed the variable 'scroll to ‘scrollit’ as I assume scroll is a reserved word and amended the other instances of it (apart from the real scroll function of course)

I then add ‘html’ to the scrollTop function as I believe Firefox needs that instead of body so you need to specify both (if what I’ve read is correct).


if ($('[B]html,body[/B]').scrollTop() > 0 &&[B] scrollit[/B] == 'true') {

Seems to work for me but may not be the optimum solution :slight_smile:

5

Thanks Paul O’B, but that completely stopped the scrollbar from appearing in Chrome altogether.

I think it might be better from an optimisation point of view if I had the menubar fixed at the top constantly on the site, and not just appear when I scroll down (this would make more sense as the ‘call to action’ would be more evident for site visitors.)

I assume this might be easier and more compatible across browsers too. Any idea how I could do this?

Thanks

6

Read post #2 again.

delete or comment out the margin-top:-80px property:


.menubar {margin-top:-80px}

You may want to delete or comment out the JavaScript that is supposed to affect the menubar, too.

7

It seemed to be working when I tested earlier with a copy of the site but I may not have noticed a missing scrollbar. Your site is down at the moment so I can’t re-test to see if you made a mistake in copying the code or whether it was my error.

I think it might be better from an optimisation point of view if I had the menubar fixed at the top constantly on the site, and not just appear when I scroll down (this would make more sense as the ‘call to action’ would be more evident for site visitors.)

I assume this might be easier and more compatible across browsers too. Any idea how I could do this?

Thanks

Just use position:fixed (or more to the point remove the margin-top:-80px that you had in your original rule) and then menu should remain fixed to the top at all times. You will of course need to ensure that your page content starts below the nav otherwise it will be obscured via the fixed nav. Usually you would apply some padding top to the content so that it sits below the fixed menu.

I can’t give you any relevant code as your site is down at the moment.

8

ronpat, somehow I glazed over your original comment. Removing the margin-top:-80px property did it and I’ve removed the relevant menubar scroll function in my custom.js too. Thanks so much.

Paul O’B, I definitely copied across your code properly and it didn’t seem to work but thanks anyway. I don’t know why my site was down earlier…it shouldn’t have been and it’s live now.