MyBB Community Forums
Drop Down Menu for Clean Pro Theme? - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Extensions (https://community.mybb.com/forum-201.html)
+--- Forum: Themes (https://community.mybb.com/forum-103.html)
+---- Forum: Theme Support (https://community.mybb.com/forum-10.html)
+---- Thread: Drop Down Menu for Clean Pro Theme? (/thread-227902.html)



Drop Down Menu for Clean Pro Theme? - RocketFoot - 2020-05-20

Can anyone help me come up with a simple drop down menu to use on Clean Pro theme?  I have been trying some basic CSS stuff but I cannot get any to work.  I also want to keep the responsiveness of the theme!

My theme is currently visible to Admin only...


RE: Drop Down Menu for Clean Pro Theme? - Mastersly - 2020-05-21

Here you have a simple drom down menu
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown

Add me on discord:Masterslyyr#8684
If you want help to add it


RE: Drop Down Menu for Clean Pro Theme? - RocketFoot - 2020-05-22

(2020-05-21, 08:05 AM)Mastersly Wrote: Here you have a simple drom down menu
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown

Add me on discord:Masterslyyr#8684
If you want help to add it
I tried that and about 5 other tut's but I can't get it to work!  

I can add other nav menu items but the dropdown won't even format correctly!

This is what I am working with....

<div id="container">
<div id="header-navbar">
	<nav class="navbar navbar-inverse navbar-no-corners">
  		<div class="container-fluid">
    		<div class="navbar-header">	
            <a class="visible-xs" style="float: left;" href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}"></a>			
      			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        			<span class="icon-bar"></span>
        			<span class="icon-bar"></span>
        			<span class="icon-bar"></span> 
      			</button>
   			</div>
    		<div class="collapse navbar-collapse" id="myNavbar">
			<div id="logo" class="col-lg-2 pull-left hidden-xs">
					<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}"></a>
			</div>		
     			<ul class="col-lg-7 nav navbar-nav text-center">
					<li><a href="{$mybb->settings['bburl']}/index.php">Home</a></li>
					{$menu_portal}
					{$menu_search}
					{$menu_memberlist}
					{$menu_calendar}
					<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
					<li><a href="{$mybb->settings['bburl']}/wiki/">7173 Wiki</a></li>
					<li><a href="#">Add Dropdown Here</a></li>
							  <!-- UNREADPOSTS_LINK -->
						</ul>	
              
			
        	<div class="col-lg-3 usersection pull-right">
				{$welcomeblock}
        	</div>
    		</div>
  		</div>
	</nav>
</div>
				
<div id="search">
    <button type="button" class="close"><i class="fa fa-times"></i></button>
    <form class="search-form" action="search.php" method="post">
		<input type="hidden" name="action" value="do_search" />
         <input type="hidden" name="postthread" value="1" />
         <input type="hidden" name="forums" value="all" />
         <input type="hidden" name="showresults" value="threads" />
        <input type="search" name="keywords" placeholder="type keyword(s) here" />
        <button type="submit" class="btn btn-primary">Search</button>
    </form>
</div>
	
	<div id="content">
	  	<div class="main-wrapper">
		<div class="wrapper">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			{$pending_joinrequests}
			{$awaitingusers} 
			<navigation>



RE: Drop Down Menu for Clean Pro Theme? - Mastersly - 2020-05-23

Its doesnt work because you didnt add the script


RE: Drop Down Menu for Clean Pro Theme? - DevLife - 2020-05-23

If you want a responsive one https://wallbb.co.uk/simple-three-step-tutorial-add-responsive-menu-mybb-forums/ WallBB has made a tutorial


RE: Drop Down Menu for Clean Pro Theme? - Mastersly - 2020-05-23

He want a drop menu,
Add me on discord bro Masterslyyr#8684
I will help you


RE: Drop Down Menu for Clean Pro Theme? - RocketFoot - 2020-05-26

(2020-05-23, 08:21 PM)Mastersly Wrote: He want a drop menu,
Add me on discord bro  Masterslyyr#8684
I will help you
Thanks Masterly...I have to set up a discord account...I will do so as soon as I have some time to hook up with you!


RE: Drop Down Menu for Clean Pro Theme? - User 6029 - 2020-05-29

I am not sure why people are suggesting using outside sourced menus while there are several ways to use the existing dropdown functionalities in the theme to accomplish this and would be an obvious common suggestion for anyone with basic knowledge quickly looking at the theme for even a few seconds rather than suggesting say adding a new outside sourced menu, just saying...



While I do not have the free time to really look at this for more than a few seconds here is just one super simple and fast tweak and way....

in header template find:

     			<ul class="col-lg-7 nav navbar-nav text-center">
					<li><a href="{$mybb->settings['bburl']}/index.php">Home</a></li>
					{$menu_portal}
					{$menu_search}
					{$menu_memberlist}
					{$menu_calendar}	
					<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>


now right below that find:
 </ul>	


Replace with:

   <style>
      @media screen and (max-width: 767px) {
      .ddnow {
      background-color: #FFFFFF !important;
      position: absolute !important;
      width: 100% !important;	  
      -webkit-box-shadow: 2px 6px 21px -2px rgba(0,0,0,0.75) !important;
      -moz-box-shadow: 2px 6px 21px -2px rgba(0,0,0,0.75) !important;
      box-shadow: 2px 6px 21px -2px rgba(0,0,0,0.75) !important;
      }	
      .ddnow > li > a {
      color: #9D9D9D !important;
      }
      .ddnow > li > a:hover,
      .ddnow li > a:focus {
      color: #666666 !important;
      background: #F5F5F5 !important;
      }		
      }		
   </style>
   <li>
      <a data-target="#" href="#" data-toggle="dropdown" class="dropdown-toggle">DDNAME <i class="fa fa-bars"></i></a>		
      <ul class="dropdown-menu ddnow">
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
         <li><a href="#">Link 3</a></li>
         <li><a href="#">Link 4</a></li>
         <li><a href="#">Link 5</a></li>
         <li><a href="#">Link 6</a></li>
      </ul>
   </li>
</ul>

Basic Example:

[Image: Forums.png]

[Image: Forums-2.png]

[Image: Forums-1.png]