Jump to content

How to Make Menu Bar 100% Screen Width


philippagreen

Recommended Posts

There are two approaches: wrap that row in a style that is the same as the footer, or remove the max-width that applies to every row on large viewports.

In main.php, find:

<div class="row">
   <div class="small-12 columns small-collapse">
      {include file='templates/box.navigation.php'}
      <div class="hide" id="val_lang_back">{$LANG.common.back}</div>
   </div>
</div>

To remove the max-width, change the first line to:
<div style="max-width:none;" class="row">

There will still be some padding on either side.

To make it look like the footer, add the two lines as indicated, keeping the other lines as is:
<footer>{* New line to widen nav bar *}
<div class="row">
.....
</div>
</footer>{* New line to widen nav bar *}

This extends the bar to the sides, but the actual navigation links have not moved.

Because you have edited a template, be sure to have CubeCart clear its cache (admin, Maintenance, Rebuild tab).

Link to comment
Share on other sites

  • 1 year later...

What you have to do is to modify the .raw class in the "foundation.css" stylesheet.

Near line 127, remove the max-width of 62.5%  (or set it to 100%).
Change from:

.row {
  margin: 0 auto;
  max-width: 62.5%;
  width: 100%; }

to

.row {
  margin: 0 auto;
  width: 100%; }

If you want, you can also remove "margin: 0 auto" as this is for centering content.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...