Menu Links Run Over to 2nd Line in some widths instead of collapsing

[JJRose]

Hi, I am using the sm-mint template (v1.0.1). I have made all my visual tweaks and it looks as I want it. However, there is what I consider a major visual issue for me, which is that the collapse menu doesn’t start displaying before two of my menu items display on a 2nd line when in certain viewing widths.

It displays fine on a mobile (in both landscape and portrait).
It works fine on desktop – collapses nicely when viewing smaller.
But on ipad in portrait mode, and also when doing developer testing in mobile viewing mode, the collapse doesn’t happen in certain widths when it should. Instead, the links run over to a 2nd line. This happens in these modes:
– 768×1024 = last 2 links appear on 2nd line instead of menu collapsing.
– 800×1280 = last link appears on 2nd line instead of menu collapsing.
The collapse menu shows fine on the next step down in mobile viewing mode: 360×640,
And the full menu shows fine from 980×1280 upwards where all menu items fit in one line anyway.

I am sure it is just some smallish tweak somewhere, but I don’t know where or how.

Can I get assistance with this? Below is my testing page:
http://www.empoweryourpotential.com.au/menutest.htm

Let me know what other info you require and I will send the info.

Browsers used for testing:
– Desktop Browsers: Firefox, Chrome (latest versions).
– Devices Browsers: Firefox, Chrome (latest versions).

Also, I have a 2nd small query…..
Can i move the jquery init script code into an external js file (to save bloated coding in the head section)? Or does it need to be exactly where it is in the head section??????

Thanks in advance

[JJRose]

Hi. I posted this query a while ago, but no response yet. Is there anyone who can assist???

[admin]

Sorry, unfortunately, I’ve not been able to visit the forums lately due to lack of any free time whatsoever!

You just need to edit the breakpoint at which the menu switches from collapsible to desktop mode. In “/stuff/smartmenu/sm-mint.css” find the following instances:

@media (min-width: 768px) {

and increase the value to something like “910px” for all of them.

[JJRose]

Hi. Thanks for your response.

I did as you advised, and that eliminated the two items going over to a second line, but it created an additional problem –
viewing the page between 910 and 768, I don’t get the minimized menu, but instead I get all the items in vertical format. See image below.

[admin]

Ah, yes, there is also one more media query you need to update the same way in “/stuff/smartmenu/sm-mint-button.css”. That should fix it.

[JJRose]

Thank you. That did the trick. 🙂

[JJRose]

Hi. Sorry, while the breakpoint issue has been resolved, there is another strange issue I need resolved…

The dropdown sub-menu link I have, “Work With Me”, is supposed to have a down arrow display next to it, which then displays a sub-menu and a sub-sub menu when you click on it.

What is happening is that whenever I make edits to the page and then re-upload the page, the down arrow doesn’t display (this is in desktop mode). I have to click on the link, then it appears, and then I can access the sub menus. And then it stays – till I re-edit and re-upload the page again.

The same thing happens when the newly edited page is loaded in ‘skinny’ view on the desktop … when I click on the hamburger icon there should be a + sign next to the “work with me” link (and also one for the sub-sub menu), but instead I have to click on that link, then the whole menu closes, then I have have to re-click on the hamburber icon, and then the + signs appear next to the links and I can access the sub-links.

And on an actual mobile, those sub-menu links don’t work at all! All I get is menu closure when I click on the link.

I have made new edits to the page and uploaded it, so that you can hopefully reproduce this issue yourself.

Thanks in advance.

[admin]

A couple of issues. You are loading jQuery, Bootstrap’s JS and a few other scripts with an “async” attribute added:

<script async type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
...
<script async src="stuff/bootstrap.min.js"></script>
...
<script async src="stuff/swapimgrestore.js"></script>
<script async src="stuff/smoothlinkscroll.js"></script>

In short, this does not guarantee the other they are actually loaded/executed by the browser and they depend on proper load order (jQuery needs to be loaded first). You may need to learn a bit more how “async”/”defer” work if you would like to use any of them.

Quick solution is to remove the “async” attribute or replace it with “defer” (which preserves the script orders as linked in the source) but you will also need to add it to all other scripts you use that rely on jQuery.

Second issue – in “stuff/smoothlinkscroll.js” the following line produces a JS error:

$('a[href*=#]:not([href=#])').click(function() {

you need to change it like this:

$('a[href*="#"]:not([href="#"])').click(function() {

Cheers!

[Author]

Posts