Several Modern themes (Amarone, Chablis, Sauternes, and Vinho Verde) employ a fixed “header banner” and “horizontal menu”, behind which the page contents scroll, i.e., the header/menu will always be visible and accessible to the application user regardless of the amount of page scroll. This requires that the page contents and menu be initially positioned a certain number of pixels down from the top of the page. For example, in Amarone, the default height of the banner is 110px. If you own header banner is of a different height, you may need to override the following styles (via addition to Styles.css):
.pBack { /* offset of page content from top */
margin-top: 120px /* default banner height 110px + header banner/top of content panel margin 10px */}
.MLMmenuAlign { /* offset of horizontal menu from top */
top: 60px; /* menu positioned below company logo, but still within header banner */}
If you prefer to use vertical menus instead of the horizontal (in Amarone, Chablis, Sauternes, and Vinho Verde), several style changes should also be made to improve look-and-feel. For example, in Amarone,
Since the horizontal menu no longer occupies the header banner, the latter's height should be reduced:
.pcT {
height: 30px; /* originally, height: 90px; */ }
The menu/page content should be shifted up the same amount that the header banner's height has been reduced:
.pBack {
margin-top: 60px; /* originally, height: 120px; */ }
Maintain centering of menu/page content:
.pBack {
width: 100%; /* originally, width: 1000px; increases page width to accommodate vertical menu */ }
.pageC {
/* width: 100%; */ /* comment out to allow vertical menu and page widths to define overall page width */ }
.pageL {
/* display: none; */
width: 50%; /* display left margin (to center menu/page content) */ }
.pageR {
/* display: none; */
width: 50%; /* display right margin (to center menu/page content) */ }