Menu opening on page load

JavaScript
1

Hi,
I’ve just noticed that when www.impactwroughtiron.com.au loads on my iPhone that the menu is opened fully pushing the ‘above fold’ info down so it can’t be seen.
Can anyone please offer some help to make it operate normally again?

Any help appreciated.

1 Like
2

It happens on desktop too. Just narrow your browser window to see. The JS styles only kick in after the toggle button has been clicked, so you need to modify the script so that it initially hides the menu on certain screen sizes and then shows it on toggle.

1 Like
3

Thanks Ralph, good spot!

Does this involve modifying javascript? if so? I’m in trouble :confused:

Next guess is a media query to handle it

What do you think?

4

Perhaps the simplest quick fix is to collapse the menu onload if the device has a small screen.

jQuery(function() {
  if (window.innerWidth < 800) {
    jQuery('.navbar-responsive-collapse').addClass('collapse')
  }
})
1 Like
5

The more correct fix is to reverse the responsive styles so that the menu is closed by default and then the toggle should add the class to show the menu.

1 Like
6

Many thanks Mark,
Are you talking about editing the javascript? if so, are you able to show me how to find the relevant code/ class etc.?

7

Maybe something like this:

.navbar-responsive-collapse{display:none}
@media screen and (min-width:768px){
.navbar-responsive-collapse{display:block}
}
8

Thanks Paul,
But I can’t get this to work despite adding your media query.
It seems when I use the menu in desktop resolution, it activates the mobile toggle.
I.e. The mobile menu is found to be open as a result of operating the large format menu.

Any help appreciated.

9

You seem to have commented out the display:none which was the rule for hiding the menu on small screen.

When I inject the styles into yor page the menu works fine for me.

The only time the hamburger will be open is when you go to small screen and open it. If you then go to large screen while it is open and then back to small screen it will of course still be open.

Unless I’m missing some other function of your menu as there seems to be no operation at larger screens as the menu is just showing by default?

10

Thanks Paul,
I uncommented the display: none; and the menu appears to be working fine on mobile now, however, it’s disappeared from the desktop.

seems to be no operation at larger screens as the menu is just showing by default?

Is this what you mean by there being no menu at larger sizes?

11

You can add the script I gave you to any js file and I think it will do what you are wanting.

12

No you corrupted the code :smile:

.navbar-responsive-collapse {
  display: none;


@media screen and (min-width:768px) {
.navbar-responsive-collapse {
   display: block;
}
}

See if you can spot the mistake in the above code.

Compare it to the code I gave you originally.

1 Like
13

Ah Ha!
Thanks for spotting that :smile:
Would that be NO closing curly brace?

Working fine now Paul - thanks, really appreciate your help.

14

Mark, thanks but we got this working with a media query.

Cheers :+1:

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.