navbar hover drop down link

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
mark5228
Registered User
Posts: 58
Joined: Thu May 14, 2015 1:07 pm

navbar hover drop down link

Post by mark5228 »

Hi im making a new navbar and im having difficulty making a drop down menu. ive managed to center the menu title and place a few links but would like it to dropdown when you hover over the menu title to revel these links. This is on prosilver if anyone could help.

Code: Select all

<div class="navbar" role="navigation">
	<div class="inner">
<span style="text-align: center;">
    	
                <li class="active">
                <a href="#">Menu Title</a>
              
                <ul class="drop">
                    <li><a href="#">Drop item one</a></li>
                    <li><a href="#">Drop item two</a></li>
                    <li><a href="#">Drop item three</a></li>
                    <li><a href="#">Drop item four</a></li>
                    <li><a href="#">Drop item five</a></li>
                </ul>
                </li>
</span>
	</div>
</div>
Image
User avatar
Mannix_
Registered User
Posts: 961
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: navbar hover drop down link

Post by Mannix_ »

-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.3.x etc. contact me here or here.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
mark5228
Registered User
Posts: 58
Joined: Thu May 14, 2015 1:07 pm

Re: navbar hover drop down link

Post by mark5228 »

thank you i had to play around with the css there was a few conflicts
here is the code for a center dropdown menu in a navbar.

Code: Select all

<style>

.dropdownx {
    position: relative;
    display: inline-block;
    font-size: 150%;
}

.dropdown-contentx {
    display: none;
    position: absolute;
    background-color: #000000;
    min-width: 85px;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-contentx a {
    font-size: 80%;
    color: #ffffff;
    padding: 4px 2px;
    text-decoration: none;
    display: block;
}

.dropdown-contentx a:hover {background-color: #000}

.dropdownx:hover .dropdown-contentx {
    display: block;
}

</style>

<div class="navbar" role="navigation" style="margin-top:5px;">
	<div class="inner">
<span style="display: block; text-align: center;">
    
<div class="dropdownx">
  <a href="#"><i class="icon fa-bars fa-fw" aria-hidden="true"></i><strong>dropdown menu</strong></a>
  <div class="dropdown-contentx">
    <a href="#">link 1</a>
    <a href="#">link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
</span>
	</div>
</div>
Post Reply

Return to “[3.2.x] Styles Support & Discussion”