MyBB Community Forums

Full Version: How to edit/move menu?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Hi guys,

I have posted on the "theme" section, but there isn't a great deal of traffic there.

I would like to move "search" and "latest posts" from the "hamburger" menu to a more visible place (see picture). I have located the hamburger in the header template, but which template should I edit to get the new menu?
(2019-02-17, 01:15 PM)Arka Wrote: [ -> ]Hi guys,

I have posted on the "theme" section, but there isn't a great deal of traffic there.

I would like to move "search" and "latest posts" from the "hamburger" menu to a more visible place (see picture). I have located the hamburger in the header template, but which template should I edit to get the new menu?



i assume you mean like this?

[attachment=41542]

in header template find:


          <div class="collapse navbar-collapse navbar-ex1-collapse">
			  <ul class="nav navbar-nav navbar-right">
				  <li id="nav-portal"><a href="portal.php"><i class="fa fa-bell"></i> {$lang->toplinks_portal}</a></li>
               <li id="nav-forums"><a href="index.php"><i class="fa fa-group"></i> {$lang->theme_bootbb_header_forum}</a></li>
               <li id="nav-search"><a href="search.php"><i class="fa fa-search"></i> {$lang->toplinks_search}</a></li>
               <li id="nav-member"><a href="memberlist.php"><i class="fa fa-users"></i> {$lang->toplinks_memberlist}</a></li>
				  
<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-cubes"></i> {$lang->theme_bootbb_header_misc} <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="search.php?action=getnew"><i class="fa fa-comment"></i> {$lang->welcome_newposts}</a></li>
            <li><a href="search.php?action=getdaily"><i class="fa fa-comments"></i> {$lang->welcome_todaysposts}</a></li>
            <li class="divider"></li>
			  <li id="nav-help"><a href="misc.php?action=help"><i class="fa fa-life-bouy"></i> {$lang->toplinks_help}</a></li>
          </ul>
</li> 
</ul>
  
          </div>


comment out or delete "COPY/CUT"...

...now also in header template find:


                 <navigation>

paste this before:

          <div class="collapse navbar-collapse navbar-ex1-collapse">
			  <ul class="nav navbar-nav navbar-right">
				  <li id="nav-portal"><a href="portal.php"><i class="fa fa-bell"></i> {$lang->toplinks_portal}</a></li>
               <li id="nav-forums"><a href="index.php"><i class="fa fa-group"></i> {$lang->theme_bootbb_header_forum}</a></li>
               <li id="nav-search"><a href="search.php"><i class="fa fa-search"></i> {$lang->toplinks_search}</a></li>
               <li id="nav-member"><a href="memberlist.php"><i class="fa fa-users"></i> {$lang->toplinks_memberlist}</a></li>
				  
<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-cubes"></i> {$lang->theme_bootbb_header_misc} <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="search.php?action=getnew"><i class="fa fa-comment"></i> {$lang->welcome_newposts}</a></li>
            <li><a href="search.php?action=getdaily"><i class="fa fa-comments"></i> {$lang->welcome_todaysposts}</a></li>
            <li class="divider"></li>
			  <li id="nav-help"><a href="misc.php?action=help"><i class="fa fa-life-bouy"></i> {$lang->toplinks_help}</a></li>
          </ul>
</li> 
</ul>
  
          </div>


now after that if you meant that but also like this:

[attachment=41543]

you can comment out like so:

          <div class="collapse navbar-collapse navbar-ex1-collapse">
			  <ul class="nav navbar-nav navbar-right">
<!--				  <li id="nav-portal"><a href="portal.php"><i class="fa fa-bell"></i> {$lang->toplinks_portal}</a></li>
               <li id="nav-forums"><a href="index.php"><i class="fa fa-group"></i> {$lang->theme_bootbb_header_forum}</a></li>-->
               <li id="nav-search"><a href="search.php"><i class="fa fa-search"></i> {$lang->toplinks_search}</a></li>
<!--               <li id="nav-member"><a href="memberlist.php"><i class="fa fa-users"></i> {$lang->toplinks_memberlist}</a></li>-->
				  
<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-cubes"></i> {$lang->theme_bootbb_header_misc} <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="search.php?action=getnew"><i class="fa fa-comment"></i> {$lang->welcome_newposts}</a></li>
            <li><a href="search.php?action=getdaily"><i class="fa fa-comments"></i> {$lang->welcome_todaysposts}</a></li>
            <li class="divider"></li>
			  <li id="nav-help"><a href="misc.php?action=help"><i class="fa fa-life-bouy"></i> {$lang->toplinks_help}</a></li>
          </ul>
</li> 
</ul>
  
          </div>	


now if all that seems confusing or what not, you can simply try the header template below for example this below keeps the top menu while removing and moving the items you mentioned as well as removes the commented out code:

[attachment=41546]*

*for this replace header template with:

<header>
<div class="navbar navbar-default">
     <div class="container">
          <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse" aria-label="{$lang->theme_bootbb_header_toggle}">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span> 
               </button>
			  <div class="navbar-header">
				  <!--<a class="navbar-brand" href="{$mybb->settings['bburl']}">BootBB</a>-->
				  <a class="" href="{$mybb->settings['bburl']}"><img src="{$theme['logo']}" /></a>			  
			  </div>
          </div>
          <div class="collapse navbar-collapse navbar-ex1-collapse">
			  <ul class="nav navbar-nav navbar-right">
				  <li id="nav-portal"><a href="portal.php"><i class="fa fa-bell"></i> {$lang->toplinks_portal}</a></li>
               <li id="nav-forums"><a href="index.php"><i class="fa fa-group"></i> {$lang->theme_bootbb_header_forum}</a></li>
               <li id="nav-member"><a href="memberlist.php"><i class="fa fa-users"></i> {$lang->toplinks_memberlist}</a></li>
</ul> 
          </div>
     </div>
</div>
</header>
<div id="container">
	<a name="top" id="top"></a>
		<div id="header">
			<div id="panel">
				<div class="upper">
					<div class="container">
						{$welcomeblock}					
					</div>
			</div>
			</div>
	</div>
			</div>				   
                <main class="container">
				<br />										
          <div class="collapse navbar-collapse navbar-ex1-collapse">
			  <ul class="nav navbar-nav navbar-right">
               <li id="nav-search"><a href="search.php"><i class="fa fa-search"></i> {$lang->toplinks_search}</a></li>				  
<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-cubes"></i> {$lang->theme_bootbb_header_misc} <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="search.php?action=getnew"><i class="fa fa-comment"></i> {$lang->welcome_newposts}</a></li>
            <li><a href="search.php?action=getdaily"><i class="fa fa-comments"></i> {$lang->welcome_todaysposts}</a></li>
            <li class="divider"></li>
			  <li id="nav-help"><a href="misc.php?action=help"><i class="fa fa-life-bouy"></i> {$lang->toplinks_help}</a></li>
          </ul>
</li> 
</ul> 
          </div>			
                 <navigation>
				{$pm_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$unreadreports}
				{$pending_joinrequests}
				{$awaitingusers}
Thanks about that. Just as well I refreshed the page as I never got a notification.

I will study carefully what you say Wink

vintagedaddyo, thanks again for the info.

Now, before I embark on something I might regret, let me ask you to clarify what your scripts are supposed to accomplish (well, I understand the last one).

Just to clarify further, what I would like ideally is to get "search" and "new posts" moved to a visible place, without the need of a drop down menu.

I enclose a picture of what my forum used to look like (until the latest upgrade broke my theme ;Wink ) In that image I have "search", "New post" and a link to my website.

Hope this makes sense Smile

OK, I have tried the first mod and if I got it right, it has moved the bar with "portal, search, etc" further down on a desktop.
That is OK, but it doesn't solve main main issue of NOT having a hamburger on mobile. Also, there are way too many items Big Grin (but that is a common problem on MyBB), so I got rid of a few... here you can see what I got (random page)
https://www.autosvezzamento.it/forum/Thr...1#pid64371

However from mobile I still have the hamburger, instead I would like the menu moved down there too, as I was saying further up.

The help page could go in the footer somewhere. Nobody will ever look at it, but just in case... Big Grin

So, the project of SIMPLIFYING MyBB never really got off teh ground, huh? Big Grin
(2019-02-18, 08:13 PM)Arka Wrote: [ -> ]That is OK, but it doesn't solve main main issue of NOT having a hamburger on mobile.


sorry, i was wondering why you were going on about hamburgers and chalked it off previously to the op perhaps having munchies or in a state of hangryism or what not, lol. anyhoo, did you comment out the hamburger by chance?

              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse" aria-label="{$lang->theme_bootbb_header_toggle}">
Hahaha, sorry. I have always seen it called "hamburger" :d

in any case, if I comment out 
Quote:              <!-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse" aria-label="{$lang->theme_bootbb_header_toggle}">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span> 
               </button>-->


or only the first bit, the whole menu disappears from mobile.

(I wonder why I have now received a notification...)
(2019-02-22, 08:40 AM)Arka Wrote: [ -> ]Hahaha, sorry. I have always seen it called "hamburger" :d

in any case, if I comment out 
Quote:              <!-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse" aria-label="{$lang->theme_bootbb_header_toggle}">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span> 
               </button>-->


or only the first bit, the whole menu disappears from mobile.

(I wonder why I have now received a notification...)

yep, that is because you are removing a mobile button specifically utilized for mobile scaling so you will have to further modify to replace mobile specific menu options of your choosing. I only showed you what you initially asked for..., how to remove the menu, how to move the menu, and how to remove the hamburger button.

Note: this concept is not specific to mybb or a single theme and would need to be done on any such menu you edit and remove such functionality. Example, if you say edited your wp_theme menu, yes, the same concept would apply and would need to be a factor to consider before removing such.

[Image: 16j6op.png]
I know. On my site it makes more sense because there are more options to choose from. On the forum with only two idealy (for me) you would want them to be visiblke at all times, rather than having to to an extra tap.
I have to say, I have always though that hamburgers are way overused.
Small progress. Actually I was commenting out the wring line. i should have removed this div:
Quote:<!--          <div class="collapse navbar-collapse navbar-ex1-collapse">-->
So now the content of the hamburger is always visible.

Now what I am left to do is to make sure that the two items stay on the same line (from mobile) instead of being one two lines. It must be because of the lists that are in the code, but I don't know enough to change it (I have tried a couple of things, but no joy).
(2019-02-24, 05:13 PM)Arka Wrote: [ -> ]Small progress. Actually I was commenting out the wring line. i should have removed this div:
Quote:<!--          <div class="collapse navbar-collapse navbar-ex1-collapse">-->
So now the content of the hamburger is always visible.

Now what I am left to do is to make sure that the two items stay on the same line (from mobile) instead of being one two lines. It must be because of the lists that are in the code, but I don't know enough to change it (I have tried a couple of things, but no joy).


Happy Sunday Funday, day of rest. Wink

The way support works:

The first questions you ask are what solutions are provided. If said answers turn out to be not what you were looking for then as such new questions they are now a different support request. So far all of your original requests were answered and they were the correct answers..., as I stated further modifications would need to made by the end user once said changes are made. I am not here to answer your request and then do the entire job for you. On the contrary I provide answers that help get you pointed in the right direction and hope that the end result is a hands on learning experience for the end user else the entirety of my time would be taken up  on say a single support request if that makes sense. As you can see now you are wanting to keep the exact thing you wanted to get rid of initially..., again adding length to the initial support request.  Simple as this, use the previous info to remove the menu and move the other menu items, then remove the mobile specific media queries or simply rename the moved menu class and such to a new identifier and do not add mobile specific styling if you want it to display always without having to keep the hamburger button and span.


here is a simple example of how you don't necessarily have to keep hacking away at pre-existing mobile specific menu options and as I already suggested rename or create a new menu

for example:
[Image: fjdgmd.png]
[Image: 2cqcrrc.jpg]
<nav class="navbar default">
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-right" style="font-size: 16px; text-align: right;">
            <li class="col-xs-6"><a href="search.php?action=getnew"><i class="fa fa-comment"></i> {$lang->welcome_newposts}</a></li>
            <li class="col-xs-6"><a href="search.php?action=getdaily"><i class="fa fa-comments"></i> {$lang->welcome_todaysposts}</a></li>
    </ul>
 </div>
</nav>

* again here is a quickly done simple example of say mildly modifying the previous example to a specific usage for say adding title info and link specific lang:

<nav class="navbar default">
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-right" style="font-size: 16px;">
            <li class="col-xs-6" style="min-width: 100px;"><a href="search.php?action=getnew" title="{$lang->welcome_newposts}"><i class="fa fa-comment"></i> {$lang->welcome_new}</a></li> 
            <li class="col-xs-6" style="min-width: 100px;"><a href="search.php?action=getdaily" title="{$lang->welcome_todaysposts}"><i class="fa fa-comments"></i> {$lang->welcome_now}</a></li>
 
    </ul>
 </div>
</nav>


and adding this to your language specific global.lang.php language file:

english:

$l['welcome_new'] = "New";
$l['welcome_now'] = "Now";

italian:

$l['welcome_new'] = "Nuovo";
$l['welcome_now'] = "Adesso";

etc, etc...

[Image: ou6335.png]
[Image: 24azj0l.png]

Note: the previous examples as you can see have new and now  as in new posts and today's posts...., it dawned on me after that originally you had asked for search and new posts of which was done in previous examples except for these new ones...., so here is the same but with search instead of now / today's posts **

<nav class="navbar default">
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-right" style="font-size: 16px;">
            <li class="col-xs-6" style="min-width: 100px;"><a href="search.php" title="{$lang->toplinks_search}"><i class="fa fa-search"></i> {$lang->toplinks_search}</a></li>
            <li class="col-xs-6" style="min-width: 100px;"><a href="search.php?action=getnew" title="{$lang->welcome_newposts}"><i class="fa fa-comment"></i> {$lang->welcome_new}</a></li> 
    </ul>
 </div>
</nav>

** and adding only this to your language specific global.lang.php language file instead:

english:

$l['welcome_new'] = "New";

italian:

$l['welcome_new'] = "Nuovo";

etc, etc.. *

* and the very same as above but simply modified by further adding tooltips to the menu items:


<nav class="navbar default">
    <div class="container-fluid">
        <ul class="nav navbar-nav navbar-right" style="font-size: 16px;">
            <li class="col-xs-6" style="min-width: 100px;"><a href="search.php" data-toggle="tooltip" data-placement="top" title="{$lang->toplinks_search}"><i class="fa fa-search"></i> {$lang->toplinks_search}</a></li>
            <li class="col-xs-6" style="min-width: 100px;"><a href="search.php?action=getnew" data-toggle="tooltip" data-placement="top" title="{$lang->welcome_newposts}"><i class="fa fa-comment"></i> {$lang->welcome_new}</a></li>
        </ul>
    </div>
</nav>


* But again I am really not trying to keep doing the entire job for you and I only share this example as simply yet another simple starting point for you.

Final Note: One other aspect you could possibly consider is swapping back to the New and Now link options I showed earlier and opt to  start adding a search input in place of where the top nav sections that were removed and back in earlier posts as well.

[Image: jrebdi.png]

[Image: idgigm.png]
example of the search part:

 <div class="input-group">
 <input name="keywords" type="text" class="form-control" placeholder="{$lang->search_button}">
 <input type="hidden" name="action" value="do_search" />
 <input type="hidden" name="postthread" value="1" />
 <span class="input-group-btn">
 <button class="btn btn-default" type="submit">
 <i class="fa fa-search"></i>
 </button>
 </span>
 </div>
 </form> 

So primarily you would have a search input on top bar that works on mobile in place of where the top menu was that you originally wanted removed. ** also that would allow for re-adding of hamburger button if wanted as that would now serve a function for you.  ***again the example is provided simply as a simple starting point to work with.

Good luck! Smile
'Hamburger' menu is necessary because BootBB is a responsive theme and on small mobile phones all menu items go there to avoid clutter.

In the new version of the BootBB theme (that should come in about a week), the New Posts and Today's Posts will be moved from Misc Menu to the main menu. Search is in the main menu by default.

Also be aware that editing global.lang.php is not recommended as it will be overwritten on your next MyBB upgrade. For custom language strings, BootBB (since version 2.4) uses a separate language file. This is done with the help of the ougc_customlang plugin and the language file is ougc_customlang.lang.php

I would recommend adding the below custom strings there (of course do not overwrite the file when updating the theme)

$l['welcome_new'] = "New";
$l['welcome_now'] = "Now";
If using ougc_customlang.lang.php you can actually just override the default language strings to make them shorter instead of creating new language strings:

$l['welcome_newposts'] = 'New Posts';
$l['welcome_todaysposts'] = 'Today\'s Posts';
$l['toplinks_memberlist'] = 'Members';
Pages: 1 2