Keeping a scalable picture underneath a fixed position nav

So I have a scalable navigation, using percentage based columns (using www.responsivegridsystem.com 's css scripts) and using vw units for the font size. That all works nicely, as the window gets smaller everything shrinks down automatically. Underneath it I have a large logo image with the width set to 100%, so that also scales together nicely. I want to set up smooth scrolling to anchor points down the road, as I am designing my site to have a 1 page layout. So I realized that I would then need to have the nav bar be fixed so that people would always have access to the nav without needing to scroll back to the top to get it.

So then I ran into the problem of the logo sitting behind the nav, since it got bumped up because the nav is no longer in the DOMs normal flow. I COULD adjust the padding above the image, but that only really works if I use px units, but how could I accurately use percentage to make the image sit JUST under the nav and still scale appropriately?

www.darren-segal.com is the site. Mind you I didnt host the fixed nav since I havnt been able to solve this problem, obviously.

The server seems to be down.

Try: dsdesigns.nfshost.com

CSS can’t detect what padding to use to not cover the menu when it’s fixed.

You want to use Javascript to do this. First add this code in.

<style type="text/css">

.scroll
{
position:fixed;
width:100%;
z-index:999;
background:green;
top:0;
}
</style>

Then add this in right before </body>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{  
  var stickyNavTop = $('.section.nav').offset().top;  
  var stickyNav = function()
  {  
    var scrollTop = $(window).scrollTop();
    var hwidth = $('html').width();
    if (scrollTop > stickyNavTop && hwidth>641)
    {   
      $('.section.nav').addClass('scroll'); 
      $('body').css({'padding-top': $('.section.nav').height()});
    }
    else
    {  
      $('.section.nav').removeClass('scroll');
      $('body').css({'padding-top': '0'});
    }  
  };
  stickyNav();  
  $(window).scroll(function()
  {  
    stickyNav();  
  });  
}); 
</script>

This will detect the height of the menu and display accordingly. It will also only activate the fixed menu upon scrolling down some (correctly knowing how much to scroll down.)

This is my full page for testing.

<!DOCTYPE html>
<html>
<!-- HTML5 Boilerplate -->
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<head>
<base href="http://dsdesigns.nfshost.com/" />
    
    <script src="js/jquery-1.11.0.min.js"></script>
	<script src="js/lightbox.min.js"></script>

	<meta charset="utf-8">
	<!-- Always force latest IE rendering engine & Chrome Frame -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>DS-Graphic Designer</title>
	<meta name="description" content="This is the Responsive Grid System, a quick, easy and flexible way to create a responsive web site.">
	<meta name="keywords" content="responsive, grid, system, web design">

	<meta name="author" content="www.grahamrobertsonmiller.co.uk">

	<meta http-equiv="cleartype" content="on">

	<link rel="shortcut icon" href="images/favicon.png">

	<!-- Responsive and mobile friendly stuff -->
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Stylesheets -->
    <link href="css/lightbox.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/html5reset.css" media="all">
	<link rel="stylesheet" href="css/col.css" media="all">
	<link rel="stylesheet" href="css/2cols.css" media="all">
	<link rel="stylesheet" href="css/3cols.css" media="all">
	<link rel="stylesheet" href="css/4cols.css" media="all">
	<link rel="stylesheet" href="css/5cols.css" media="all">
	<link rel="stylesheet" href="css/6cols.css" media="all">
	<link rel="stylesheet" href="css/7cols.css" media="all">
	<link rel="stylesheet" href="css/8cols.css" media="all">
	<link rel="stylesheet" href="css/9cols.css" media="all">
	<link rel="stylesheet" href="css/10cols.css" media="all">
	<link rel="stylesheet" href="css/11cols.css" media="all">
	<link rel="stylesheet" href="css/12cols.css" media="all">
	<link rel="stylesheet" href="css/custom.css" media="all">
<style type="text/css">
.scroll
{
position:fixed;
width:100%;
z-index:999;
background:green;
top:0;
}
</style>
</head>

<body>
    
    <div class="header">
        
        <div class="section group nav">
            <div class="col span_1_of_4">
                <a href="index.html">Home</a>
            </div>
            <div class="col span_1_of_4">
            <a href="#">About</a>
            </div>
            <div class="col span_1_of_4">
            <a href="#">Portfolio</a>
            </div>
            <div class="col span_1_of_4">
            <a href="#">Contact</a>
            </div>
        </div>

<img id="logo" src="images/ds-logo.png" alt="main logo">
    </div>


<div class="section group content1">
	<div class="col span_1_of_3 left">
		<img class="vector" src="images/vector-circle.png" alt="vector circle diagram">
		<p class="middle">As a designer, drawing comes first. A designer must have                appreciable skills 
		in fine art for the transformation from analog to digital to be fluid and                 effortless.
		My first steps came with a pencil in hand and I continue to take each step as             such. Elegant and
		graceful vector lines are only possible with a refined sketch dialed in first,            and this is my approach to
		every vector image I create. I forfeited the technique of sitting at my computer          to come up with
		ideas and trace out an image. This is popular in the modern age but is counter-           intuitive to the
		creative process and will always detriment the end product. My approach to                digital imaging and the
		use of the incredible and exciting technology available for digital media is, and         always will be, analog
		first.
</p>
	</div>

	<div class="col span_1_of_3 middle">
		<img class="vector" src="images/folder-logo.png" alt="folder logo">
		<p>For as long as I have wielded a pen I have also hacked and tinkered in the field of computers. From Street Fighter to Photoshop and everything in between, my fascination with all things electronic has served me well. 

Everyone is trying to stay ahead of the curve but some fall short, there is just so much to learn and the tech landscape is always changing. As important as it is for graphic designers to never stray too far from their foundations in the 

analog realm, in the present age, it is vital that your art can move through space in as many forms as possible. Forgoing the utility of the web and its connection to everything is just a waste, and that is why I have spent years 

studying and teaching myself useful modern code and software  that is relevant to graphic design and multimedia. There are plenty of developers that don’t know a thing about color theory, design, or visual tension and there are just as 

many designers that don’t know their &ltdiv&gt from their &ltspan&gt. Although my greatest strengths are as a designer, my knowledge of HTML and CSS can be a valuable asset, as my communication between the visual design and the front-end 

of a project can help unify a development team. The site you’re reading right now was hand coded by yours truly.</p>
	</div>
</div>
    
<div class="section group portfolio">
    <div class="col span_2_of_2">
        <h1>Portfolio</h1>
    </div>
<div class="section group gallery-section">  
    <div class="col span_1_of_4 gallery">
        <a href="images/Royal-Colors.jpg" data-lightbox="portfolio" data-title="Royal Colors"><img src="images/royal-colors-thumb.jpg"></a>
    </div>
    <div class="col span_1_of_4 gallery">
    <a href="images/polar-bear.jpg" data-lightbox="portfolio" data-title="Royal Colors"><img src="images/polar-bear-thumb.jpg"></a>
    </div>
    <div class="col span_1_of_4 gallery">
    <a href="images/s-logo.jpg" data-lightbox="portfolio" data-title="Royal Colors"><img src="images/s-logo-thumb.jpg"></a>
    </div>
    <div class="col span_1_of_4 gallery">
        <a href="images/ds-logo-white.jpg" data-lightbox="portfolio" data-title="Royal Colors"><img src="images/ds-logo-thumb.jpg"></a>
    </div>
</div>
    </div>
    
<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{  
  var stickyNavTop = $('.section.nav').offset().top;  
  var stickyNav = function()
  {  
    var scrollTop = $(window).scrollTop();
    var hwidth = $('html').width();
    if (scrollTop > stickyNavTop && hwidth>641)
    {   
      $('.section.nav').addClass('scroll'); 
      $('body').css({'padding-top': $('.section.nav').height()});
    }
    else
    {  
      $('.section.nav').removeClass('scroll');
      $('body').css({'padding-top': '0'});
    }  
  };
  stickyNav();  
  $(window).scroll(function()
  {  
    stickyNav();  
  });  
}); 
</script>

</body>
</html>

Thanks a lot, Ill test this out tomorrow

Man that did the trick! Thanks a lot. I really need to buckle down and learn JS so I can fully understand what the script is doing. And in the CSS, could you briefly explain what the z-index set at 999 is doing? I mean, I know its for positioning, but I dont fully understand it, apologies for the noobness. Also, right now Im learning how to script the smooth scrolling effect for the links, is there anything I need to know about where this script could conflict? Thanks again

All relative/absolute/fixed elements (whether set in CSS or JS) has some sort of z-index set. “Auto” is the default value which means that the source order determines what goes on top of each other.

Setting 999 prevents almost all other cases of some other element on the page jumping on top of the navigation. That’s all.

Okay, I get that. One thing is that I am noticing that the script isnt working once the window width becomes smaller than a certain size, any way to fix that?

Ah, yeah that is remnants from my own script where I then implement a hamburger menu

var hwidth = $('html').width();
if (scrollTop > stickyNavTop && hwidth>641)
{ 
$('.section.nav').addClass('scroll'); 
$('body').css({'padding-top': $('.section.nav').height()});
}

You can remove the hwidth variable and that condition from the if statement. That should be all you need.

I deleted that part of the script you just quoted and it seems to be breaking it

Paste your script. It shouldn’t have broken it. Paste what your currently have.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{  
  var stickyNavTop = $('.section.nav').offset().top;  
  var stickyNav = function()
  {  
    var scrollTop = $(window).scrollTop();
    
    }
    else
    {  
      $('.section.nav').removeClass('scroll');
      $('body').css({'padding-top': '0'});
    }  
  };
  stickyNav();  
  $(window).scroll(function()
  {  
    stickyNav();  
  });  
}); 
</script>

Im assuming it has something to do with the else statement, should I change it to if?

No you didn’t do as I said. This should be your script.

<script type="text/javascript">
$(document).ready(function()
{  
  var stickyNavTop = $('.section.nav').offset().top;  
  var stickyNav = function()
  {  
    var scrollTop = $(window).scrollTop();
    if (scrollTop > stickyNavTop)
    {   
      $('.section.nav').addClass('scroll'); 
      $('body').css({'padding-top': $('.section.nav').height()});
    }
    else
    {  
      $('.section.nav').removeClass('scroll');
      $('body').css({'padding-top': '0'});
    }  
  };
  stickyNav();  
  $(window).scroll(function()
  {  
    stickyNav();  
  });  
}); 
</script>

You removed so much…More than I said.

I removed the hwidth variable and the && part from the if statement. I was right.

Sorry I deleted exactly what you had in the code block in the first comment, the latter half of which was not what you meant for me to take out. Thanks for the help

Sorry, today was very stressful for me between all the threads I was doing here (I counted 49 posts before lunch. BEFORE LUNCH!) Then I had to catch up with all the work…Today was not a good day.

Glad all was sorted in the end.

Yeah man, you dont have to take your time to help random people from the internet, I appreciate it. (side note, wtf are the Ravens doing???)

In Ozzie we trust.

Hey so Iv been doing more work on teh site and I came across a problem. I am using a smooth scroll plugin for the links in my nav, the problem is when I use anchor points to tell the script and the nav where to scroll to, the fact that the nav bar is being taken out of the DOM flow is messing up where the page stops scrolling. Could you possibly help me fix this?

you can go to this link to see what Im talking about

My site

How do I reproduce that problem?

Just select an item from the top menu and the page scrolls up too far because it goes under the fixed sticky nav.

This would be a javascript question now as an offset will need to be provided to avoid the stickynav.