How to change the page width

[Antonio Scotti]

Hi
I am using the peak theme and the default page width is the full screen of the navigator window.
Like in here
How can I change this to make it narrower?

Update: I put this code inside the custom css window:
#container {
max-width: 700px;
}
and the result I get is the content part of the page shrinks (but only towards the left-hand-side)
and the menu part remains as it was.
My goal would be to shrink the page width on both sides so that the content part remains centered and the menu and logo part also keep the same width as the content part.

Best regards

[Veena]

Can you pls check boxed layout in themeoptions > Site Layout and see if that helps.

[Antonio Scotti]

The Boxed layout option doesn’t appear at all in my current version of Peak, at least not in the Site layout options page. Should I download a new version?

[Antonio Scotti]

Peak version is 2.6

[Antonio Scotti]

Hi Veena
It would be great if you could help sorting out this issue as well. As I said earlier The Boxed layout option doesn’t appear at all in my current version of Peak. What can I do?
Regards

[Veena]

You can try this Custom CSS –

.page-id-80 .inner.clearfix {
    max-width: 65%;
}

Also pls reduce menu items , you can create a “pages” menu and add all the menus as sub items of pages menu like our peak theme features menu otherwise it won’t look good.

[Antonio Scotti]

I see….but do you think that acting on both the left and right sides of the page (see attached screenshot red rectangles), by reducing (actually cutting) them to where the text is now (so that the text could be further indented and the white space indentation column could be moved to the right and the end of the line to the left. so that there is also indentation on the right side..as it is now), and also reducing the size of the logo and the distance/gap between the logo and the start of the menu bar, so that we can keep the number of menu entries the same (we have a lot of other sub-menues to activate yet).

Also the green header bar should shrink both on the left and the right hand sides and the page title move towars right as well….
What do you think?…I wish I could find some model webpage to show you….
Regards

[Veena]

Pls try the below custom CSS –

#header {
    max-width: 1200px;
}
.page.layout-1c {
    max-width: 1200px;
    margin: 0 auto;
}
img.standard-logo {
    max-width: 80%;
}
#site-logo {
    top: 30px;
}

[Antonio Scotti]

Hi
I tried it and although it seems to work, the menu does a strange behaviour
When the top of the page is shown the menu bar goes below in the image header (see attached picture)
but when the page is scrolled down it goes where it should be, in the same header with the logo (see 2nd picture)
Don’t understand why this happens. Can please you help?
Regards
Antonio

[Veena]

For now i have removed the below custom CSS –

#primary-menu {
    top: 80px;
}
#header.sticky #primary-menu {
    top: -80px;
}

And added this –

#primary-menu {
    top: -40px;
}

Things will work smoother if you reduce atleast one menu item.

By the way i have seen some syntax errors in your custom CSS pls copy all your custom CSS in to your themes’s custom /custom.css folder and correct it

Because of some auto formatting issues greater than symbol “>” is getting converted to &gt.
For eg: the below custom CSS which is invalid CSS-

.dropdown-menu-wrap > ul.menu > li > a {
    transition: none !important;
}

#primary-menu > ul.menu > li > ul.sub-menu {
    top: 0px;
}

[Author]

Posts