Menu icon Foundation
Row color problem

Hello,

As you will see on the image I have a top-bar with a color background.

Now my problem is that I want to contain-to-grid this row but want to apply the background color to the whole row but without applying a background color for the whole page.

So I tried creating a class in css just for this.

.row.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 100%;
}

but then see what I get in the second image in this link --> http://towerhost.gr/error6.png

I just want the menu to show "centered" as in first image and have color backroung the through the whole width of the screen in that row.

Regards

Error5

Error6

rowcolorproblemfull width

Hello,

As you will see on the image I have a top-bar with a color background.

Now my problem is that I want to contain-to-grid this row but want to apply the background color to the whole row but without applying a background color for the whole page.

So I tried creating a class in css just for this.

.row.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 100%;
}

but then see what I get in the second image in this link --> http://towerhost.gr/error6.png

I just want the menu to show "centered" as in first image and have color backroung the through the whole width of the screen in that row.

Regards

Error5

Error6

This post has been closed. No new replies can be added.

Kyle Johnson over 5 years ago

If you remove the .row class then it will bypass foundations default margins and padding.
I do no place my navigation inside of a .row.

If you place your navigation inside a 'wrapper' class (other than a .row), then you can set the background color of that 'wrapper' class which will span the width of the screen.

Here is a pen showing the 'wrapper' class: http://codepen.io/kbjohnson90/pen/Jutmo/

<div class="contain-to-grid nav-wrapper">
    <nav class="top-bar" data-topbar>
      ...
    </nav>
</div>