Jump to content

Centralise box.navigation.php


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

Edited by bsmither
  • Thanks 1
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.

×
×
  • Create New...