I am experiencing an issue with bootstrap in IE. It relates to the .pull-right class with just floats the <div> to the right.
This is a visual demonstation:
Chrome 28
IE10
The menu is construted using KendoUI and my site uses Bootstrap v.2.3.2 RC2. I am not aware of any compatibility issues with IE10. This issue does NOT present itself with IE9 or below though which is strange.
Here is the code:
<div class="main-ui-nav">
<div class="container">
<ul id="menu">
<li>
Customer
<ul>
<li>Customer Details</li>
</ul>
</li>
<li>
Products
<ul>
<li>View Products</li>
</ul>
</li>
<li>
Sites
<ul>
<li>Add Site</li>
<li>View Registered Sites</li>
</ul>
</li>
<li>
Payments
<ul>
<li>Invoices</li>
<li>Agreements</li>
<li>History</li>
<li>Oustanding</li>
<li>Statements</li>
</ul>
</li>
<li>
Notes
<ul>
<li>Create Note</li>
<li>Amend</li>
<li>View</li>
</ul>
</li>
<li class="pull-right">
Session Options
<ul>
<li>Exit Account</li>
<li>Logout</li>
</ul>
</li>
<li class="pull-right">Creation Options
<ul>
<li>Create Payment</li>
<li>Create Note</li>
<li>Create Invoice</li>
</ul>
</li>
</ul>
</div>
</div>
Thanks for your help in advance.
JS FIDDLE : http://jsfiddle.net/davcpas123/QFdTN/8/embedded/result/
This issue was due the KendoUI overriding the standard .clearfix classes.
To fix this I added :
.clearfix {
clear:both;
}
to my ui-full.css file.
Related
I have a simple topbar menu in html.How can i get it via wordpress ? walker_nav_menu is great,but i don't know how to use it properly as a newbie in wordpress.
<ul class="topbar-list topbar-menu">
<li>Blog</li>
<li>Contact</li>
<li>Forums</li>
<li>
Dropdown
<ul class="topbar-dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li class="topbar-submenu">
Submenu
<ul class="topbar-submenu-in">
<li>Submenu</li>
<li>Submenu</li>
<li class="topbar-submenu">
Submenu
<ul class="topbar-submenu-in">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="cd-log_reg hidden-sm hidden-md hidden-lg"><strong><a class="cd-signin" href="javascript:void(0);">Login</a></strong></li>
<li class="cd-log_reg hidden-sm hidden-md hidden-lg"><strong><a class="cd-signup" href="javascript:void(0);">Register</a></strong></li>
</ul>
how is possible to make simple top menu in foundation 5? Is needed to use topbar or is there any other possibility? My actual code is:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>Site Name</h1>
</li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active">Domov</li>
<li>Home</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Contact</li>
</ul>
</section>
</nav>
But i have problem with mobile version. Navigation is broken and jumps under menu not collapse in simple button. Can someone tell me why? and how to fix it, or make more simple navigation? Thanks.
This is a standard foundation .top-bar navigation. Don't forget to include the necessary js files and initialize them as well.
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
Just add this
.top-bar {
overflow: visible;
}
DEMO
I think , instead of using topbar , you can use iconbar which will easily meet your requirement . UI will be same for mobile as well as for desktop version .
Check below link:
http://foundation.zurb.com/docs/components/icon-bar.html
Im using the ZURB Foundation Topbar, I like it apart from a bug I've found. On 2nd level drop downs, if you highlight then click on the link (li elements) just before it takes you to the page you clicked on, the active highlight flicks to one of the above elements and back.
---[The reason its flicking to one of the above elements, is due to it being the 1st level dropdown to be selected, for some reason it flicks to the previous level drop down then back the the 2nd level choice]---Still No idea to fix it though.
<!-- Nav Section Mobile-->
<div class="top-bar-container hide-for-large-up">
<nav class="top-bar">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Nav Section -->
<ul class="">
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class="has-dropdown">pages
<ul class="dropdown">
<li class="divider hide-for-small"></li>
<li><a href="/page.html" >page</a></li>
<li><a href="/page.html" >page</a></li>
<li>page</li>
<li>page</li>
<li>page</li>
<li>page</li>
</ul>
<li class="divider hide-for-small"></li>
<li class="has-dropdown">More
<ul class="dropdown">
<li class="divider hide-for-small"></li>
<li>page</li>
<li>page</li>
<li>page</li>
</ul>
<li class="divider hide-for-small"></li>
</ul>
</section>
</nav>
</div>
In Foundation 4 there is a bug because of a pseudo class being used with a colon :. It should be a period . after the li:
.top-bar-section ul li:hover > a {
It should read:
.top-bar-section ul li.hover > a {
That'll fix it right up
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I'm re-designing our administration menu (its currently vertical and LONG/CONFUSING) so I wanted to do a condensed horizontal one instead. I've been fiddling with this for a week now and I'm about to rip my hair out.
Here is a version you can see:
Horizontal Menu with 3 submenus
My CSS can be viewed here:
CSS File
Just a few quirks and I can't figure out how to fix them. I'll list them here separately:
Level 1 (the main buttons) are fine
Level 2 (Tina) looks fine
Level 3 (Tina/Inventory), the 3rd level options are BEHIND the level 2 ones. How do I get those in front of the level 2 stuff ? Ideally, I'd like level 3 to have the background color of #E4F683 and a hover color of #F6ED83 (for the Adjust On Hand, Component Report, Manage OOS)
Level 4 (Customers/Orders/Handpost), the level 4 stuff shows up when you hover over level 2... at that point level 3 should show, but level 4 should be hidden until you hover; same problem as above in that level 4 is behind level 3. Ideally, I'd like the background color of #E0F574 and a hover color of #AEC245 (Transaction, Shipping, Credit)
I really wouldn't mind if the level 3/4 weren't over level 2, but just lined up with them - this would fix the "behind/front" issue, but I can't seem to figure how what to change to make it work that way
I'd also like levels 2/3/4 to not be quite so high (there's quite a few more entries that I need to add), but I can't seem to figure out how to change my css to fix that
If someone could help me re-write my CSS to work how I really intend it to, I'll... well, I dunno, send you some cookies or something! I've looked and looked at this CSS til I'm cross-eyed!
I tried to post images to make it clearer but the system won't let me.
Mahalo!
I have created this Fiddle, removing all tables.
HTML:
<ul id="tinamenu">
<li><span class="mainmenu">Tina</span>
<ul>
<li>Admin
<ul>
<li>Calendar Import
</li>
</ul>
</li>
<li>Inventory
<ul>
<li>Adjust On Hand
</li>
<li>Component Report
</li>
<li>Manage OOS
</li>
</ul>
</li>
<li>Marketing
<ul>
<li>Count Incomplete
</li>
<li>Send Promo Email
</li>
<li>Validate Emails
</li>
</ul>
</li>
<li>Miscellaneous
<ul>
<li>FNWL Calendar
</li>
</ul>
</li>
<li>Orders
<ul>
<li>All Un-Processed
</li>
<li>Hand Post Transaction
</li>
<li>View Test Order
</li>
</ul>
</li>
<li>Personnel
<ul>
<li>Timecard Activity
</li>
</ul>
</li>
<li>Products
<ul>
<li>Categories
</li>
<li>FO Data
</li>
<li>New Product Checklist
</li>
<li>Price Table
</li>
<li>Sizes/Weights/Prices
</li>
<li>Specials
</li>
</ul>
</li>
<li>Reports
<ul>
<li>Carts
</li>
</ul>
</li>
<li>Web Site
<ul>
<li>Page Text
</li>
</ul>
</li>
<li>Personalize Menu
</li>
</ul>
</li>
<li><span class="mainmenu">Customers</span>
<ul>
<li>Orders
<ul>
<li>All Un-Processed
</li>
<li>Hand Post
<ul>
<li>Transaction
</li>
<li>Shipping
</li>
<li>Credit
</li>
</ul>
</li>
<li>Processed/Not Printed
</li>
<li>Awaiting Mail Payment
</li>
<li>Awaiting PayPal
</li>
<li>On Account
</li>
<li>Process Credit
</li>
<li>Search
</li>
<li>Search Order Notes
</li>
<li>Cancelled Orders
</li>
<li>Archived Orders
</li>
<li>Returns
</li>
<li>Damage Claims
</li>
<li>Outstanding RMAs
</li>
</ul>
</li>
<li>Customers
<ul>
<li>Email Customer
</li>
<li>Save Cart
</li>
<li>Database
</li>
<li>Search
</li>
<li>Search Emails
</li>
<li>Add
</li>
<li>Monthly Billing
</li>
<li>Set Non-HTML Status
</li>
<li>Combine Customer #s
</li>
<li>Chargebacks
</li>
<li>Prepaid Returns
</li>
</ul>
</li>
</ul>
</li>
<li><span class="mainmenu">Products</span>
<ul>
<li>New
<ul>
<li>Qualify Products
</li>
<li>Ingredient
</li>
<li>Non-Ingredient
</li>
<li>Price Table
</li>
<li>Non-Catalog
</li>
<li>Hidden
</li>
<li>New Product Checklist
</li>
</ul>
</li>
<li>Edit
<ul>
<li>Product
</li>
<li>Hidden
</li>
<li>Non-Catalog
</li>
<li>Sizes/Weights/Prices
</li>
<li>FO Data
</li>
<li>Pthalate/Vanillin
</li>
<li>Hide
</li>
</ul>
</li>
<li>Delete
<ul>
<li>Catalog
</li>
<li>Hidden
</li>
<li>Non-Catalog
</li>
</ul>
</li>
<li>Price Table
<ul>
<li>Manage
</li>
<li>Edit
</li>
<li>FO/CFO Check
</li>
<li>FO/CFO Catalog Price Check
</li>
</ul>
</li>
<li>Organic
<ul>
<li>Products
</li>
<li>Edit
</li>
</ul>
</li>
<li>Inventory
<ul>
<li>View OOS w/Sizes
</li>
<li>View OOS Products
</li>
<li>Manage OOS
</li>
<li>OOS Log
</li>
<li>Adjust On Hand
</li>
<li>Component Report
</li>
<li>By Vendor
</li>
<li>Vendor Receive Log
</li>
<li>By Category
</li>
</ul>
</li>
<li>Miscellaneous
<ul>
<li>Search Criteria
</li>
<li>Edit MSDS/Spec Sheet
</li>
<li>List MSDS/Spec Files
</li>
<li>Saponification Values
</li>
<li>Missing Images
</li>
<li>Upload Image
</li>
</ul>
</li>
<li>Specials
</li>
<li>Categories
</li>
<li>Clearance
</li>
<li>Extra Products
</li>
<li>On Order
</li>
</ul>
</li>
<li><span class="mainmenu">Warehouse</span>
<ul>
<li>Orders Shipped
</li>
<li>Shipping Charges
</li>
<li>Manage Receiving
</li>
<li>Products Needed
</li>
<li>Samples Received
</li>
</ul>
</li>
<li><span class="mainmenu">Marketing</span>
<ul>
<li>Promotional Emails
<ul>
<li>Validate Emails
</li>
<li>Send Promo Email
</li>
<li>Count Incomplete
</li>
<li>Search Mailing List
</li>
</ul>
</li>
</ul>
</li>
<li><span class="mainmenu">Web Site</span>
<ul>
<li>Page Text
</li>
</ul>
</li>
<li><span class="mainmenu">Reports</span>
<ul>
<li>Orders
<ul>
<li>Carts
</li>
</ul>
</li>
</ul>
</li>
<li><span class="mainmenu">Miscellaneous</span>
<ul>
<li>FNWL Calendar
<ul>
<li>Test Calendar
</li>
</ul>
</li>
</ul>
</li>
CSS & HTML on:
http://jsfiddle.net/andyjh07/cKnKL/
Please go to the misc menu at the end to see it in action (due to the small screen of jsFiddle)
Please feel free to nick the HTML and CSS codes as seems to be working :)
You may want to use relative and absolute positioning to move your sub-items and enable z-index to have them on top/below one another.
Here's an example of a mega menu I've used; take a look at how they display the sub items. It doesn't have more than one sub item, but the concept is the same. You may even want to use it to have all your sub items together, rather than use sub-sub items:
http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html
Just looked at the Bootstrap toolkit and attempting to get the dropdown's working on the top menu.
The code I have for the menu is as follows
<div class="topbar">
<div class="fill">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Site News</li>
<li class="dropdown">
Community
<ul class="dropdown-menu">
<li>Chatroom</li>
<li class="divider"></li>
<li>Forums</li>
</ul>
</li>
</ul>
<form class="pull-left" action="">
<input type="text" placeholder="Search" />
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
Account
<ul class="dropdown-menu">
<li>Profile</li>
<li>Settings</li>
<li>Messages</li>
<li class="divider"></li>
<li>Admin</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
The dropdown isn't doing anything when clicked?
I have included the following css file.
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
Can anyone help me here?
Thanks.
Try to add the JavaScript file for the dropdown functionality too - http://twitter.github.com/bootstrap/#javascript
You need to make sure that you have a reference to jquery, and a reference to the bootstrap js in your page.
e.g
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js"></script>
Then, you either need to give one of your containers the attribute, data-dropdown="dropdown" , or explicitly set the container as a dropdown container using jquery, $('#mycontainerid').dropdown();
Generally having Jquery referenced above Bootstrap does the trick. You don't even have to mention bootstrap-dropdown explicitly. worked for me on two different occasions. Hope it helps!
Try adding the data-dropdown property to your initial <li> e.g.
<li class="dropdown" data-dropdown="dropdown">
Hope this helps.