Add side Menu Navigation (Sticky), Add sticky widget footer... WordPress
- SOLVED
I recently purchased the [[LINK href="http://shakenandstirredweb.com/theme/shaken-grid"]]shaken grid premium theme[[/LINK]] and want to make the Menu Navigation on the left side, but allow the grid to flow to the right area and still act responsive, similar to [[LINK href="http://thisisyoke.com"]] this site[[/LINK]]. (they are using the free version of the theme).
Also I would like to add the same style sticky footer and the sticky right rail on inside post/page details.
Looking forward to a response. Not entirely sure what this is worth.
If this is an undertaking please let me know some quotes.
Thanks.
Answers (1)
Christianto answers:
Hi Sly,
You need to edit the css and some js related to layout and jquery.isotope plugin use by the theme.
For example, if the fixed position of main menu on the left is about 200px width, with margin-left 20px
put this on custom.css (themes/shaken-grid-premium/custom.css)
#styleswitcher{
display: none;
}
/* grid and header */
@media only screen and (min-width: 800px) {
#grid{
margin-top: 20px;
margin-left: 220px;
position: relative;
}
#header{
padding: 0 10px;
position: fixed;
left: 20px;
top: 0px;
height: 100%;
width: 180px;
}
body #header .wrap{
min-width: 200px;
width: 200px!important;
}
body #header #footer-trail{
position: absolute;
bottom: 20px;
left: 20px;
}
}
@media screen and (min-width: 800px) and (max-height: 400px){
#footer-trail{
display:none;
}
}
/* menu */
@media only screen and (min-width: 800px) {
.header-nav li {
padding-top: 10px;
width: 180px;
margin-left: 0px;
}
.header-nav ul ul {
margin: 0;
top: 0px;
left: 180px;
}
body #header #site-info, body #header .menu, body #header #social-networks{
margin-top: 20px!important
}
body #header #social-networks {
margin-right: 20px;
margin-bottom: 10px!important;
}
}
/* single post */
@media only screen and (min-width: 800px){
body.single > .wrap {
width: auto!important;
margin: auto!important;
}
body.single > .wrap #page {
width: 460px;
margin-top: 20px;
margin-left: 240px;
}
body.single > .wrap #page .box-content {
width: 460px;
}
body.single > .wrap #page .box-content textarea{
width: 365px;
padding: 10px;
}
}
I set to apply the rules when screen bigger than 800px you can change it if you want.
for the footer trail please put your desire footer-trail content by adding
<strong><div id="footer-trail">
<!-- your footer trail content -->
</div></strong>
inside <div id="header"> on header.php
for the javascript:
on script.js (shaken-grid-premium/js/script.js) find
function centerLayout(){
if( jQuery(window).width() > mobile_width ){
jQuery('#header .wrap, #footer .wrap, #filtering-nav, .navigation').css('width', jQuery('.isotope').width() - 10);
}
}
we exclude #header .wrap on the selector by change
so it become:
function centerLayout(){
if( jQuery(window).width() > mobile_width ){
jQuery('#footer .wrap, #filtering-nav, .navigation').css('width', jQuery('.isotope').width() - 10);
}
}
optionally you might want to delete isotope center function on script.js line 212 and up if you don't want to centered the grid layout when isotope re-arrange it.
let me know if you have a problem with this.
sly comments:
It is working although now on a PAGE like "About" when shrinking the browser size the left side of the main body content is hidden behind the left menu navigation... blog posts do not respond this way.
Can I possible hire you to do more work on this theme?
Christianto comments:
I forgot about the page post type, please try add this code custom.css
/* page post */
@media only screen and (min-width: 800px){
body.page > .wrap {
width: auto!important;
margin: auto!important;
}
body.page > .wrap #page {
width: 460px;
margin-top: 20px;
margin-left: 240px;
}
body.page > .wrap #page .box-content {
width: 460px;
}
body.page > .wrap #page .box-content textarea{
width: 365px;
padding: 10px;
}
}
for other work, yes of course, I'll try to help.. :)
sly comments:
another question. how can I make the right rail stick on blog post details and page details. [[LINK href="http://thisisyoke.com/sustainable-web-design-yoke-approach"]]like this[[/LINK]]
and let me know what its worth.
Also with the addition to the footer answer provided above can I now use the widget section in the wp-admin to drag element into the footer? if so I can't seem to do it. Let me know if I missed a step there.