Nav menu -> Hamburger menu

[captaincrieff]

Hi

I'm wondering if it's possible to make the navigation menu a hamburger menu, something like the example below (but with Recent threads, Profile, Members etc). I've tried messing around with the layout templates & css but I can't get it to work. I currently have the standard navigation menu with no modifications. <!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav" id="myTopnav">
 <a href="#home" class="active">Home</a>
 <a href="#news">News</a>
 <a href="#contact">Contact</a>
 <a href="#about">About</a>
 <a href="javascript:void(0);" class="icon" onclick="myFunction()">
   <i class="fa fa-bars"></i>
 </a>
</div>

<style>
/* Add a black background color to the top navigation */
.topnav {
 background-color: #333;
 overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
 float: left;
 display: block;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
 background-color: #ddd;
 color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
 background-color: #04AA6D;
 color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
 display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
 .topnav a:not(:first-child) {display: none;}
 .topnav a.icon {
   float: right;
   display: block;
 }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
 .topnav.responsive {position: relative;}
 .topnav.responsive a.icon {
   position: absolute;
   right: 0;
   top: 0;
 }
 .topnav.responsive a {
   float: none;
   display: block;
   text-align: left;
 }
}
</style>


<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
 var x = document.getElementById("myTopnav");
 if (x.className === "topnav") {
   x.className += " responsive";
 } else {
   x.className = "topnav";
 }
}</script>

Or just.. having the v6 nav menu in v5, that would be great too.

[Kami]

It is possible (working example on a v5 forum); however, I cannot say anything about why this isn't working without seeing it in action. Do you have a URL you can share with us?

[captaincrieff]

Apr 6, 2023 11:41:23 GMT -8 Kami said:

It is possible (working example on a v5 forum); however, I cannot say anything about why this isn't working without seeing it in action. Do you have a URL you can share with us?

Here's how it looks at the moment - very broken. The hamburger only shows up if you make the screen smaller which is fine, but it doesn't show up in the right place and it also doesn't work editors-forum.boards.net/ 
(desktop version also generally looks a bit strange on mobile at the moment because of a less than half finished attempt at making it somewhat responsive lol)

as you can see I'm not very skilled at this!

[Kami]

Apr 6, 2023 12:51:06 GMT -8 captaincrieff said:

Apr 6, 2023 11:41:23 GMT -8 Kami said:

It is possible (working example on a v5 forum); however, I cannot say anything about why this isn't working without seeing it in action. Do you have a URL you can share with us?

Here's how it looks at the moment - very broken. The hamburger only shows up if you make the screen smaller which is fine, but it doesn't show up in the right place and it also doesn't work editors-forum.boards.net/ 
(desktop version also generally looks a bit strange on mobile at the moment because of a less than half finished attempt at making it somewhat responsive lol)

as you can see I'm not very skilled at this!

sorry i got swamped with work today -- i'll take a peek tomorrow!

[captaincrieff]

no problem at all! thank you!

[Kami]

I took a little peek at your forum, and while I haven't found the exact issue yet, I have a few callouts that are likely impacting the experience:

1. I do not see 'topnav' HTML anywhere on your forum. Where did you put it? If you have not add this part anywhere, I cannot make any sort of diagnosis as to why the method isn't working. If you did put it somewhere, where?

2. Because the HTML is not in place, there's nothing for the 'responsive' class to be added to via the javascript you have, so this won't work.

3. I just want to be sure that you understand what the script + CSS you have select is supposed to do: it is NOT meant to make a hamburger menu appear at all times, it is meant to make a hamburger menu appear ONLY IF a_ the user is viewing the forum on a device with a maxiumum width of 600px, AND b) if the user clicks on an icon (thereby activating the javascript) to change the menu to said hamburger. In other words, this setup is designed to be an opt-in experience only for mobile users. You can change this using the setup you have, but if your goal is to have a hamburger menu by default for ALL users there are better ways of doing this. 

[captaincrieff]

Apr 7, 2023 6:52:21 GMT -8 Kami said:

I took a little peek at your forum, and while I haven't found the exact issue yet, I have a few callouts that are likely impacting the experience:

1. I do not see 'topnav' HTML anywhere on your forum. Where did you put it? If you have not add this part anywhere, I cannot make any sort of diagnosis as to why the method isn't working. If you did put it somewhere, where?

2. Because the HTML is not in place, there's nothing for the 'responsive' class to be added to via the javascript you have, so this won't work.

3. I just want to be sure that you understand what the script + CSS you have select is supposed to do: it is NOT meant to make a hamburger menu appear at all times, it is meant to make a hamburger menu appear ONLY IF a_ the user is viewing the forum on a device with a maxiumum width of 600px, AND b) if the user clicks on an icon (thereby activating the javascript) to change the menu to said hamburger. In other words, this setup is designed to be an opt-in experience only for mobile users. You can change this using the setup you have, but if your goal is to have a hamburger menu by default for ALL users there are better ways of doing this. 

1. & 2. My bad, in my layout templates & css I changed "topnav" to the class names the proboards nav menu uses, maybe the issue (or one of the issues as it would surprise me if there's only one lol) is related to that? I've pasted the layout template of my forum wrapper below.

3. The goal is what you are describing there, yes. as in, clicking the hamburger button (which only appears on mobile) shows the menu items

Current forum wrapper layout template:

edit: not sure why it adds the <span style="white-space:pre;">    </span> when I paste the code in here sorry
<!DOCTYPE HTML>
<span style="white-space:pre;">    </span>$[tag.html.open]
<span style="white-space:pre;">    </span><head>
<span style="white-space:pre;">        </span><meta charset="UTF-8">
<span style="white-space:pre;">        </span><title>$[title] | $[forum.name]</title>
<span style="white-space:pre;">        </span>$[head]
<span style="white-space:pre;">    </span></head>
<span style="white-space:pre;">    </span><body>
<span style="white-space:pre;">        </span>{if $[maintenance_mode]}
<span style="white-space:pre;">            </span><div class="maintenance-header">
<span style="white-space:pre;">                </span>{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
<span style="white-space:pre;">            </span></div>
<span style="white-space:pre;">        </span>{/if}
<span style="white-space:pre;">        </span><div id="wrapper">
<span style="white-space:pre;">            </span><header>
<span style="white-space:pre;">                </span><div id="banner-container" role="banner">
<span style="white-space:pre;">                    </span><h2 id="banner">
<span style="white-space:pre;">                        </span>$[forum.title]
<span style="white-space:pre;">                    </span></h2>
<span style="white-space:pre;">                </span></div>
<span style="white-space:pre;">                </span><a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<span style="white-space:pre;">                </span><a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
               
               
               <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span style="white-space:pre;">                </span><div id="navigation-menu" class="ui-helper-clearfix">
                   
<span style="white-space:pre;">                    </span><ul role="navigation">
                       
<span style="white-space:pre;">                        </span>{foreach $[navigation.menu]}
<span style="white-space:pre;">                            </span><li>
<span style="white-space:pre;">                                </span><a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
<span style="white-space:pre;">                                    </span>$[navigation.menu.name]
<span style="white-space:pre;">                                    </span>{if $[navigation.menu.notification.total]}
<span style="white-space:pre;">                                        </span><div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<span style="white-space:pre;">                                            </span><div class="tip-number">$[navigation.menu.notification.total]</div>
<span style="white-space:pre;">                                            </span><span class="tip"></span>
<span style="white-space:pre;">                                        </span></div>
<span style="white-space:pre;">                                    </span>{/if}
<span style="white-space:pre;">                                </span></a>
<span style="white-space:pre;">                            </span></li>
<span style="white-space:pre;">                        </span>{/foreach} <a href="javascript:void(0);" class="icon" onclick="myFunction()">
   <i class="fa fa-bars"></i>
 </a>
<span style="white-space:pre;">                    </span></ul>
<span style="white-space:pre;">                    </span><p id="welcome">
<span style="white-space:pre;">                        </span>{if !$[current_user.is_member]}
<span style="white-space:pre;">                            </span>Welcome Guest.
<span style="white-space:pre;">                            </span>{if $[login_link] || $[register_link]}
<span style="white-space:pre;">                                </span>Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
<span style="white-space:pre;">                            </span>{/if}
<span style="white-space:pre;">                        </span>{else}
<span style="white-space:pre;">                            </span><span>Welcome $[current_user.name].</span>  $[logout_link]
<span style="white-space:pre;">                        </span>{/if}
<span style="white-space:pre;">                    </span></p>
<span style="white-space:pre;">                </span></div>
<span style="white-space:pre;">            </span></header>

<span style="white-space:pre;">            </span>$[participated_threads_link]

<span style="white-space:pre;">            </span>{if $[navigation.tree]}
<span style="white-space:pre;">                </span><div id="navigation-tree">
<span style="white-space:pre;">                    </span>$[navigation.tree]
<span style="white-space:pre;">                </span></div>
<span style="white-space:pre;">            </span>{/if}

<span style="white-space:pre;">            </span>$[header]

<span style="white-space:pre;">            </span>
<span style="white-space:pre;">                </span>{if $[notice]}
<span style="white-space:pre;">                    </span><div class="container">
<span style="white-space:pre;">                        </span><div class="title-bar"><h2>$[notice.title]</h2></div>
<span style="white-space:pre;">                        </span><div class="content pad-all cap-bottom">
<span style="white-space:pre;">                            </span>$[notice.message]
<span style="white-space:pre;">                        </span></div>
<span style="white-space:pre;">                    </span></div>
<span style="white-space:pre;">                </span>{/if}
<span style="white-space:pre;">                </span>$[content]
<span style="white-space:pre;">                </span>$[shoutbox]
               
<span style="white-space:pre;">            </span></div>

<span style="white-space:pre;">            </span>$[footer]
<span style="white-space:pre;">        </span></div>
<span style="white-space:pre;">        </span>{if $[is_mobile_browser]}
<span style="white-space:pre;">            </span><br /><p class="center mobile-view-prompt">Switch to the $[mobile_switch_link].</p>
<span style="white-space:pre;">        </span>{/if}
<span style="white-space:pre;">    </span></body>
<script>
$('#selectbox').focus(function(e) {
   $(this).blur();
});</script>

<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
 var x = document.getElementById("navigation-menu");
 if (x.className === "#navigation-menu.ui-helper-clearfix") {
   x.className += " responsive";
 } else {
   x.className = "#navigation-menu.ui-helper-clearfix";
 }
}</script>
</html>


[captaincrieff]

Update: okay it's working now, I added the forum links to the hamburger and hid the proboards nav menu on small screens instead of trying to add the hamburger to the existing nav bar if that makes sense.

New question though, how can I remove the Profile and Messages links from the menu when a user is not logged in? I guess it's something with the {if} !$[current_user.is_member] stuff but I can't figure out the correct syntax