Here's my site:http://vani.valse.com.my/schone_lightings/index.php.
When I use offcanvas menu for mobile version , any links on the page become unclickable. I thought it's something to do with z-index but it doesn't change anything. Can anyone tell me why this happens and how to fix it plz?
My css
.off-canvas-fixed {
-webkit-transition: -webkit-transform 500ms ease;
transition: transform 500ms ease;
height:100%;
}
.move-right > .off-canvas-fixed {
-webkit-transform: translate3d(15.625rem, 0, 0);
transform: translate3d(15.625rem, 0, 0);
height:100%;
}
.left-off-canvas-menu {
-webkit-transform: none;
transform: none;
margin-left: -15.625rem;
height: 100%;
}
.main-section {
padding:45px 0 0;
}
.tab-bar {
width:100%;
}
#media only screen and (orientation:landscape) and (max-width: 64em){
.main-section {
padding:0 0 0 2.8125rem;
}
.off-canvas-fixed {
width:2.8125rem;
height:100%;
background:#333333;
}
section.left-small{
border:none;
box-shadow:none;
}
}
/*remove opacity for mobile*/
#media all and (max-width : 40em)
{
.row { opacity : 1; }
.cart,.search,.myModal,.reveal-modal {margin-top:50px;}
}
My HTML
<!-- Off Canvas Nav ----------------------------------------------------------------------------------------------------->
<div class="off-canvas-wrap">
<div class="fixed off-canvas-fixed hide-for-large-up"> <a class="exit-off-canvas"></a>
<nav class="tab-bar">
<section class="left-small"> <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="show-for-portrait right tab-bar-section">
<h1 class="title">Logo</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li class="show-for-small">
</li>
<li>home</li>
<li>product</li>
<li>help</li>
<li>contact</li>
<li>login/sign up</li>
</ul>
</aside>
</div>
<div class="inner-wrap"> <a class="exit-off-canvas"></a>
</div>
</div>
EDITED:
I removed opacity control for mobile then the links are working except for the search link at the very top. However I need to remove opacity and make all links working.
/*remove opacity for mobile*/
#media all and (max-width : 40em)
{
/* .row { opacity : 1; } */
.cart,.search,.myModal,.reveal-modal {margin-top:50px;}
}
.off-canvas-fixed class has height:100%; it covered your webpage.
Related
I'm searching a way to make an css effect but with exception of not applying the effect to the letters and the buttons (Only to the image), so I need create a rule in css. I can't change the order of the things.
With my code, I get something like this.
This is my code, like you can see I applied some effect in css and this is getting applied to all. I only need it for the image.
.myimage01 {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.myimage01:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
<li id="armonioso-text-2" class="widget widget_armonioso_text">
<div class="armonioso-textwidget-wrapper armonioso-textwidget-no-paddings">
<!-- Here I'm currently Applying the efect -->
<div class="armonioso-textwidget myimage01" data-style="background-image: url(http:www.myurl.com/image.jpg);padding: 40px 30px ;color: #ffffff;text-align: center;">
<h5>hello world</h5>
<h3>Here how works</h3>
<p>Take a look of new things
<p><a class="btn alt" href="about/index.html" target="_self">About me</a>
</div>
</div>
<!-- Here I'm currently Applying the efect -->
</li>
When I apply the effect apply the effect to the letters (h5, h3, p and the button with btn class)
I don't want the effect for them, only for the background-image.
How can I do?
for transition backgrounds use the property background-size, and use background-position to adjust as fits you better
body {
margin: 0
}
.myimage01 {
background-size: 100%;
background-position:center center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
background-image: url(http://lorempixel.com/1600/900);
padding: 40px 30px;
color: #ffffff;
text-align: center;
}
.myimage01:hover {
background-size: 130%;
}
<li id="armonioso-text-2" class="widget widget_armonioso_text">
<div class="armonioso-textwidget-wrapper armonioso-textwidget-no-paddings">
<!-- Here I'm currently Applying the efect -->
<div class="armonioso-textwidget myimage01">
<h5>hello world</h5>
<h3>Here how works</h3>
<p>Take a look of new things
<p><a class="btn alt" href="about/index.html" target="_self">About me</a>
</div>
</div>
<!-- Here I'm currently Applying the efect -->
</li>
Use background-size for transition:
div {
background-image: url(http://lorempixel.com/400/200/sports/1/);
background-size: 100%;
background-repeat:no-repeat;
background-position:50% 50%;
width:400px;
height:200px;
transition: background-size 200ms linear;
text-align:center;
line-height:200px;
}
div:hover {
background-size: 120%;
}
<div>
Some text
</div>
try to transform the background-size property instead of scaling the whole container.
You can apply transform on background-size, background-position to get the effect on the background image.
.myimage01 {
background-size:100%;
background-position:0px 0px;
-webkit-transform: all;
transform: all;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.myimage01:hover {
background-size:140%;
background-position:-50px -50px;
-webkit-transform: all;
transform: all;
}
<li id="armonioso-text-2" class="widget widget_armonioso_text">
<div class="armonioso-textwidget-wrapper armonioso-textwidget-no-paddings">
<!-- Here I'm currently Applying the efect -->
<div class="armonioso-textwidget myimage01" style="background-image: url(http://dummyimage.com/600x200/000/fff);padding: 40px 30px ;color: #ffffff;text-align: center;">
<h5>hello world</h5>
<h3>Here how works</h3>
<p>Take a look of new things
<p><a class="btn alt" href="about/index.html" target="_self">About me</a>
</div>
</div>
<!-- Here I'm currently Applying the efect -->
</li>
I have designed the site and when I resize the browser window or use the tools Firefox provides for responsiveness, I don't see navigation bar breaking and I don't own a tablet but a few friends do and they say the navigation bar is not showing up correctly.
I don't understand what I am doing wrong!
This is the site
Edited:
The navigation bar li item should be floating right. Apple users say that when they open the site, it opens fine. But once they scroll down and back up, the li items do not line up on the right but come in between.
I think #khilley made a particularly valid point about using standard Bootstrap markup and built-in javascript components. Here's some reasons why:
Your current approach uses duplicative markup (for your menu). It's not DRY or accessible and it requires more effort to maintain.
If you don't need to write your own javascript, you save time in development and testing, and a couple of download bytes for your users.
Twitter Bootstrap is used on millions of websites, so it gets field tested by millions of people on millions of different device/OS/resolution combinations everyday around the world. When you use the standard markup and javascript component plugins, you get the benefit of knowing it's just going to work.
More to the point, you can easily reproduce all of the behaviors of your navigation, with just some styling, including using the built-in affix markup to handle the change in your navbar. Pretty sweet!
DEMO
There were only a few changes made to your markup and css to accomplish this. You can eliminate all of your custom javascript now except for the one click handler that you use for scrolling to your different sections.
Replace all of your navigation styles and markup with the following:
HTML:
<nav class="navbar nav-custom navbar-fixed-top" data-spy="affix" data-offset-top="80" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-th-list"></span>
</button>
<span class="rc">RC</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li>
Design
</li>
<li>
Develop
</li>
<li>
Contact
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.nav-custom {
width: 100%;
height: 80px;
z-index: 999;
padding: 25px;
background-color: #f87f73;
border-bottom: 1px solid rgba(0, 0, 0, 0.18);
font-size: 150%;
color: #fff;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.nav-custom.affix {
width: 100%;
background-color: rgba(255, 255, 255, 1);
color: #f87f73;
height: 60px;
padding: 14px;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.nav-custom .rc {
background-color: #fff;
color: #f87f73;
padding: 5px;
border-radius: 50% 0% 50% 0%;
float: none;
}
.nav-custom.affix .rc {
background-color: #f87f73;
color: #fff;
}
.nav-custom.affix .navbar-collapse {
top: 60px;
}
.nav>li>a:hover, .nav>li>a:focus {
background-color: transparent;
}
button{
outline: none;
}
.navbar-toggle {
padding: 0;
margin: 0;
}
#media (min-width: 768px) {
.nav-custom a::before,
.nav-custom a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.nav-custom a::before {
margin-right: 10px;
content: '[';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.nav-custom a::after {
margin-left: 10px;
content: ']';
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.nav-custom a:hover::before,
.nav-custom a:hover::after,
.nav-custom a:focus::before,
.nav-custom a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}
.nav-custom a:link, .nav-custom a:visited, .nav-custom a:hover, .nav-custom a:active {
text-decoration: none;
color: #fff;
outline: none;
}
.nav-custom.affix a:link, .nav-custom.affix a:visited, .nav-custom.affix a:hover, .nav-custom.affix a:active {
text-decoration: none;
color: #f87f73;
outline: none;
}
}
#media (max-width: 767px) {
.navbar-collapse {
width: 250px;
position: fixed;
right: -250px;
top: 80px;
overflow-x: hidden;
background-color: rgba(255, 255, 255, 0.8);
border-top: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.navbar-collapse.in {
right: 0px;
width: 250px;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.navbar-collapse.collapsing {
height: auto !important;
}
.navbar-nav {
margin: 0 -15px;
}
.navbar-nav>li>a {
padding: 0;
line-height: 3em;
text-align: center;
}
.navbar-collapse ul {
border-left: 1px solid rgba(0, 0, 0, .18);
}
.navbar-collapse ul li {
border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.navbar-collapse ul li:hover {
background-color: #f87f73;
color: #fff;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.navbar-collapse ul a:link,
.navbar-collapse ul a:visited {
color: #f87f73;
}
.navbar ul a:hover {
text-decoration: none;
color: #fff;
}
}
How it works:
The navbar-fixed-top class is used instead of custom styles.
Instead of writing your own javascript to handle changing your navbar when you scroll, you can use Bootstrap Affix. This built-in javascript plugin can use the data-offset-top attribute to set the point at which the affix class is automatically appended to the element where the data-spy attribute is set. Using the data attributes, you don't need a single line of javascript, just add the styles for how you want your element to look once the affix class is applied. Now all of your styles are in your CSS and none need to be in your javascript.
Use the built in navbar-toggle, which uses the built in Bootstrap Collapse plugin to transition to and from the mobile navigation. This eliminates the need to write/test/maintain your own javascript and eliminates the duplicative markup you have for the menu. The collapse plugin applies the in class to the element with the collapse class when the menu is expanded, so you can just use this for styling your menu.
Use media queries to change the layout of the menu based on the viewport size. The "mobile" menu is only displayed at viewports less that 767px, so you can easily target how you want the mobile menu to be styled.
Overall, the CSS is virtually identical to your CSS, I just changed the selectors to reflect the changes in the markup. Aside from a few minor tweaks, it was pretty much cut and pasted from your site.
When the page opens your nav is insisde the HTML block
<div class="row nav-custom nav-custom"> ... </div>
And on scrolling the nav is inside the block
<div class="row nav-custom nav-custom-2"> ... </div>
In your stylesheet http://rohanchhabra.in/css/custom.css you have padding:25px; and padding:14px; for .nav-custom and .nav-custom-2 which breaks the Bootstrap grid because there isn't enough width to place your col-sm-3 and col-sm-9 columns without breaking the row into two lines.
You could either remove or edit the padding for these 2 classes so that you aren't adding any extra horizontal space e.g.
.nav-custom{
padding-top:15px;
padding-bottom:15px;
}
or place the nav-custom class inside your col class, e.g.
<div class="row">
<div class="col-xs-3 col-sm-3">
<div class="nav-custom"> ... </div>
</div>
...
</div>
The key thing here is that you never want to had horizontal padding to any of the bootstrap row or column elements or you risk breaking the Bootstrap grid
Good luck!
It's possible you've hit upon a Safari web browser bug, since this issue seems to only get recreated on Macs. I can recreate the issue on OSX 10.8, running Safari 6.1. A browser refresh, or clicking on any of the nav values clears the issue and resets the nav display to the desired position. You could look into filing a bug for this potential Safari display issue.
That being said, my suggestion to resolve this issue is to refactor your HTML to better leverage the core Bootstrap navigation components. Currently you've got the navigation split in different div containers, and have it separate for wide screen and mobile. A more standard Bootstrap navigation element would look like:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Static navbar -->
<nav class="navbar navbar-custom navbar-inverse navbar-fixed-top" role="navigation">
<div class="container" id="nav-container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href=""><img src="" class="Logo" alt="Rohan Chhabra Designer and Developer"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Design</li>
<li>Develop</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- End Static navbar -->
You'll of course need to add some amount of custom.css styling to this code example, and it assumes your logo is an image (so rework that accordingly), BUT I think that by using this more 'standard' navigation implementation of Bootstrap navigation you'll be in better shape in the long run. I've tested out Boostrap websites using this style navigation and they do not have the Safari display issue seen in your example.
I have validate your site with w3c validator.
There is some critical issues found need to be correct.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I recommend this line should come with IE conditional comments like below line.
<!-- [if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
And Anchor tag is not allowed as child of element ul
Please current those issues and check. It will definitely fix your site issues.
You may try using media queries for different window sizes..
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en.
This might be helpful for you.
I am trying to create an event with just CSS that will have a DIV (which is coloured white) turn from 0.6 opacity to 1.0 opacity when I hover over a separate div, so much so that when I hover over one div the other looks as if it is faded out.
My code can work if I wanted the div I hover over to fade but I want to hover and change the other div not the one I am hovering over.
HTML
<div id="sell1">
<div class="s1"></div>
</div>
<div id="gap"></div>
<div id="sell2">
<div class="s2"></div>
</div>
CSS
#sell1 {
height:100px;
width:100%;
background-color: rgb(50,70,130);
}
#sell2 {
height:100px;
width:100%;
background-color: rgb(50,70,130);
}
#gap {
height:50px;
background-color:white;
}
.s1, .s2 {
width:100%;
height:247px;
position:absolute;
background:rgba(255, 255, 255, 0.6);
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
#sell2:hover .s1 {
opacity:1;
}
http://jsfiddle.net/UgsyL/186/
So here I want to hover over the "sell2" div and have .s1 turn from 0.6 to 1.0 opacity.
Any help?
With your current setup of HTML, that's impossible. However, as LinkinTED pointed out, it's possible to hover #sell1 and make .s1 fade, by styling #sell1:hover ~ #sell2 .s2 { ... }.
If you need only to hover #sell2 and change .s1, you can switch their places in the HTML, making it:
<div id="sell2">
<div class="s2"></div>
</div>
<div id="gap"></div>
<div id="sell1">
<div class="s1"></div>
</div>
And then style the divs with relative and absolute positioning to be switched, as well as styling the hover with the code provided by LinkinTED.
This isn't THE answer to the question I asked originally but it is a work around I finally figured out that works for what I am wanting to do.
HTML
<ul>
<li><div></div></li>
<br/>
<li><div></div></li>
</ul>
CSS
div {
background-color: rgb(40,80,120);
height: 100px;
width: 200px;
}
ul li {
display: inline-block;
}
ul li div {
opacity: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
transition: opacity .5s;
}
ul:hover li div {
opacity: .5;
}
ul:hover li div:hover {
opacity: 1;
}
http://jsfiddle.net/xbMtN/7/
I'm developing a site and the navigation buttons have 3 states as usual, the initial idle state, a hover state and a click state and a state to show that's the page your on.
I thought I'd add some nice transitions to the :hover and :active states, and while the :hover works nicely I can't seem to get the :active to work as I want.
If you take a look at this fiddle you'll have a clearer idea of what I'm trying to achieve:
http://jsfiddle.net/number8pie/3BvhM/2/
As you can see on :hover there is an opacity transition that I think looks quite nice, but when you click the link I want about_us.png and about_us_hover.png to be set to opacity 0 (using the transition) and about_us_active.png to be left visible.
Here's the HTML:
<ul class="right"> <!-- no closing tag on <li> so that the whitespace between elements is removed-->
<li id="about-us">
<a class="nav-link" href="#">
<div class="icon-cont">
<img class="top" src="http://s28.postimg.org/7u46xdbjd/about_us.png">
<img class="middle" src="http://s28.postimg.org/mel9s76i1/about_us_hover.png">
<img class="bottom" src="http://s28.postimg.org/bt1eg706h/about_us_active.png">
</div>
<span class="nav-text">about us</span>
</a>
<li id="products">
<a class="nav-link" href="#"><span class="nav-text">products</span></a>
<li id="the-team">
<a class="nav-link" href="#"><span class="nav-text">the team</span></a>
<li id="environment">
<a class="nav-link" href="#"><span class="nav-text">environment</span></a>
<li id="contact">
<a class="nav-link" href="#"><span class="nav-text">contact</span></a>
</ul>
And the CSS:
ul li {
height: 56px;
width: 56px;
margin: 0;
font-family: 'RobotoLight';
font-size: 21px;
display: inline-block;
text-transform: uppercase;
}
.icon-cont {
position: relative;
height: 56px;
width: 56px;
margin: 0;
}
.icon-cont img {
position: absolute;
left: 0;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.icon-cont img.top {
z-index: 30;
}
.icon-cont img.middle {
z-index: 20;
}
.icon-cont img.bottom {
z-index: 10;
}
.icon-cont img.top:hover {
opacity: 0;
}
.icon-cont img.top:active {
opacity: 0;
}
.icon-cont img.middle:active {
opacity: 0;
}
.nav-text {
font-size: 0;
position: absolute;
left: -1000px;
}
Thanks in advance for any hep and or suggestions.
You can do most of this using some CSS trickery- namely by relying on the :checked state of a sibling hidden input to control the appearance of a label.
To set the state depending on the current page, you'll likely need to use some JS to identify the page, then apply a suitable class to the element in question.
This will work for on/off click states. If you want a depress (mousedown) state, you should likely use a button element instead of anchor a tags in your code to apply :active to.
Demo Fiddle
(alternate demo using a button and :active)
HTML
<input type='checkbox' id='menuItem' />
<label for='menuItem'>i</label>
CSS
input {
display:none;
}
label {
display:inline-block;
height:50px;
width:50px;
line-height:50px;
color:white;
font-size:1.5em;
font-style:italic;
font-family:arial;
background:lightgreen;
text-align:center;
position:relative;
transition:all 200ms ease-in;
}
label:after {
height:30px;
width:30px;
content:'';
border:4px solid white;
border-radius:100%;
display:inline-block;
position:absolute;
left:6px;
top:6px;
opacity:0;
transition:all 200ms ease-in;
}
label:hover:after {
opacity:1;
}
input:checked+label {
background:none;
color:lightgreen;
}
input:checked+label:after {
border-color:lightgreen;
}
Here it is using javascript. I add a class to the link onmousedown and use that to add the active styles. I've used plain js as I'm not sure if you're using jQuery or some other DOM manipulation library. The code is here:
http://jsfiddle.net/John_C/xsdnL/3/
var navLinks = document.getElementsByClassName('nav-link');
Array.prototype.forEach.call(navLinks, function(link) {
link.addEventListener("mousedown", function(){
this.className += " active";
}, false);
link.addEventListener("mouseup", function(){
this.className = "nav-link";
}, false);
});
Sorry If my tone is not good,
I am using this code in a web page.
HTML:
<a class="second" href="#nav1">Home</a>
<a class="second" href="#nav2">About</a>
<a class="second" href="#nav3">Contact</a>
<section id="nav1" data-speed="4" data-type="background">
<article>Big Tech Ideas Page3</article>
</section>
<section id="nav2" data-speed="4" data-type="background">
<article>Big Tech Ideas Page3</article>
</section>
<section id="nav3" data-speed="4" data-type="background">
<article>Big Tech Ideas Page3</article>
</section>
Question: my question is this, When I click on link "About" of "Contact", page should scroll slowly slowly .
NOTE:(Here I mean Parallax Scrolling).
suggest me css for this.
You're gonna have to modify your HTML. I passed across a solution some time ago but I don't remember where it is. Anyway here's how I'd modify your code:
HTML:
<a id="nav1"></a>
<a id="nav2"></a>
<a id="nav3"></a>
<header class="nav">
<nav>
<ul>
<li>Home </li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section id="main">
<article class="article" id="nav1">
<p>Big Tech Ideas Page3</p>
</article>
<article class="article" id="nav2">
<p>Big Tech Ideas Page3</p>
</article>
<article class="article" id="contacto">
<p>Big Tech Ideas Page3</p>
</article>
</section>
CSS:
a[id= "nav1"]:target ~ #main article.article {
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
a[id= "nav2"]:target ~ #main article.article {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[id= "nav3"]:target ~ #main article.article {
-webkit-transform: translateY( -1000px );
transform: translateY( -1000px );
}
header {
position: fixed;
z-index: 10;
}
.article {
width: 100%;
height: 600px;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.article p {
font-family: sans-serif;
font-size: 86px;
font-size: 5rem;
position:relative;
line-height: 300px;
text-align: center;
margin: 0;
}
Let me know if it works.
Working demo fiddle: http://jsfiddle.net/Fraximus/CFSEK/1/
Is there any way to produce reverse-parallax scrolling?
i.e. On scrolling the content down, I want the respective title in the left pane to get highlighted accordingly.