I'm using Bootstrap 3 to create a menu. Simple run of the mill html/css stuff.
Having problems when on the iPad - some of the links don't work.
The dropdown menu is working fine - as are all the links within - which seems strange. There's a "scroll-to" function on the list - might be the problem but it's not affecting the dropdown? Sort of stumped.
Thanks in advance.
Can be seen here.
http://www.lapthelough.org/index.php/lap10
<div class="navbar-collapse collapse">
<ul id="scrolling" class="nav nav-pills">
<li class="active menubadge float shadow" >Home</li>
<li>event</li>
<li>route</li>
<li>start</li>
<li>safety</li>
<li>partner</li>
<li>fundraise</li>
<li>register</li>
<!-- dropdown in main menu "DROPNAV"-->
<li class="dropdown">
… <span class="caret"></span>
<ul class="dropdown-menu">
<li>Training</li>
<li>FAQs</li>
<li>Blog</li>
<li>Forum</li>
<li class="divider"></li>
<li class="dropdown-header">Social</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</div>
Related
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<li>Home</li>
<li>About us</li>
<li class="active">Projects</li>
<li>Testimonials</li>
<li>Contacts</li>
</a>
</li>
</ul>
Hey there, I have this navbar code on my HTML project. However, when i insert my .html into validator.w3.org, i get the issue. Can someone please help me check? I'm pretty sure I closed it already..
You have to wrap those li tags inside anchor tag with ul.
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<ul>
<li>Home</li>
<li>About us</li>
<li class="active">Projects</li>
<li>Testimonials</li>
<li>Contacts</li>
</ul>
</a>
</li>
</ul>
this will solve first warning in validator.
I am having a little problem with the navigation list items going a little below the top-bar when I resize the browser. When I remove the image it seems to be working perfectly fine on all screen resolutions but inserting the logo has had an affect on this. Is there any way I can solve this. Can't seem to find out what the problem is.
HTML:
<!-- HEADER START -->
<div id="header">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<a href="index.html"><img src="img/flogo.svg" class="logo" alt="Logo">
Sharp <span>Media </span>
</a>
</h1>
</li>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
<li>Home</li>
<ul class="dropdown">
</ul>
</li>
<li class="divider"></li>
<li>FAQs</li>
<li class="divider"></li>
<li class="has-dropdown">
<li>Contact Us</li>
<ul class="dropdown">
<li class="divider"></li>
</ul>
</li>
</ul>
</section>
</nav>
What is the problem with this code below..
everything is working except menu drop down.
<div class="navbar">
<div class="navbar-inner" >
<div class="container">
<ul class="nav">
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Web Design</li>
<li>Web development</li>
<li>Wordpress Theme development</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li > Hello, <?php echo "Admin"; ?> </li>
</ul>
</div>
</div>
You are missing a at the bottom. Otherwise everything seems to be fine.
Is there a way to extend this designmodo example to allow for 3 levels of navigation?
I’d very much like to use this menu example, but I can’t figure out how to add a third level of functionality. Any help would be greatly appreciated!
Example:
http://designmodo.com/css3-accordion-menu/
Here is a fiddle that i'm working with: http://jsfiddle.net/johnstonian/r5rEZ/
Here is a sample menu i'm working with:
<ul class="accordion">
<li id="one" class="files">
My Files<span>495</span>
<ul class="sub-menu">
<li id="five">
<em>01</em>Dropbox<span>42</span>
<ul class="sub-menu">
<li><a><em>01</em>3rd Level<span>9</span></a></li>
<li><em>02</em>3rd Level<span>14</span></li>
<li><em>03</em>3rd Level<span>3</span></li>
</ul>
</li>
<li><em>02</em>Skydrive<span>87</span></li>
<li><em>03</em>FTP Server<span>366</span></li>
<li><em>01</em>Dropbox<span>42</span></li>
</ul>
</li>
<li id="two" class="mail">
Mail<span>26</span>
<ul class="sub-menu">
<li><em>01</em>Hotmail<span>9</span></li>
<li><em>02</em>Yahoo<span>14</span></li>
<li><em>03</em>Gmail<span>3</span></li>
</ul>
</li>
<li id="three" class="cloud">
Cloud<span>58</span>
<ul class="sub-menu">
<li><em>01</em>Connect<span>12</span></li>
<li><em>02</em>Profiles<span>19</span></li>
<li><em>03</em>Options<span>27</span></li>
</ul>
</li>
<li id="four" class="sign">
Sign Out
<ul class="sub-menu">
<li><em>01</em>Log Out</li>
<li><em>02</em>Delete Account</li>
<li><em>03</em>Freeze Account</li>
</ul>
</li>
</ul>
Use a menu designed for this, such as:
CSSPlay: Multi-Level Flyout Menu
CSSPlay: A cross-browser drop-down cascading validating menu
CSSPlay: The ULTIMATE CSS only drop-down menu
i have a site with multiple pages inside a single index.html.
the menu elements call for these pages using a path "#!/..."
<nav class="menu">
<ul id="menu">
<li id="item1"><span></span><a "javascript:void(0)" href="#!/">home</a></li>
<li id="item2"><span></span>about us</li>
<li id="item3"><span></span>what we do</li>
<li id="item4"><span></span>our work</li>
<li id="item5"><span></span>links</li>
<li id="item6"><span></span><span></span>opportunity alert</li>
<li id="item7"><span></span>contact us</li>
</ul>
</nav>
This seems to work okay except when you scroll down the page, then click another link, then click the link to the previous page you scrolled down on. This returns you to where you were scrolled down previously. I need it to return you to the top of each page when you click on any page link.
Just take out the pound sign:
<nav class="menu">
<ul id="menu">
<li id="item1"><span></span><a "javascript:void(0)" href="/">home</a></li>
<li id="item2"><span></span>about us</li>
<li id="item3"><span></span>what we do</li>
<li id="item4"><span></span>our work</li>
<li id="item5"><span></span>links</li>
<li id="item6"><span></span><span></span>opportunity alert</li>
<li id="item7"><span></span>contact us</li>
</ul>
</nav>