I am using bootstrap to build my site and the dropdown I am using is too long for the page so some items cannot be seen, is there any way to, limit the length it can go to before needing the user to scroll, I have attached an image to show what I mean as well as the code I am currently using
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li>Search By Category:</li>
<li role="separator" class="divider"></li>
<?php echo $htmlResult1; ?>
</ul>
The main results are brought in via php but follow the correct style to be listed
Any thoughts
As #Luis P.A. said:
Set a max-height and overflow to <ul>
ul.dropdown-menu {
max-height: 400px;
overflow-y: auto; /*scroll results in a scrollbar even when the height < 400px */
}
set the max-height and overflow attributes in your CSS
.fixedHeight-ddl{
height: auto;
max-height: 300px;
overflow-x: hidden;
}
and your tag
class="dropdown-menu fixedHeight-ddl"
Related
I want to put my menu in a separate PHP file so when I need to edit it, I only have to edit it once. The problem starts when I want to highlight the active page. Can someone help me to fix it?
<?php $currentPage = basename($_SERVER['SCRIPT_FILENAME']); ?>
Toggle navigation
<li></span> Home</li>
<li></span> About us</li>
<li class="dropdown">
<span class="glyphicon glyphicon-calendar"></span> Services <span class="caret"></span>
<ul class="dropdown-menu">
<li></span> Drivers services</li>
<li></span> Shop services</li>
</ul>
</li>
<li></span> On-line Application</li>
<li></span> Contact us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="clearfix"> </div>
</div><!-- navbar -->
I find the solution to my question adding this css in styles file:
/* The here ID identifies the current page and applies a white color to the text and a black background as a visual indicator. */
a#here {
background-color: #000 !important;
color: #fff !important;
}
Plus call the menu in each page with following code:
<div> <?php
$file ='includes/menu.php';
if (file_exists($file) && is_readable($file)) {
include($file);
} else {
throw new Exception("$file can't be found");
}
include('includes/menu.php');?>
</div>
A quick and dirty method to achieving this is in each file put the following:
<?php
include("header.php"); // Insert location of header file here
?>
and in your header.php file after creating your head block insert this
<?php $active= substr(basename($_SERVER['SCRIPT_FILENAME']),0, -4); ?> // Page Name
<body <?php echo "class='$active'";?>> // This sets the bodies class to be the page name.
finally in style.css use the following code to set the highlighted feature
// This is an example for my CSS. Insert your own css selector
// In my css i have this which adds a small orange bar to the bottom of the navigation option. I set the opacity to 0 to not display it.
.header nav ul li a:before
{
height: 5px;
background: #ea5c18;
opacity: 0;
}
// Then i set .PageName (the bodies class name) and set that specific nav element to have an opacity of 1.
.PageName .header nav ul li:first-child a:before
{
opacity:1;
}
I'm creating an custom template for wordpress, and I got problem with menu. I want to create menu in the sidebar.
I got static menu like this:
<ul class="purp_bullet">
<li><a href="#sub-1">A/a>
<ul id="sub-1">
<li>B</li>
<li>B</li>
<li>B</li>
<li>B</li>
<li>B</li>
</ul>
</li>
<li><a href="#sub-2">C/a>
<ul id="sub-2>
<li>D</li>
<li>D</li>
<li>D</li>
<li>D</li>
<li>D</li>
</ul></li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
With CSS like this:
ul.purp_bullet {
list-style-image: url('img/list_bullet.png');
padding-left: 17px;
text-decoration: none;
}
ul.purp_bullet li a {
color: #003366;
text-decoration: none;
}
ul.purp_bullet li a:hover {
color: red;
text-decoration: none;
}
ul.purp_bullet li a:active {
color: red;
text-decoration: bold;
}
I want it to be fully dynamic, just like wordpress menus, when I go into menu section in admin panel and create my own menu from pages that i created, then drag "my custom menu" onto widgets panel (sidebar) so it shows up. Note that this isn't my main menu (I already got the menu in header).
Also there is one more thing I need to do.
I got pages like employers and when I'm on some employer page the menu must be expanded( or rolled down, sorry for my bad english :x), but when i'm on other page it must be rolled up.
Screens:
When I'm on some employer page
When I'm on other pages like contact etc
Do i need create new menu in functions and then hook it like my main menu?
Can anyone help me how to do it?
The links on the images are being hidden or covered and I cannot figure out why. The first <a href.. below is an example of this.. Live version can be found here.. Basically any of the product images should be clickable..
<div class="image-wrap">
<a href="http://fundraisingfountain.pixelworklab.com/product/bull-dog/" title="Bull Dog">
<img width="150" height="150" src="http://fundraisingfountain.pixelworklab.com/wp-content/uploads/2013/06/Pillow-Pets-Bulldog-2-150x150.png" class="attachment-shop_catalog wp-post-image" alt="Pillow Pets - Bulldog (2)">
</a>
<ul class="product-details">
<li class="details">
<a class="button details" href="http://fundraisingfountain.pixelworklab.com/product/bull-dog/" title="Bull Dog">View Details</a>
</li>
<li class="price-wrap">
<span class="price"><strong><span class="amount">$25</span></strong></span>
</li>
<li class="cart">
Add to cart
</li>
</ul>
</div>
It works fine on my machine.
You'll have to check your CSS and make sure that there are no div tags that are layered on top of it (or have a higher z-index than it).
That is because you have set ul height:100% that is why it overlaps the image.
Change the height for the ul to something smaller and it will work fine
woocommerce.css Line # 634
ul.products li.product .product-details{
height:25px;
}
btw if you give a
border="0"
to your image links there wil be no grey (or any other color) border around it
Here's what you need to fix
ul.products li.product .product-details {
height: auto;
top: 108%;
}
ul.products li.product .product-details li {
vertical-align: middle;
}
I have this menu structure:
(the inner <ul> tag can be surrounded by a custom <div>, every other structural change is a lot more difficult because the code is generated from a dynamic module system, written in PHP)
<div id="menu">
<div class="body-menu">
<ul>
<li class="current"><div class="body-menu">
Item1
<ul>
<li class="current"><div class="body-menu">
Sub-Item 1
</div></li>
<li class=""><div class="body-menu">
Sub-Item 2
</div></li>
</ul>
</div></li>
<li class=""><div class="body-menu">
Item 2
</div></li>
</ul>
</div>
<div class="menu-background"></div>
</div>
The goal is to display the inner <ul> after Item 1 on the left side as a sub menu instead of at the top with the other toplevel items..
Is there a way to do that without modifying the structure? Just with CSS or so?
UPDATE:
thanks for all the answers!
especially to besluitloos and Caelea, that's exactly what I'm looking for.
The parent <li> containing the second <ul> should be positioned relative and the contained <ul> should be positioned absolute.
Sometihing like:
ul li { position: relative ;}
ul li ul {position: absolute; top: 0; left: 145px;}
I wrote left: 145px but you can give any value you want to that, depending on how big you want your menu to be.
PS: Tip: don't use the same "body-menu" class on those divs it should be different for the big container, and not only. And I don't really think it's necessary to have that div inside those < li >.
Probably you want to do something like hiding the sub-menu and make it pop up or show up when the mouse is hovering. Take a look at http://cssmenumaker.com/builder/42231 for an example.
.body-menu > ul > li {
position:relative;
float:left;
padding-bottom: 1em;
}
.body-menu ul ul {
position:absolute;
left:0;
top:1.3em;
display:none;
}
.body-menu > ul > li:hover > ul {
display:block;
}
Is that what you're looking for?
EDIT: I'm sorry, IE doesn't play nice with inline-block. So you'll have to change that to 'inline'. Then you can leave out the bottom padding because that doesn't work on an inline element. Except if you float the element. edited the code above to work with float.
edit 2: typo.
Look at this
http://jsfiddle.net/esTzk/
How come the color on my #header won't apply ?
Give it a height or hide the overflow and it will. Either will work in this case.
#header{
background:#2b2b2b;
color:#fff;
width:100%;
height:200px; /* overrides float calculations */
overflow:hidden; /* clears floats */
}
http://jsfiddle.net/AlienWebguy/esTzk/1/
Give your header a height, because you dont want it be greater than a certain value anyway:
#header{
background-color:#2b2b2b;
color:#fff
width:100%;
height:20px;
}
a better solution would be to move the div with clear both inside the header.
<div id="header">
<ul id="nav">
<li>Service Provider
<ul>
<li>Vendor / Manufacturer</li>
<li>Service Type</li>
<li>Service Technician</li>
</ul>
<div style="clear:both"></div>
</li>
<li>Cities & Stations
<ul>
<li>Stations</li>
<li>Station Owner</li>
</ul>
<div style="clear:both"></div>
</li>
<li>Firefighter</li>
<li>PPE Management</li>
<li>Care & Maintenance</li>
<li>Logout</li>
</ul>
<div style="clear:both"></div>
</div>
Just to add for your knowledge, it is because of the float:left in the #nav li selector. Because the elements inside the #header div are floated the #header div is set to height=0. That's why it won't display the background color before you specify a height for it or clear the float.