Jump to content
Sign in to follow this  
philippagreen

How to Make Menu Bar 100% Screen Width

Recommended Posts

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.

Edited by philippagreen

Share this post


Link to post
Share on other sites

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).

Edited by bsmither

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...