Hi
I have one weird problem, and I hope you will have awesome solution as usual 
I’m the building offscreen navigation, and for pushing it I use transform: translate(x,y); .It works, all is sliding fine, but it should have a position: fixed; - this rule is set, but doesn’t work with transform one ?
Is that any kind of bug, or I’m doing something wrong.
You will have to show a (non)working example or the code. I don’t see any reason why it would not work, but without context it is impossible to tell.
Ahm sorry, I was in rush, bellow is the part of code, that’s needed.
It’s scss syntax, but nothing special, just mixins for translate and transition and few variables, I hope it’s not problem for you.
Also we are using Foundation, but I think It doesn’t matter.
<main role="main" id="main">
<header class="site-header header" role="header">
<div class="row expanded">
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="logo">
<img src="img/logo.png" alt=" Logo" width="90" height="43">
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>
<a href="#mobile-menu" class="menu-link">
<span class="fa fa-bars"></span>
</a>
</li>
</ul>
</div>
</div>
<!--Offscreen menu-->
<div class="offscreen-menu">
<div class="row">
<div class="logo left">
<img src="img/logo.png" alt="Logo" width="90" height="43">
</div>
<nav id="mobile-menu">
<a href="#mobile-menu" class="menu-link show-for-small-only">
<span class="fa fa-bars"></span>
</a>
<div class="row mobile-row">
<span class="fa fa-close close"></span>
</div>
<ul class="menu vertical">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="*">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</main>
#main {
position: relative;
@include transition-animation(0.15s,ease)
&.active-menu {
@include transform-translate(-25em,0px);
}
}
#mobile-menu {
position: fixed;
z-index: 7;
top: 0;
bottom: 0;
width: 25em;
right: -25em;
height: 100%;
background: $tertiary-color;
@include transform-translate(0px,0px);
@include transition-animation(0.15s,ease);
&.active-menu {
@include transform-translate(0px, 0px);
}
}
.close {
font-size: 1.8em !important;
float: right;
margin: 7px;
}
I’ve not worked with scss, but when I paste the code into Codepen, it’s flagging errors in the css.
First in complains about this line:-
@include transition-animation(0.15s,ease)
If I add the semicolon ; to the end, it then complains about: Undefined mixin 'transition-animation'.
bedakb,
Can you post your code in a “working page”? ie. starts with <!doctype>, ends with </html>, and contains the HTML and CSS and demonstrates the problem (so we can all see the same thing). Obviously, it should not contain raw SCSS. The browser can’t read and there is no reason to believe that we have access to an SCSS compiler, etc. I don’t, anyway. In fact, I don’t use Foundation, either. Maybe someone around here does, though. Either way, we can help you best if given a “working page” that demonstrates the issue written with plain CSS and HTML.
Here is the Codepen if it helps. I added SCSS and Foundation to it, though I have never used either.
If you click the ! in the css it shows the errors.
That’s because I load mixins from external files, I will put later a bit all non-compiled page.
Yes, a working page with normal (compiled) CSS should work nicely.
We will be looking for it.
Okay, pen is here, with pure CSS 
As you can see, the offscreen navbar is not fixed and that’s main issue.
Thanks.
Yes transforms kill fixed positioning I’m afraid even when applied to the parent of a fixed element..
You need to ensure that your fixed element has no parents with transforms applied and if you want to animate your fixed bar then use a margin transition rather than transform or translate (although they are not as smooth).
Fixed elements don’t need to be nested inside containers most of the time anyway so you can avoid the parent issue.
It’s a bit of pain a to workaround and was originally thought to be a bug but is actually part of the specs (although Firefox didn’t show this behaviour previously).
I’m away at the moment and can’t make a demo but you should be able to work something out if you follow the rules above.
Ok, so then the best solution is get navigation out of main element ?
I’d probably do it without the transform. Something like this.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css">
<style>
.custom-6 {
width: 50%;
float: left;
padding-left: 0.3125rem;
padding-right: 0.3125rem;
margin-top: 0.6em;
}
.custom-6:last-child:not(:first-child) {
float: right;
}
body {
background: #fff;
color: #000;
text-transform: uppercase;
}
a {
color: #000;
transition: all 0.5s ease-in-out;
}
a:hover {
color: #333;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
section {
padding: 2em;
margin-top: 3em;
}
.row {
max-width: 100em;
}
.top-bar {
position: fixed;
z-index: 8;
width: 100%;
transition: all 0.4s ease-in-out;
background: #000;
padding: 2.5em 4.5em;
}
.top-bar .menu {
background: #fff;
}
.top-bar .menu a {
text-transform: uppercase;
}
.top-bar .menu .fa {
font-size: 1.5em;
}
.logo {
padding-right: 2em;
}
.home-item {
position: relative;
overflow: hidden;
}
.home-item img {
transition: all 0.5s ease-in-out;
width: 100%;
}
.home-item:hover img {
-webkit-transform: scale(1.02);
-ms-transform: scale(1.02);
transform: scale(1.02);
opacity: 0.8;
}
.overlay {
z-index: 3;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all 0.5s ease-in-out;
}
.light {
color: #fff;
}
.footer {
background: #f6f6f6;
padding: 2.5em 2.5em 3.7em 2.5em;
font-size: 0.9em;
}
.footer .disc {
list-style: none;
margin: 0;
padding-top: 1em;
}
.scrolled {
padding-top: 1.5em;
padding-bottom: 1.5em;
z-index: 6;
}
#mobile-menu, #offscreen-tools-wrap {
position: fixed;
padding: 3em;
z-index: 7;
top: 0;
bottom: 0;
width: 25em;
right: -25em;
height: 100%;
background: #f6f6f6;
transition: 0.15s ease;
}
#mobile-menu.active-menu, .active-menu#offscreen-tools-wrap {
/*-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);*/
right:0;
}
#main {
position: relative;
transition: 0.15s ease;
right:0;
}
#main.active-menu {
/*
-webkit-transform: translate(-25em, 0px);
-ms-transform: translate(-25em, 0px);
transform: translate(-25em, 0px);*/
right:25em
}
.close {
font-size: 1.8em !important;
float: right;
margin: 7px;
}
@media screen and (max-width: 39.9375em) {
.top-bar {
display: none;
}
.offscreen-menu {
padding: 1em;
display: block;
}
#mobile-menu, #offscreen-tools-wrap {
position: fixed;
z-index: 4;
top: 0;
bottom: 0;
width: 100%;
right: -100%;
height: 100%;
background: #f6f6f6;
opacity: 0.98;
/*-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);*/
transition: 0.15s ease;
}
#mobile-menu.active-menu, .active-menu#offscreen-tools-wrap {
/*-webkit-transform: translate(-100%, 0px);
-ms-transform: translate(-100%, 0px);
transform: translate(-100%, 0px);*/
right:0;
}
.menu-link {
position: absolute;
top: 22px;
left: -50px;
}
.menu-link .fa {
font-size: 1.8em;
}
.mobile-row {
padding: 1em;
}
.close {
font-size: 1.8em !important;
float: right;
margin: 7px;
}
.custom-6 {
width: 100%;
float: left;
padding-left: 0.625rem;
padding-right: 0.625rem;
}
}
@media screen and (max-width: 39.9375em) and (min-width: 40em) {
.custom-6 {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
}
@media screen and (max-width: 39.9375em) {
.custom-6:last-child:not(:first-child) {
float: right;
}
}
</style>
</head>
<body>
<main role="main" id="main">
<header class="site-header header" role="header">
<div class="row expanded">
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="logo"> <a href="#">Logo</a> </li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li> <a href="#mobile-menu" class="menu-link"> <span class="fa fa-bars"></span> </a> </li>
</ul>
</div>
</div>
<div class="offscreen-menu">
<div class="row">
<div class="logo left"> <a href="#">Logo</a> </div>
<nav id="mobile-menu"> <a href="#mobile-menu" class="menu-link show-for-small-only"> <span class="fa fa-bars"></span> </a>
<div class="row mobile-row"> <span class="fa fa-close close"></span> </div>
<ul class="menu vertical">
<li> <a href="#">Link 1</a> </li>
<li> <a href="*">Link 2</a> </li>
<li> <a href="#">Link 3</a> </li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section class="section-main">
<div class="row">
<div class="large-12 column">
<div class="home-item"> <a href="#">
<div class="overlay light text-center">
<h2>What's next to do ?</h2>
<span>Foobar</span> </div>
<img src="http://placehold.it/1500x750" alt=""> </a> </div>
</div>
</div>
</section>
<footer class="footer" role="footer">
<div class="row expanded">
<div class="large-6 column">
<div class="row">
<div class="large-3 column">
<div class="footer-widget">
<h6>Contact</h6>
<ul class="disc">
<li> <a href="">Test one</a> </li>
<li> <a href="">Test two</a> </li>
<li> <a href="">Test three</a> </li>
</ul>
</div>
</div>
<div class="large-3 column">
<div class="footer-widget">
<h6>Company</h6>
<ul class="disc">
<li> <a href="">About</a> </li>
<li> <a href="">Jobs</a> </li>
</ul>
</div>
</div>
<div class="large-3 column">
<div class="footer-widget">
<h6>Social Media</h6>
<ul class="disc">
<li> <a href="">Instagram</a> </li>
<li> <a href="">Facebook</a> </li>
<li> <a href="">Twitter</a> </li>
</ul>
</div>
</div>
<div class="large-3 column">
<div class="footer-widget">
<h6>Newsletter</h6>
<ul class="disc">
<li> <a href="">Subscribe</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
jQuery( function( $ ) {
// Offscreen navigation
$('.menu-link').click(function(){
$('#mobile-menu,#main').toggleClass('active-menu');
$('.close').click(function() {
$('.active-menu').removeClass();
});
});
$('.offscreen-toggle').click(function(e) {
e.preventDefault();
$('#offscreen-tools-wrap').toggleClass('active-menu');
});
// Sticky top bar
var $window = $( window ),
$document = $( document ),
$nav = $( '.top-bar' );
$window.on( 'load scroll', function() {
var scrolled = $document.scrollTop();
if ( scrolled > 50 ) {
$nav.addClass( 'scrolled' );
} else {
$nav.removeClass( 'scrolled' );
}
});
});
</script>
</body>
</html>
Thanks Paul, It works
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.