MyBB Community Forums

Full Version: Drop Down Menu for Clean Pro Theme?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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...
Here you have a simple drom down menu
https://www.w3schools.com/howto/tryit.as...s_dropdown

Add me on discord:Masterslyyr#8684
If you want help to add it
(2020-05-21, 08:05 AM)Mastersly Wrote: [ -> ]Here you have a simple drom down menu
https://www.w3schools.com/howto/tryit.as...s_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>
Its doesnt work because you didnt add the script
If you want a responsive one https://wallbb.co.uk/simple-three-step-t...bb-forums/ WallBB has made a tutorial
He want a drop menu,
Add me on discord bro Masterslyyr#8684
I will help you
(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!
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]