For testing, I cloned a site that I built with Foundation 6.3.1 to another folder where I have 6.4.3 installed. Everything seems to display properly, I'm using the float mode.
Anyway, in 6.3.1 I used a couple of classes to style my topbar: expanded and menu-centered.
I was reading in the docs, from what I understand, you have to include #menu-expand; and #menu-align;.
Anyway, I tried this and 6.4.3 still just blows out my topbar.
I've posted 2 links here, both have the same HTML and CSS code for comparison.
See this version first - be sure to shrink your browser until you see the mobile menu and click it as well.
Foundation 6.3.1 Version on CodePen (works fine)
<!-- html -->
<div class="row top-row-wrapper">
<div class="top-bar menu-centered"> <!-- menu-centered -->
<div class="title-bar" data-responsive-toggle="my-menu" data-hide-for="medium">
<button class="menu-icon center" type="button" data-toggle="my-menu" data-responsive-toggle="my-menu"></button>
<div class="title-bar-title menu-left">MENU</div>
</div>
</div>
<div class="top-bar" id="my-menu">
<div class="top-bar-right">
<ul class="menu expanded menu-centered" data-responsive-menu="drilldown medium-dropdown">
<li><a class="home-link" href="/">HOME</a></li>
<li>SIRES</li>
<li>DONORS</li>
<li>BULLS</li>
<li>HEIFERS</li>
<li>BULL CARE</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
/*SCSS*/
$menu-margin: 0rem;
$menu-margin-nested: 1rem;
$menu-item-padding: 1rem;
$menu-icon-spacing: 1.25rem;
$topbar-padding: 0;
$topbar-title-spacing: 0rem 1rem 0rem 0;
$topbar-input-width: 200px;
$topbar-unstack-breakpoint: medium;
.top-bar ul.menu li {
padding-left:.5em;
padding-right:.5em;
}
.top-bar ul.menu li a {
border:1px solid blue;
}
.top-bar-right ul.menu li {
white-space:nowrap;
}
Foundation 6.4.3 Version on CodePen (same code, but notice expanded and menu-centered fail to work and the mobile menu goes bonkers). How to make the 6.4.3 version functional like the 6.3.1 version?
On a side note: I love testing out little snippets on Codepen, however, I can't figure out if it is possible to add / modify the app.scss that it uses in order to add do things like comment out includes (such as foundation-flex-grid / or add includes such as #include menu-expand;.
Related
When designing a webpage using Zurb Foundation 6, top-bar-left and top-bar-right of the navigation menu stack when put into a wrap class, even when scaled to full screen. The top-bar-right ends up being just below and indented from top-bar-left. How do I fix this issue so that the top-bar-right section stays in line with top-bar-left and is not stacked?
The top-bar-right section works fine when the wrap class is not applied to a div within the nav class. I've tried only applying the wrap class to top-bar-left only instead of the entire nav class, and also tried a "float: right" for top-bar-right in CSS, but neither method solved the problem.
HTML code:
<!-- DESKTOP NAVIGATION -->
<nav class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
And the CSS:
/*GENERAL*/
.wrap {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
There are attributes on top-bar that are making its dependents display inline and stack for narrow displays (display: flex for one). You could apply all the appropriate attributes to the wrap class as well but why reinvent the wheel? Doesn't that negate the whole reason for using a grid system in the first place? Try removing the extra div and put the wrap class on the nav element instead:
<nav class="top-bar wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
Or to simplify things, you could just put those attributes on .top-bar and not have a wrap class:
.top-bar {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
If you need a wrapper div, put it outside top-bar, not inside.
I'm building a website for a friend's film production company using Foundation 6. I created a top-bar navigation bar with his logo image above the top-bar and made them both sticky. It seems to work fine on large screens and small screens but if viewed on anything in between the logo separates from the top-bar. This is most evident when you stretch and squish the page.
I've tried to include the image in the top-bar div but it aligns it to the left and I haven't been able to align it to the top as it is currently. This is the first time I've worked with the sticky function in Foundation. I've looked through the Foundation docs, Google, and StackOverflow but haven't found anything quite like this.
This is my top-bar section.
<div data-sticky-container>
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="grid-y">
<img src="images/safe_image.jpeg" style="width: 100%; height: auto"; data-sticky data-options="marginTop:0;">
<div class="top-bar" data-sticky data-options="marginTop:10.2;" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu">
<!-- <div class="top-bar" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu"> -->
<div class="top-bar-right" data-dropdown-menu style="display: table; margin: 0 auto;">
<ul class="dropdown vertical medium-horizontal menu" style="background-color: white;">
<li>Home</li>
<li>Current News</li>
<li>Film/Media</li>
<li>Photography</li>
<li>Publicity</li>
<li>Misc</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
I would like the logo image and the navigation bar to look the way they do at larger screen sizes but minimize together to the point where the data-toggle kicks in instead of separating, as they are doing currently.
For the longest time, the Foundation Sticky plugin was working as expected, sticking as the page scroll met the top of the sidebar. Now, suddenly, it's broken:
https://www.arcresources.com/about-arc/board-of-directors/member-bios
It jumps once, and the classes are changed, indicating the plugin is firing and adding the top margin, but after that, nothing.
I've tried commenting out all other JS, and relevant CSS to see if something was interfering, but the same problem persists.
Adding width: 100% and position: fixed to the data-sticky div produces the right results, but this is the code the Sticky plugin should be adding and removing based on my top and bottom anchors.
Sidebar code:
<div class="grid-container sidebar-nav-wrapper {{ firstSegment }}">
<div class="grid-x grid-margin-x">
<nav data-sticky-container class="show-for-large large-3 large-offset-9 cell sidebar-nav">
<div data-sticky data-top-anchor="main" data-btm-anchor="main:bottom" data-sticky-on="large" data-margin-top="6">
<!-- Sidebar content -->
</div>
</nav>
</div>
</div>
I'm currently using Cycle2 with scrollHorz on full screen (100% width and height) with background images with their size to 'cover', besides that there are no callbacks or much else on the page so its a very basic slider.
I find that when the browser is too big, the slide transition appears jagged, not smooth. However its somewhat better when the screen is smaller. I also do not experience any issues with 'fade', or at least its not noticeable at all.
I have tried with various combination of easing and speed, but haven't had much luck.
I'm not sure if its a css thing or a cycle2 thing, and I'm unable to find a similar issue via google, can someone please shed some light to this?
HTML
<ul id="homepage-carousel" class="hero">
<li class="homepage-carousel-item" style="background-image: url('hero1.jpg');">
<div class="homepage-carousel-info">
<h1 class="homepage-carousel-title">Title</h1>
<h2 class="homepage-carousel-subtitle">Subtitle</h2>
<div class="homepage-carousel-desc">
<p>some info here</p>
</div>
<div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div>
</div>
</li>
<li class="homepage-carousel-item" style="background-image: url('hero2.jpg');">
<div class="homepage-carousel-info">
<h1 class="homepage-carousel-title">Title</h1>
<h2 class="homepage-carousel-subtitle">Subtitle</h2>
<div class="homepage-carousel-desc">
<p>some info here</p>
</div>
<div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div>
</div>
</li>
<li class="homepage-carousel-item" style="background-image: url('hero3.jpg');">
<div class="homepage-carousel-info">
<h1 class="homepage-carousel-title">Title</h1>
<h2 class="homepage-carousel-subtitle">Subtitle</h2>
<div class="homepage-carousel-desc">
<p>some info here</p>
</div>
<div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div>
</div>
</li>
</ul>
CSS
#homepage-carousel {
width: 100%;
height: 100%;
.homepage-carousel-item {
height: 100%;
background-repeat: none;
background-position: top center;
background-size: cover;
}
}
This isn't a cycle issue
background-size: cover just has horrible performance.
You can ease the pain some by adding transform: translate3d(0,0,0) to the slides as well, but it will still be choppy.
Replacing the background with an actual image normally increases the performance for me, like this fiddle. Though, the larger the image is the slower the performance will be in any browser; rendering large moving images is hard for them.
Then it's just a matter of sizing and positioning the images, for that you could use something like:
.homepage-carousel-item > img, .homepage-carousel-info { position:absolute; }
.homepage-carousel-item > img {
/*img size*/
min-width:100%;
min-height:100%;
width:auto;
height:auto;
/*img pos*/
top:50%;
left:50%;
transform:translate(-50%,-50%);/*offset position based on img size*/
}
If you need to support legacy browsers, then you would run a routine through the images to size and offset like this does.
There are other solutions that only work in certain browsers (like object-fit: cover), but these options should work in all browsers.
I'm using Zurb Foundation and have the following html:
<div class="section-container auto" data-section>
<section>
<p class="title" data-section-title>Tab 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Tab 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
Is it posible to disable second tab? Tab button should be visble, but not clickable.
You could add some CSS to disable it.
.disabled {
pointer-events: none;
cursor: default;
}
Edit
With respect to Dolondro's comment and pointer events not working in IE, see css 'pointer-events' property alternative for IE
slightly dirty hack, but it will work everywhere (don't forget to add class 'disabled' to the tag)
$("[data-tabs] > li.disabled a").bind("click", function(e)
{
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
});
You can set a custom link class to only consider enabled tabs via data-link-class and then use the specified class only the enabled tabs.
<ul class="tabs" data-tabs data-link-class="enabled" id="disabled-tabs">
<li class="enabled"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
</ul>
By default, foundation uses tabs-title for the link class, but you can override it. In this example, I'm using enabled to only target enabled tabs. Foundation will ignore the tabs without the enabled class.
You'll probably also want to disable pointer events on the disabled tabs so that the user doesn't think they can interact with the disabled tab.
.tabs li:not(.enabled) a {
pointer-events: none;
}