Great work on the new updates on the ZEN theme. I never heard of SASS before I installed this new version and am enthousiastic. Nevertheless, I run into an issues in the fixed-width setup. I think there is a bug in the SASS file fixed-width.scss.

I made an installation with a sub-theme of ZEN. I use fixed width and only 1 sidebar (right) and included a block to make the sidebar visible. I made the appropriate adjustments in the stylesheet list in theme-settings.php. I deleted all -rtl files and the responsive sidebars.css. I did not make further adjustments except changing the background-colors of #navigation, #header and .sidebar.

The navigation bar now seems to be wider then the template. The excess width is equal to the padding and seems so be solved if the width of #navigation is changed into (Line 86 fixed-width.scss):
width: $zen-grid-width - $zen-gutter-width;


oeroek’s picture

Component: layout.css » CSS/SASS/HTML markup

This issue is solved after adding the polyfill boxsizing in line 26 of fixed-width.scss and commenting out the alternative solution -$zen-box-sizing: content-box; in line 29 of fixed-width.scss.

JohnAlbin’s picture

Title: Fixed width issue, #navigation not lining up. » #navigation in fixed width layout, overflows parent container
Status: Active » Fixed

The width: $zen-grid-width - $zen-gutter-width; is the right one.

I <3 box-sizing: border-box, but leaving the fixed width layout as box-sizing: content-box makes it IE6/7 compatible with very little pain.

Thanks for the fix!

JohnAlbin’s picture

Title: #navigation in fixed width layout, overflows parent container » #navigation overflows parent container in fixed width layout

Better title

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.