Joomla Templates Club 406,261 posts

[andbeyond Friend andbeyondJoin date: November 2011Posts: 55Downloads:4Uploads:0 Thanks: 19 Thanked: 8 times in 1 posts]

#706386

I am trying to adapt the techzone template.

What I want to do is have the vertical menu display in all sizes above 768px. That is in the small medium and large layouts.

I have tried to follow the instructions in this post without success:
http://www.joomlart.com/forums/topic/is-it-possible-to-have-vertical-menu-in-normal-layout/

Can anybody suggest a way of doing it?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#706699

Hi,

It’s very hard to custom with your request but you can try to do this

+ Open templates/ja_techzone/css/custom.css file (create new if it does not exist) and add new rule

@media (min-width: 769px) {
.ja-vertical-menu .t3-header .logo {
position: fixed;
left: 0;
top: 40px;
width: 292px;
padding-top: 0px;
padding-bottom: 0px;
height: auto;
margin-top: 0;
margin-bottom: 0;
z-index: 2;
}
.ja-vertical-menu .t3-mainnav {
border: 0;
margin-bottom: 0;
border-radius: 0;
display: none;
/*padding: 296px 30px 48px;*/
padding: 100px 30px 48px;
display: block;
position: fixed;
left: 0;
top: 0;
width: 290px;
}
.ja-vertical-menu .t3-wrapper > .container {
margin-left: 292px;
}
.navbar-nav > li {
float: none;
}
.ja-vertical-menu .t3-mainnav .navbar-nav > li > a {
color: #9e9e9e
}
.ja-vertical-menu .navbar-nav > li > a {
padding-top: 8px;
padding-bottom: 8px;
}
.navbar-header {
display: none;
}
}


+ Open templates/ja_techzone/less/variables.less file

find and change

@grid-float-breakpoint: @screen-md-min;

to

@grid-float-breakpoint: @screen-sm-min;

+ Go to template manager -> JA Techzone template -> Compile Less to Css (remember to backup your site first)

Hope it helps

Regards

1 user says Thank You to Ninja Lead for this useful post

1. andbeyond

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#752595

Hi,

It’s very hard to custom with your request but you can try to do this

+ Open templates/ja_techzone/css/custom.css file (create new if it does not exist) and add new rule

@media (min-width: 769px) {
.ja-vertical-menu .t3-header .logo {
position: fixed;
left: 0;
top: 40px;
width: 292px;
padding-top: 0px;
padding-bottom: 0px;
height: auto;
margin-top: 0;
margin-bottom: 0;
z-index: 2;
}
.ja-vertical-menu .t3-mainnav {
border: 0;
margin-bottom: 0;
border-radius: 0;
display: none;
/*padding: 296px 30px 48px;*/
padding: 100px 30px 48px;
display: block;
position: fixed;
left: 0;
top: 0;
width: 290px;
}
.ja-vertical-menu .t3-wrapper > .container {
margin-left: 292px;
}
.navbar-nav > li {
float: none;
}
.ja-vertical-menu .t3-mainnav .navbar-nav > li > a {
color: #9e9e9e ;
}
.ja-vertical-menu .navbar-nav > li > a {
padding-top: 8px;
padding-bottom: 8px;
}
.navbar-header {
display: none;
}
}


+ Open templates/ja_techzone/less/variables.less file

find and change

@grid-float-breakpoint: @screen-md-min;

to

@grid-float-breakpoint: @screen-sm-min;

+ Go to template manager -> JA Techzone template -> Compile Less to Css (remember to backup your site first)

Hope it helps

Regards

1 user says Thank You to Ninja Lead for this useful post

1. andbeyond

[andbeyond Friend andbeyondJoin date: November 2011Posts: 55Downloads:4Uploads:0 Thanks: 19 Thanked: 8 times in 1 posts]

#719034

Thanks for the help Ninja Lead. Your suggestion has worked – the vertical menu is now available at small layout size.

However your fix seems to have affected the ‘mainbody’ so that it is not resizing as it should (some content remains outside the right hand side of the menu). Also the mega menu itself is displaying oddly.

This may all be a result of me applying lots of attempted fixes to the css and layouts for the template. I’m going to start again with a clean version of the template.

[andbeyond Friend andbeyondJoin date: November 2011Posts: 55Downloads:4Uploads:0 Thanks: 19 Thanked: 8 times in 1 posts]

#752871

Thanks for the help Ninja Lead. Your suggestion has worked – the vertical menu is now available at small layout size.

However your fix seems to have affected the ‘mainbody’ so that it is not resizing as it should (some content remains outside the right hand side of the menu). Also the mega menu itself is displaying oddly.

This may all be a result of me applying lots of attempted fixes to the css and layouts for the template. I’m going to start again with a clean version of the template.

[Author]

Posts