0

I have a header that is spanning the full width (14 columns) of its div.page container. My Susy grid is 14 columns wide. So now when I try to click to inspect other page elements that are under the header element in Google Dev Tools, I simply can not. I can only access the header.

Below you can see the header which has a translucent pink background-color. Everytime I click one of the green divs up top, I hit the header.

enter image description here

What I would like is for that header to only span the first two left columns of the page. The problem is that I need to have a fixed position header which will contain my h1 title and nav so I need to have a new container context similar to what Eric Meyer did here

https://groups.google.com/forum/?fromgroups#!topic/compass-users/A2rFv2ihwas

I don't really see what I am doing wrong here. Is there no way around this?

My style.sass

@import compass
@import susy
@import normalize



 /* Susy Settings */

$total-columns  : 5             
$column-width   : 4em            
$gutter-width   : 1em            
$grid-padding   : $gutter-width  

$tablet : 10
$desktop : 14

// Susy-grid-background override to draw out horizontal lines
=susy-grid-background       
  +grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true)

$base-font-size: 18px
$base-line-height: 30px
+establish-baseline

ul
  background-color: rgb(111, 50%, 250)

li
  background: rgba(200,50,0,.2)
  text-align: right

a
  background: rgba(0,220,0,.2)
  display: block

h1
  +adjust-font-size-to(90px)
  +adjust-leading-to(4, 90px)
  +leader(2, 90px)
  background: rgba(0,20,200,.3)

h1#logo
  +adjust-font-size-to(30px)
  +adjust-leading-to(2, 30px)
  +leader(0, 30px)

h2
  +adjust-font-size-to(25px)
  +adjust-leading-to(1, 25px)
  background: rgba(250,250,0,.2)

p
  +leader(1)
  +trailer(1)
  background: rgba(0,220,0,.2)

.page, header, .pagenav, .main, .pagefoot
  +transition(all .3s ease)

.page                                
  +container($total-columns, $tablet, $desktop)
  +susy-grid-background


/* BREAKPOINTS */

+at-breakpoint($desktop)
  .page
    +susy-grid-background

  header
    +container
    +susy-grid-background
    background: rgba(250,0,0,.2)
    position: fixed
    left: 0
    right: 0

    h1#logo a
      +hide-text
      float: right
      +span-columns(2)
      background: rgba(200,10,250,.1)

    .pagenav
      clear: both
      float: right
      +span-columns(2)
      background: rgba(0,140,250,.3)

  .main
    +span-columns(12 omega)
    +leader(2)
    background: rgba(1,240,200,.3)

  .tile
    // +span-columns(4, 12)
    +isolate-grid(4, 12)
    +adjust-leading-to(9)
    +trailer(1)
    background: #0f6   

    .tile_title
      +adjust-font-size-to(25px)
      +adjust-leading-to(1, 25px)
      background: #af6   

  .pagefoot
    background: rgba(45,0,120,.3)
    +span-columns(12,12)

UPDATE

I have tried Eric Meyer's suggestion of applying z-index:-1 to the header element to send it behind all my green divs. This allowed me to click my green divs just fine but now when I try to click on my nav links I hit the .page container. Then I tried applying z-index:2 to the .page container but that did not help. Not sure how to gain click access to the nav

Here is my new code:

@import compass
@import susy
@import normalize
@import base


$base-font-size: 18px
$base-line-height: 30px
+establish-baseline

ul
  background-color: rgb(111, 50%, 250)

li
  background: rgba(200,50,0,.2)
  text-align: right

a
  background: rgba(0,220,0,.2)
  // display: block

h1
  +adjust-font-size-to(90px)
  +adjust-leading-to(4, 90px)
  +leader(2, 90px)
  background: rgba(0,20,200,.3)

h1#logo
  +adjust-font-size-to(30px)
  +adjust-leading-to(2, 30px)
  +leader(0, 30px)

h2
  +adjust-font-size-to(25px)
  +adjust-leading-to(1, 25px)
  background: rgba(250,250,0,.2)

p
  +leader(1)
  +trailer(1)
  background: rgba(0,220,0,.2)

.page, header, .pagenav, .main, .pagefoot
  +transition(all .3s ease)

.page                                
  +container($total-columns, $tablet, $desktop)
  +susy-grid-background


/* BREAKPOINTS */

+at-breakpoint($desktop)
  .page
    +container
    +susy-grid-background

  header
    +container
    +susy-grid-background
    background: yellow
    z-index: -1
    position: fixed
    left: 0
    right: 0

    h1#logo a
      +hide-text
      float: right
      +span-columns(2)
      background: rgba(200,10,250,.1)

    .pagenav
      clear: both
      float: right
      +span-columns(2)
      background: rgba(0,140,250,.3)

  .main
    +span-columns(12 omega)
    +leader(2)
    background: rgba(1,240,200,.3)

  .tile
    +isolate-grid(4, 12)
    height: 300px
    +trailer(1)

    .tile_title
      +adjust-font-size-to(25px)
      +adjust-leading-to(1, 25px)
      background: #af6   
      margin: 10px
      padding: 5px

    .tile_use
      @extend .tile_title
      +adjust-font-size-to(20px)
      +adjust-leading-to(1, 20px)  

  .pagefoot
    background: rgba(45,0,120,.3)
    +span-columns(12,12)

1 Answers1

0

See the answers and comments on "A `position:fixed` sidebar whose width is set in percentage?".

z-index may be the best fix, but you also may be able to fix it by getting rid of the clearfix on the header - so it collapses around the floated elements inside it. That clearfix is happening in the Susy container mixin, so you would have to use set-container-width instead (along with auto-margins to center it in the window.

Community
  • 1
  • 1
Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Thanks. I tried the last method you mention but when I use `+set-container-width(2)` on `header` the `header` gets taken out of susy's flow and is pinned to the right of the window. I also don't know understand why I would apply `margin: auto` to `header`. When I do that my header gets centered on the page and that's not where I need it. –  Jun 13 '13 at 13:09
  • I also tried adding `z-index: -1` to the `header` but that did not make the `header` span 2 columns. It still spans the entire 14 columns overlapping the `.main` content. –  Jun 13 '13 at 13:14
  • If you look carefully at the solution presented - it *requires* using some element to span the entire window, another element to create the full-width container, and then a third element to narrow your span down to 2 columns. That's how this solution works. You don't want `+set-container-width(2)`, you want `+set-container-width` on one element, and `+span-columns(2)` on another element inside that. `z-index` is how you push those containing elements to the back of the z-axis - even though they span the full width, they don't have to be in the way. – Miriam Suzanne Jun 14 '13 at 01:51
  • I went through the code again and applied `z-index:-1` to the `header` send it behind the `.main` div. Now I can click all my tiles just fine but now the `nav` and all its links are stuck behind `.page`. I then tried applying `z-index:-2` to `.page` but that did not work either as the `nav` are links still unclickable. I have updated the question with my new code. –  Jun 15 '13 at 10:48
  • If you read all the comments, you'll see the final conclusion was actually to use a positive `z-index` along with `position: relative` on `.main` instead of negative z-index on the header. I tried that with your code (as best I could recreate it without seeing the actual markup), and it works great. – Miriam Suzanne Jun 15 '13 at 19:44
  • Oh yes. That worked. Thank you for being so patient with me. It really means a lot to me. So glad this problem is solved now. I will read comments/posts more closely next time. –  Jun 15 '13 at 20:25