fixed width with side menu

Submitted by paullas on Sun, 2016-01-17 10:29 in Price Tapestry

Hi David.

I have just downloaded the latest version of PT and was wondering if you can tell me how to do the following:

1: Have the site fixed width, say 800px but keep the mobile version.
2: Have a side menu on the right for me to put links/menus in.

Many thanks

Paul

Hi Paul, Foundation already

Submitted by support on Sun, 2016-01-17 13:57

Hi Paul,

Foundation already prescribes a max-width of 62.5rem; (centered) to the row class but if you wish to reduce this to 800px, simply add the following to html/default.css:

  .row {

    max-width: 800px !important;

  }

The navigation bar however defaults to a max width of 100%, so if you wanted to reduce this to the same as the body, in addition to the above add the following:

  .top-bar {

    max-width: 800px !important;

    margin: auto !important;

  }

To create a right-hand column for navigation beside the main content area (below the breadcumbs / banner) add the following code right at the end of html/banner.php:

<div class='row'>

<div class='small-12 medium-10 columns'>

...and correspondingly, at the very top of html/footer.php add the following:

</div>

<div class='small-12 medium-2 columns'>

<ul class='side-nav'>

  <li><a href='#'>Link 1</a></li>

  <li><a href='#'>Link 2</a></li>

</ul>

</div>

Foundation already includes a sidebar navigation <ul> class so I've included that in the above example. Don't forget as you build out your site you can see all the goodies available in Foundation on one page here...

Hope this helps!
Cheers,
David
--
PriceTapestry.com

Hi David. I have added the

Submitted by paullas on Sun, 2016-01-17 15:33

Hi David.

I have added the above side meu but it is centralising the menus and not aligning them to the left? any ideas i i do this.

thanks

Paul

Hi Paul, That will be as

Submitted by support on Mon, 2016-01-18 10:15

Hi Paul,

That will be as result of the default padding inherited from the columns class. The best thing to do would be to give the sidebar <div> an id attribute e.g.

<div class='small-12 medium-2 columns' id='sidebar'>

And then in html/default.css you can style accordingly e.g.

#sidebar {

  padding: 0 !important;

}

Cheers,
David.
--
PriceTapestry.com

Hi David. How can i exclude

Submitted by paullas on Mon, 2016-01-18 19:35

Hi David.

How can i exclude the sidemenu from showing up on a table/smartphone.

thanks

Paul

Hi Paul, Just adding the

Submitted by support on Tue, 2016-01-19 09:11

Hi Paul,

Just adding the show-for-medium-up class to the sidebar div will do the trick...

<div class='small-12 medium-2 columns show-for-medium-up' id='sidebar'>

Cheers,
David.
--
PriceTapestry.com