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>
Related
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 have a simple one page site. Im using the "top-bar" wrapped in a "fixed" div, which works fine on every size but mobile. On mobile the nav is in fact fixed until the menu icon is clicked/tapped. then it opens the menu at the top of the page and nav is no longer fixed.
Here is my code:
<div class="fixed">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
Page Title
</h1>
</li>
<li class="toggle-topbar menu-icon"></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>Process</li>
<li class="divider"></li>
<li>Bookshelf</li>
<li class="divider"></li>
<li>Brands</li>
<li class="divider"></li>
<li>Looking for</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
Thanks in advance.
I am currently working with foundation 5 and ultimately trying to make my page mobile friendly. I have a top navigation bar that I have created for the page following some of the basic structures. The navigation bar has problems being responsive. It does not display a menu at a all when I resize smaller the screen. How can I get the navigation bar to be responsive?
HTML:
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon">
<span>Title</span>
</a>
</nav>
<nav class="top-bar docs-bar hide-for-small" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
Title
</h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown not-click">
<a class="" href="#">Test</a>
<ul class="dropdown">
<li>
SubTest
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown not-click">
<a class="" href="#">Test2</a>
<ul class="dropdown">
<li>
SubTest2
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown not-click">
<a class="" href="#">Test3</a>
<ul class="dropdown">
<li>
SubTest3
</li>
</ul>
</li>
</ul>
</section>
</nav>
You have given it the class .hide-for-small for the main one which holds all of the dropdowns.
Then the one that is viewable by mobile, you have no data inside of it.
Add the <a class="left-off-canvas-toggle menu-icon">
<span>Title</span>
</a> to the other nav.
Refer to this page here to get a proper responsive topbar.
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.
Right I have seen the following information on this topic so do understand more about is here is what I have read so far:
Removing/adding link class onclick
Changing an element's ID with jQuery
and I have read the obvious jquery UI page but I can't find the way to add the onclick so that it changes the "parent" element to class="active"
<!--navbar-->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="#" >Relution.co.uk</a></h1>
</li>
<li class="toggle-topbar menu-icon">
<span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left hide-for-medium-up">
<li class="has-form">Click Here to login</li>
<li class="has-form">Not a member? Register for free</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="active">Home</li>
<li class="divider"></li>
<li>About</li>
<li class="divider"></li>
<li>Services</li>
<li class="divider"></li>
<li>Portfolio</li>
<li class="divider"></li>
<li>Contact</li>
<li class="divider"></li>
<li class="has-dropdown hide-for-small">
</i>
<ul class="dropdown">
<li><i class="foundicon-search"></i> Search</li>
</ul>
</li>
<li class="has-form hide-for-medium-up">
<form>
<div class="row collapse">
<div class="small-8 columns">
<input type="text">
</div>
<div class="small-4 columns">
Search
</div>
</div>
</form>
</li>
</ul>
</section>
</nav>
<!--/navbar-->
Below is the code that I'm using to target the links for an onlick even when I do this I want the parent li to become acive and all others to not be active
<script>
$(document).ready(function() {
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(){
http://jsfiddle.net/n5CLu/
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(e){
e.preventDefault();
$(this).parent().addClass('active').siblings().removeClass('active');
});