Joomla Templates Club 406,261 posts

[willanga Friend willangaJoin date: April 2015Posts: 7Downloads:52Uploads:0 Thanked: 2 times in 1 posts]

#208103

Thank you for the wonderful template JA Techzone. A quick question: is it possible to have the vertical menu in normal layout? I’d like to have the menu on the left side of the screen throughout also on a small screen.
Thanks

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#576122

Hi @willanga,

The answer is yes, you can but this task require lots of modifications in the code so I can only provide you with instruction.

1. First, open file templatesja_techzonecsstemplate.css

2. Look for CSS rules begin with “ja-vertical-menu” and you will see that they are all wrapped inside

@media (min-width: 1640px)

which mean the vertical menu only available in viewport larger than 1640px.

3. All you have to do is look for the code contains above CSS rules (both rules) then adjust to min-width to make it visible in smaller screen, for example change as below :

@media (min-width: 768px)

1 user says Thank You to Adam M for this useful post

1. mauriziomomix

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#642448

Hi @willanga,

The answer is yes, you can but this task require lots of modifications in the code so I can only provide you with instruction.

1. First, open file templatesja_techzonecsstemplate.css

2. Look for CSS rules begin with “ja-vertical-menu” and you will see that they are all wrapped inside

@media (min-width: 1640px)

which mean the vertical menu only available in viewport larger than 1640px.

3. All you have to do is look for the code contains above CSS rules (both rules) then adjust to min-width to make it visible in smaller screen, for example change as below :

@media (min-width: 768px)

1 user says Thank You to Adam M for this useful post

1. mauriziomomix

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#741107

Hi @willanga,

The answer is yes, you can but this task require lots of modifications in the code so I can only provide you with instruction.

1. First, open file templatesja_techzonecsstemplate.css

2. Look for CSS rules begin with “ja-vertical-menu” and you will see that they are all wrapped inside

@media (min-width: 1640px)

which mean the vertical menu only available in viewport larger than 1640px.

3. All you have to do is look for the code contains above CSS rules (both rules) then adjust to min-width to make it visible in smaller screen, for example change as below :

@media (min-width: 768px)

1 user says Thank You to Adam M for this useful post

1. mauriziomomix

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#576242

@willanga,

You can try with my below tweak:
1) Upgrade JA ACM Module to latest version.
2) Open file templates/ja_techzone/less/variables.less
replace

@screen-hd: @container-hd-desktop + @t3-mainnav-width + @grid-gutter-width;
with

@screen-hd: @container-large-desktop + @t3-mainnav-width + @grid-gutter-width;
replace

@container-large-desktop: ((1140px + @grid-gutter-width));
width:

@container-large-desktop: ((850px + @grid-gutter-width));

3) Open file templates/ja_techzone/less/style.less
replace

.ja-vertical-menu {
.t3-wrapper {
> .container {
> .row {
@media screen and (min-width: @screen-hd) {
padding-top: @t3-header-height;
}
}

@media (min-width: @screen-hd) {
margin-left: @t3-mainnav-width + 2px;
}
}

.container {
@media screen and (min-width: @screen-hd) {
width: @container-hd;
}
}
}
}

with:


.ja-vertical-menu {
.t3-wrapper {
> .container {
> .row {
@media screen and (min-width: @screen-hd) {
padding-top: @t3-header-height;
}
}

@media (min-width: @screen-hd) {
margin-left: @t3-mainnav-width + 2px;
}
}

.container {

@media (min-width: (@container-hd-desktop + @t3-mainnav-width + @grid-gutter-width)) {
width: @container-hd;
}
}
}
}


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

5) Go to Front End, refresh your site, it will have vertical menu in 1200px or higher resolution screen.

[willanga Friend willangaJoin date: April 2015Posts: 7Downloads:52Uploads:0 Thanked: 2 times in 1 posts]

#576846

Thank you very much! I’ll try your suggestions:)

[Author]

Posts