philippagreen Posted October 16, 2017 Share Posted October 16, 2017 Hi Guys, I've got a 6.1.10 web site, I'm trying to make the width of the navigational bar (menu) 100% screen width like the Footer is, however all the things I've tried has made the entire web site 100% screen width. Some advice please, I'm using the Foundation template. Link to comment Share on other sites More sharing options...
bsmither Posted October 16, 2017 Share Posted October 16, 2017 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 More sharing options...
philippagreen Posted October 17, 2017 Author Share Posted October 17, 2017 Thank you - I've tried it with the footer and without the footer div and it doesn't seem to make any difference, however the Nav Bar is now 100% screen width. Is there any way the wording (nav links) can centre in the nav bar instead of aligning to the left of the Nav Bar? Link to comment Share on other sites More sharing options...
bsmither Posted October 17, 2017 Share Posted October 17, 2017 Wrapping the row in <footer></footer> tags do not work? But the bar is 100% wide? Something is working. My efforts at getting the nav titles to center have had no results. Link to comment Share on other sites More sharing options...
Julien Posted July 28, 2019 Share Posted July 28, 2019 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.