I have horizontal & vertical menu in header section and vertical menu need to show the submenu as dropdown on click event, Horizontal menu also has submenus which are not shown in this example as i am stuck with the vertical menu More Menu as
Codepen: https://codepen.io/KGuide/pen/jOEpzQo
in below code Media submenu items should show under Media rather it shows them at the bottom, how can i fix this as per image shown
<div class="menu-w">
Menu One
Menu Two
Menu Three
Menu Four
</div>
<div class="menu-w">
More Menu
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Media
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
News
</li>
<li>
Video Gallery
</li>
<li>
Blog
</li>
</ul>
</li>
<li>Directory </li>
<li>Contact </li>
</ul>
</div>
just remove .list-unstyled from the #pageSubmenu ul
Related
So basically I have a unordered list and I used css to display the list in a row using (display:inline). And im having the problem where I try to position one of the list elements to the opposite side of the page. It will act as one whole unit basically. How do I move these separately from each other? Thanks ahead of time! #save-my-code
<ul class="nav nav-pills">
<li>
Portfolio
</li>
<li>
Youtube
</li>
<li>
Blog
</li>
<li>
Photography
</li>
</ul>
Use the class pull-right to pull your elements to the right side of the page.
<ul class="nav nav-pills">
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
Youtube
</li>
<li>
Blog
</li>
<li>
Photography
</li>
</ul>
Alternatively, use
.pull-right {
float: right
}
if you're not using bootstrap.
Hope this helps!
I'm using bootstrap and want to add a header bar to the right of the sidebar, so it aligns next to it, without sitting on top. The sidebar is also collapsible, so the header would have to extend to the whole page once the sidebar is collapsed.
Sidebar code:
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
Did it with the default navbar by positioning it within the wrapper, but below the side-bar nav div, no extra positioning needed.
Seeing as you're already using bootstrap, why don't you add the already built column classes to your markup. Be sure you have Bootstrap CSS included.
<div id="sidebar-wrapper" class="col-lg-3">
Then on your Header...
<div id="header-wrapper" class="col-lg-9">
Also just did a pen found here
It would be a good idea to take advantage of the column classes as it make responsive design easier.
I am starting to learn ember and try to incorporate some navigation bar using zurb foundation framework. I have a problem with dropdown menu. Check this link
<ul class="title-area">
<li class="name">
<h1>Home</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">
<ul class="left">
<li class="has-dropdown">
{{#linkTo "about"}}About{{/linkTo}}
<ul class="vertical dropdown menu" data-dropdown-menu>
<li click>{{#linkTo "about.team"}}Team{{/linkTo}}</li>
</ul>
</li>
<li click>{{#linkTo "about.team"}}About/Team again{{/linkTo}}</li>
<li>{{#linkTo "contact"}}Contact{{/linkTo}}</li>
</ul>
</section>
I can not achive to trigger route when clicking on About/Team. When clicking on "About/Team again" then route works.
Any idea why this happens?
Actually I would like to have horizontally scrollable menu with dropdowns smth like this:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable pure-menu-fixed">
Brand
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item">Settings</li>
<li class="pure-menu-item">Log Out</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
Contact
<ul class="pure-menu-children">
<li class="pure-menu-item">Email</li>
<li class="pure-menu-item">Twitter</li>
<li class="pure-menu-item">Tumblr Blog</li>
</ul>
</li>
</ul>
</div>
But it does not work. Actually horizontal menu scrolling works, but dropdown does not(( I found out that it is because .pure-menu-scrollable and pure-menu-has-children classes can't get along. So at this point I can have or scrolling menu or menu with dropdown but not both at the same time.
Is there any way to make pure menu both scrollable and with dropdown?
So my site (jakepotterryan.com) has a vertical nav menu floating to the left. I recently tried creating a dropdown menu containing my projects. I decided to go with Bootstrap stacked nav but I can't seem to get the menu to actually do anything.
maybe it has to do with space constraints within my container that maybe won't allow the menu to expand?
<ul class="nav navbar-stacked">
<li class="active">
Home
</li>
<li>
About Me
</li>
<!--dropdown-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Projects<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Blog
</li>
<li>
Blink Securities
</li>
<li>
Head Tunes LLC.
</li>
<li>
Chub_feed
</li>
</ul>
</li>
<li>
Resume
</li>
</ul>
Uncaught Error: Bootstrap's JavaScript requires jQuery
You need to load jQuery before Bootstrap (and any other library, plugin or function that uses it).