I am wanting a topbar that is hover for non-touch devices and click for touch devices.
I have achieved this by doing it this way:
<nav class="top-bar show-for-touch" data-topbar role="navigation" data-options="is_hover: false">
<!-- menu -->
</nav>
<nav class="top-bar hide-for-touch" data-topbar role="navigation" data-options="is_hover: true">
<!-- menu -->
</nav>
However there must be a cleaner way of doing it without repeating the entire menu twice, I have searched the documentation and online and have not found anything.
CSS
:hover
will work as hover on non touch devices and still work as click or tap on touch devices...If iam not mistaken
Related
If I break down a navigation menu (navbar) into components such as this:
<div class="navbar">
<app-navbar-brand></app-navbar-brand>
<app-navbar-menu></app-navbar-menu>
</div>
or:
<div class="navbar">
<div class="navbar-brand">
<!-- navbar-items -->
</div>
<div class="navbar-menu">
<div class="navbar-start">
<!-- angular components -->
</div>
<div class="navbar-end">
<!-- angular components -->
</div>
</div>
Some padding and other properties seem to work incorrectly in the menu.
If I keep the entire navbar in one component, I don't see this problem.
Any idea what I'm doing wrong in Angular? Or is there something i've missed? It looks like the SASS is loaded in a weird way, but I cannot figure out why this is.
I ran into the same issue when using Bulma with Angular. The problem is because Bulma is built entirely using Flexbox. Angular component generated (pseudo) HTML tags, which are not using flexbox. I tried adjusting the component CSS style (i.e display, and width properties) seem to help, but not perfect. Hope that helps.
I am creating a site with foundation 5. I have a page in which I would like a secondary navigation bar to scroll with the page until it reaches the bottom of the primary navigation, then snap into place and 'stick' while the user scrolls, effectively adding 'fixed' to the top-bar when it reaches that point. This functionality is described AND demonstrated exactly in the foundation documentation in the sticky top-bar section (see following link).
http://foundation.zurb.com/docs/components/topbar.html
PROBLEM: I am unable to implement this behavior in my site, even if I copy and paste the sticky top-bar code directly from the working example in the above link. All other elements of top-bar are functioning and the console shows no errors. I have demonstrated the issue in a plunkr:
http://embed.plnkr.co/cRdYV5tobUZsd6q2NQxT/preview
please help me understand the issue. Thank you in advance.
Specifications:
Foundation version: 5.5.0
jQuery: 2.1.0
//TOP-BAR CODE, SAME CODE AS IN PLUNKR
<div class="large-12 columns">
<div class="sticky">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Sticky Top Bar</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="divider hide-for-small"></li>
<li>Main Item 1</li>
</ul>
</section>
</nav>
</div>
</div>
UPDATE
Updated plunkr with proper links: http://plnkr.co/edit/8OPKh2sbSn6iq5aN6HF0
My issue was where I was calling
$(document).foundation()
as this is an Angular application, I ended up calling it in
app.run
which worked.
Add this script at the bottom of your page ;)
<script>
$(document).foundation();
</script>
There is a problem with your plunkr site. When the page is loaded the top-bar.js file is not loaded, so this example will never work.
The browser console shows the error - Failed to load resource: the server responded with a status of 404 (Not Found) http://run.plnkr.co/plunks/cRdYV5tobUZsd6q2NQxT/top-bar.js
You need to update the link to ensure the top-bar.js file is loaded.
The foundation website says Just add foundation.topbar.js AFTER the
foundation.js file. Your markup should look something like this:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
Few stuff to corrected
make sure tag or the div that wrap your navigation is direct child
of body tag (this important)!
make sure the direct parent; (body) has no overflow property on it
The rest is normal
if you are using bootsrap 4 :-add sticky-top as usual or you can use
separate javascript tooo will work !!
I have developed a site using wordpress and bootstrap 3 framework. My issue is when its uses the mobile collapse menu it doesn't display after I click the icon.
Been trying to debug a while now but no luck yet.
Site is question is
http://www.reillyscott.com.au/
thanks in advance
<div class="collapse navbar-collapse navbar-responsive-collapse">
Find this div and remove "collapse" class. Its not needed and its causing the issue.
Edit: Actually that div is not need it at all. You can move its innerHtml out of it and delete it.
It's because your JS is not changing the state of the menu to display block, maintaining the display:none;
The menu is being hidden in the bootstrap.css, line 3045.
You should be toggling the menu when a certain resolution comes, making one display:none and the other display:block.
To implement Bootstrap menus in Wordpress, I recommend you to use WP Bootstrap Nav Walker.
Took me a while to figure out your problem. Instead of going into too much detail, I'll just tell you what to delete, and it will work!
<div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse in" style="height: auto;">
<!--
The WordPress Menu goes here
-->
<div class="collapse navbar-collapse navbar-responsive-collapse"> **<--- DELETE THIS DIV**
<ul id="main-menu" class="nav navbar-nav navbar-right"></ul>
You already have a navbar-collapse in your first div. You're using it twice and throwing off the JavaScript. Only delete the opening and closing div. Keep your wordpress menu php code there.
Message me if you have further questions.
Cheers,
I am using bootstrap to build my site and the main navigation uses dropdowns for second level choices.
In IE10 only (works everywhere else), the dropdown menu is inconsistently accessible and if you are able to access the second level choices, they disappear after hovering off of them. In other words as you hover down the list of menu items, the one above will disappear when you hover onto the menu item below it. Perhaps there are two problems: one being you can't access the dropdown (maybe a padding issue?) but the disappearing problem, I have never seen before.
Here's my fiddle with the problem
(**When viewing the fiddle make sure to adjust the width of the Result panel otherwise it will be collapsed for mobile)
My html is pretty simple:
<div class="container">
<div class="row">
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-collapse collapse"><!--NAVIGATION-->
<ul class='nav navbar-nav'>
<li class='first'>Getting Around
<ul>
<li>Find Your Ride</li>
<li>Transit Overview</li>
<li>Carpool/Vanpool</li>
<li>Biking & Walking</li>
</ul>
</li>
<li>Travel Training
<ul>
<li>Do It Yourself</li>
<li>Transit Orientation</li>
<li>Transit Ambassadors</li>
<li>Schedule a Training</li>
</ul>
</li>
<li>Senior Safe Driving</li>
<li>Programs & Services
<ul>
<li>Mobility Programs & Services Locator</li>
<li>Mobility Programs Overview</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Thank you in advance! I am stumped.
A variety of issues at work here, but I seem to have solved it. IE10 doesn't play well with display:none and once I replaced with visability: hidden on my navbar>li>ul, things seemed much better.
Also, can't confirm but since bootstrap adds a background color of transparent to its a tags, I think the background color of the list items we're going transparent. Adding a background color, adjusting the line-height seem to fix.
link to fiddle in original now works correctly in IE10.
Using Zurb Foundation, how can I change the default drop-down on hover for the top navigation menu to bind to the click event instead?
In the JavaScript console, I can trigger the event manually, using:
$('.dropdown').click();
How can this be applied as a default override in Foundation?
The Top Bar can be changed to a click event by adding a simple data-options="is_hover:false" to the <nav> element. You may need to upgrade to the latest version to have access to this feature (version 4.3.2 as of September 30, 2013).
<nav class="top-bar" data-options="is_hover:false">
<ul class="title-area">
<li class="name">
<h1>Top Bar Title </h1>
</li>
...
</ul>
</nav>