Jump to content

Centralise box.navigation.php


RossF1984

Recommended Posts

Hi,

May seem like an obvious question but can anyone advise as to how to centralise the box.navigation.php on the Foundation skin?

I have set the width of the bar to full screen using some code (by @bsmither) I found using the search function.
 

 </div>
            <div style="max-width:none;" 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>


However is there a way centralise the navigation elements/buttons as they are currently offset to the left.

It can be seen in action here ( www.delightfulonline.co.uk)

Link to comment
Share on other sites

  • 2 weeks later...

There will be an edit to each of main.php and box.navigation.php. There will also be content added to the otherwise empty file cubecart.default.css.

main.php

From:
            <div class="row small-collapse">
               <div class="small-12 columns">
                  {include file='templates/box.navigation.php'}
To:
            <div class="row small-collapse" style="max-width: none;">
               <div class="small-12 columns">
                  {include file='templates/box.navigation.php'}

box.navigation.php

From:
     <ul itemscope itemtype="http://www.schema.org/SiteNavigationElement" class="left">
To:
     <ul itemscope itemtype="http://www.schema.org/SiteNavigationElement"{* class="left" *}>

cubecart.default.css

Add:
@media only screen and (min-width: 58.75em) {
  .top-bar-section ul { display: block; width: max-content; margin: 0 auto; }
}

The media directive limits this to the desktop display only. Pads and mobiles should behave as they did originally.

Have CubeCart clear its internal cache.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...