Please take a look at this jsfillde.
<nav role="navigation" class="nav-main">
<ul class="nav nav-pills" id="menu-primary-navigation">
<li class="active menu-home">Home</li>
<li class="menu-about-us">About Us</li>
<li class="menu-program">Program</li>
<li class="menu-events">Events</li>
<li class="menu-donate">Donate</li>
<li class="menu-contact">Contact</li>
</ul>
</nav>
As you can see, the "about us" link is no longer clickable because of the image placed on the left of it. I have played with different z-index values to no success.
Do you have any suggestion on how to fix that?
A quick solution... Set "z-index:1000"
<nav class="nav-main" role="navigation" style="z-index:1000;">
<ul id="menu-primary-navigation" class="nav nav-pills">
<li class="active menu-home">Home</li>
<li class="menu-about-us">About Us</li>
<li class="menu-program">Program</li>
<li class="menu-events">Events</li>
<li class="menu-donate">Donate</li>
<li class="menu-contact">Contact</li>
</ul>
</nav>
Related
this is all of my code for the navbar
Midterm Project
<ul class="nav navbar-nav">
<li class="nav-item"><h2 class="nav-font2">Welcome Page</h2></li>
<li class="nav-item"><h2 class="nav-font2">About</h2></li>
<li class="nav-item"><h2 class="nav-font2">Characters</h2></li>
<li class="nav-item"><h2 class="nav-font2">Story</h2></li>
</ul>
</div>
</nav>
I'm working on a project with bootstrap. I just included a sub menu in the pills navbar but it doesn't work. When I click on messages nothing happens
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Home</li>
<li role="presentation">Home</li>
<li class="dropdown" role="presentation">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">About</a>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li>Trash</li>
</ul>
</li>
<li role="presentation">Users</li>
<li role="presentation">Messages</li>
<li role="presentation">Contact</li>
</ul>
Any help with the script above. Thanks
See how data-toggle="dropdown" is in the anchor tag for About? It appears that you have the dropdown menu under About, not Messages.
Also, be sure to include the Bootstrap JavaScript. There should be a tag like <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> in the <head> section of your HTML. This is what enables the dropdown to work.
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>
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>
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>