Collapsing Menu Not wanting on mobile devices

Admittedly outside my field of expertise here.

I downloaded a nice simple HTML template to use for our pending wedding.  (It's this one Solarize by TEMPLATED.)

Am perfectly happy with it for its limited purposes, however I can't figure out exactly where there's some change for mobile devices.  On a PC browser and on a tablet, the top navigation menu bar (Home   Dropdown   Left Sidebar) displays fine.  On a mobile/cell it collapses into an expandable menu - barely visible to the uninitiated.

It's very possibly in the JavaScript files or a CSS (though I can't see where).  The HTML in the file is:
			<!-- Header -->
				<div id="header">
					<div class="container">
							
						
						<!-- Nav -->
							<nav id="nav">
								<ul>
									<li><a href="index.html">Home</a></li>
									<li><a href="sitemap.html">Location Map</a></li>
									<li><a href="Information.html">Information</a></li>
									<li><a href="RSVP.html">RSVP</a></li>
								</ul>
							</nav>
	
					</div>
				</div>
				

Open in new window

Any clues as to what's most likely to be causing the alternative behaviour?
Happy to provide further details as required of course.

Thanks
LVL 44
Leigh PurvisDatabase DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bernard S.CTOCommented:
I tested directly the menu on Templated's site. Nothing unexpected on "my" mobile (see screen capture) This complies with usual mobile behaviour.
Could you give us more détails (eg, screen capture) of your problem?
screen capture
lenamtlCommented:
Hi,
In mobile view the menu is a side menu.

What you have to do is to change the breakpoint for the side panel or main menu, so it will be displayed or not depending of the JS and the CSS.

css/ style-mobile, style-narrow.css and style-narrower.css is where you will find the css for small device.
css/ style-normal.css and style-wide.css for larger device.
css/style.css for the main css that fit for all size.

js/init.js
is having the breakpoint for different device size
and the code of Sidebar Panel navpanel is there.

the script is using droptron for menu https://github.com/n33/jquery.dropotron
Leigh PurvisDatabase DeveloperAuthor Commented:
Hi

Sorry for the delay and thanks for your reply.
That really seems to be pointing me in the right direction.
I've tried editing init.js, removing the call to .dropotron and changing the breakpoint for mobile to be more like the others.
It still renders with the menu showing on a mobile device.
I've removed the inclusion of
<script src="js/jquery.dropotron.min.js"></script>
in the index html page.
Still that menu persists.

At this stage, I've got too much work on to exhaust time on this (albeit important to us, non-paying) side project.

Thanks for the help.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

lenamtlCommented:
Quick and dirty solution
you can change the css
the appropriate css file :css/ style-mobile.css, style-narrow.css and style-narrower.css  
If there  is another menu or nav use different css class if the one I suggest doesn't work

so let say css/ style-mobile.css
find
#titleBar .toggle:before {
    content: "\f0c9";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
}

Open in new window

and replace by

#titleBar .toggle:before {
display: none;
}

Open in new window

Leigh PurvisDatabase DeveloperAuthor Commented:
Hi

Thanks for that, quick and dirty is fine by me for this "project".  :-)

I've implemented that, and it hides the mobile menu icon (though if I click where it would be I still get the menu options shown), but ideally I'd like the text links that are normally shown (on wider screens) to be displayed the same on mobile (if they can fit - smaller font would be fine).

Any clues, gratefully received.  If not, fair enough and thanks for everything so far.

Cheers
Leigh PurvisDatabase DeveloperAuthor Commented:
Managed to get it displaying nothing still - but the side menu doesn't now open when clicking on the top bar.
Just need those links.
Hell, really, if it would just behave like the desktop/tablet site on a mobile that would do just fine. :-s

Cheers
lenamtlCommented:
I forgot to tell you to remove the action (burger menu)
you have to remove or comment
<span class="toggle" data-action="toggleLayer" data-args="navPanel"></span>

Open in new window

from the HTML line of titleBar in ini.js so this will become
titleBar: {
					breakpoints: 'narrower',
					height: 44,
					html: '<span class="title" data-action="copyHTML" data-args="logo"></span>',
					position: 'top-left',
					side: 'top',
					width: '100%'
				}

Open in new window


and also comment the navPanel section from in ini.js
/* navPanel: {
					animation: 'pushX',
					breakpoints: 'narrower',
					clickToClose: true,
					height: '100%',
					hidden: true,
					html: '<div data-action="navList" data-args="nav"></div>',
					orientation: 'vertical',
					position: 'top-left',
					side: 'left',
					width: 275 
				}, */

Open in new window


with this no menu at all will appear in small device, we also have to change css and probably change nav in skel.js

I'm not sure what you need exactly.

In PC view
How many item menu do you have in the top menu?
do you have submenu item?

Because if you have more than 2-3 buttons or if you have submenu item it won't look good in small view because there will no have enough room to display all.

I'm testing the template to see what we can do but like I said if there are many button or you are using long button name that won't look good this is why there are always another display on smaller device.

Do you think this menu could do the job?
Just resize to see how the menu respond
http://jasonweaver.name/lab/flexiblenavigation/

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Leigh PurvisDatabase DeveloperAuthor Commented:
Hi

Thanks for your help in all this.
I've got no menu at all.  I'd have liked to see how the menu looked in mobile as it appears on PC and tablet to see if it's too small as you say.  But that's not to be.
The "burger" menu was doing no harm really I suppose - it just wasn't noticeable enough to mobile users who don't know to look for it.

The other menu you linked to looks good.  However I have no time (and not enough need) to try getting in to that.  (The wedding is just a week away.)

Thanks for your help.  It was very much appreciated and detailed.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.