Menu icon Foundation
Cannot make initial sticky .top-bar with header above it full width. Help!

I have a header I want above my navbar. As you scroll down, I want the navbar to be sticky and the header to dissapear off screen.

This works, but the inital navbar has white space on the sides and is not full width.

Once you scroll and the .sicky takes affect, the navbar then goes to full width.

I want it to always be full width..

you can see it with the header and white space on the sides, then the full width once you've scrolled in the images attached..

Help plzzzz....

add my css.... it's unorganized spaghetti now (warning).

Screen shot 2015 01 09 at 1.42.01 pm

Screen shot 2015 01 09 at 1.41.52 pm

.row
   .small-12.columns
      .masthead
.row
   .small-12.columns
      .contain-to-grid.sticky
         nav.top-bar(data-topbar, role="navigation", ng-controller='NavCtrl')
                  ul.title-area
                     li.name
                        h1
                           a(ui-sref='home') Hapi Technologies
                     li.toggle-topbar.menu-icon
                        a(href="/#/")
                           span
                  section.top-bar-section(ng-cloak)
                     ul.left(ng-show='online')
                        li: a: i.fa.fa-wifi
                     ul.right(ng-show='init && !username')
                        li: a(ui-sref='home') Home
                        li: a(ui-sref='register') Register
                        li: a(ui-sref='login') Login
                     ul.right(ng-show='init && username')
                        li: a(ui-sref='home') Home
                        li.divider
                        li: a(ui-sref='admin') Admin
                        li.divider
                        li: a(ng-click='logout()') {{username}}
            

         

top-barstickynavbarnav-barheaderfull width

I have a header I want above my navbar. As you scroll down, I want the navbar to be sticky and the header to dissapear off screen.

This works, but the inital navbar has white space on the sides and is not full width.

Once you scroll and the .sicky takes affect, the navbar then goes to full width.

I want it to always be full width..

you can see it with the header and white space on the sides, then the full width once you've scrolled in the images attached..

Help plzzzz....

add my css.... it's unorganized spaghetti now (warning).

Screen shot 2015 01 09 at 1.42.01 pm

Screen shot 2015 01 09 at 1.41.52 pm

.row
   .small-12.columns
      .masthead
.row
   .small-12.columns
      .contain-to-grid.sticky
         nav.top-bar(data-topbar, role="navigation", ng-controller='NavCtrl')
                  ul.title-area
                     li.name
                        h1
                           a(ui-sref='home') Hapi Technologies
                     li.toggle-topbar.menu-icon
                        a(href="/#/")
                           span
                  section.top-bar-section(ng-cloak)
                     ul.left(ng-show='online')
                        li: a: i.fa.fa-wifi
                     ul.right(ng-show='init && !username')
                        li: a(ui-sref='home') Home
                        li: a(ui-sref='register') Register
                        li: a(ui-sref='login') Login
                     ul.right(ng-show='init && username')
                        li: a(ui-sref='home') Home
                        li.divider
                        li: a(ui-sref='admin') Admin
                        li.divider
                        li: a(ng-click='logout()') {{username}}
            

         
Rafi Benkual over 4 years ago

Do you have it wrapped in row? If so remove that.

If you have contain-to-grid, remove that. You don't need it.