Joomla Templates Club 406,261 posts

[meisner Friend meisnerJoin date: November 2010Posts: 27Downloads:1Uploads:3 Thanks: 7 Thanked: 3 times in 1 posts]

#695055

I would like to make the menu change to the mobile or collapsed view when shown on the slim/verticle tablet view.
I can’t seem to find any way to do this in the settings, so i’m thinking that i have to go into the files shown in some of the documentation files. But i wasn’t able to find any help for the one page template, so i hope you can help!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#695480

Hi meisner,

Let me check and will get back to you.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#750676

Hi meisner,

Let me check and will get back to you.

[meisner Friend meisnerJoin date: November 2010Posts: 27Downloads:1Uploads:3 Thanks: 7 Thanked: 3 times in 1 posts]

#704906

Any news on this? I would love to get this fixed before sending the link to anyone.

[meisner Friend meisnerJoin date: November 2010Posts: 27Downloads:1Uploads:3 Thanks: 7 Thanked: 3 times in 1 posts]

#751569

Any news on this? I would love to get this fixed before sending the link to anyone.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#704920

I’m terribly sorry for this lateness, somehow I missed it.

You will need to change in LESS file in order to have collapse button in tablet view (like mobile view). Here is the tweak:
– Go to file: root/templates/ja_onepage/less/variables.less
– Find the declaration for Navbar, you will see this rule:

@navbarCollapseWidth: 768px;


Just change 768px to the screen size which you want to show collapse button.

– If your site is in Development mode (in template manager section), the change above will affect immediately on your site. But if Development mode is disabled, you will need to backup all current css files first and in template manager section, hit the button <>LESS to CSS to compile less to css. (Remember to backup css files because when compiling less to css, the existing css files will be overridden).

1 user says Thank You to Saguaros for this useful post

1. meisner

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#751583

I’m terribly sorry for this lateness, somehow I missed it.

You will need to change in LESS file in order to have collapse button in tablet view (like mobile view). Here is the tweak:
– Go to file: root/templates/ja_onepage/less/variables.less
– Find the declaration for Navbar, you will see this rule:

@navbarCollapseWidth: 768px;


Just change 768px to the screen size which you want to show collapse button.

– If your site is in Development mode (in template manager section), the change above will affect immediately on your site. But if Development mode is disabled, you will need to backup all current css files first and in template manager section, hit the button <>LESS to CSS to compile less to css. (Remember to backup css files because when compiling less to css, the existing css files will be overridden).

1 user says Thank You to Saguaros for this useful post

1. meisner

[meisner Friend meisnerJoin date: November 2010Posts: 27Downloads:1Uploads:3 Thanks: 7 Thanked: 3 times in 1 posts]

#704998

Hey there, thank you for the reply!

It does work, sorta, but if i set it to what i need, which seems to be at a very high 1200px, the mobile or collapsed version of the menu seems to act up. The button is black and is placed in the right side instead of the left.

[meisner Friend meisnerJoin date: November 2010Posts: 27Downloads:1Uploads:3 Thanks: 7 Thanked: 3 times in 1 posts]

#751636

Hey there, thank you for the reply!

It does work, sorta, but if i set it to what i need, which seems to be at a very high 1200px, the mobile or collapsed version of the menu seems to act up. The button is black and is placed in the right side instead of the left.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#705003

You can try adding style below into the file: root/templates/ja_onepage/navigation-responsive.less

@media (max-width: 1200px){
.t3-mainnav, #ja-header .span10 {
float: left;
}
}
@media (min-width: 768px) and (max-width: 1200px) {
.t3-mainnav {
margin-left: -125px;
}
}

you can change to your desired value

1 user says Thank You to Saguaros for this useful post

1. meisner

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#751641

You can try adding style below into the file: root/templates/ja_onepage/navigation-responsive.less

@media (max-width: 1200px){
.t3-mainnav, #ja-header .span10 {
float: left;
}
}
@media (min-width: 768px) and (max-width: 1200px) {
.t3-mainnav {
margin-left: -125px;
}
}

you can change to your desired value

1 user says Thank You to Saguaros for this useful post

1. meisner

[meisner Friend meisnerJoin date: November 2010Posts: 27Downloads:1Uploads:3 Thanks: 7 Thanked: 3 times in 1 posts]

#705005

That fixes the positioning issue, but the menu still bugs out, turns back instead of white and displays the first menu item in a strange fashion. It’s not until you get down to a phone size that the menu starts to look normal again.

[meisner Friend meisnerJoin date: November 2010Posts: 27Downloads:1Uploads:3 Thanks: 7 Thanked: 3 times in 1 posts]

#751643

That fixes the positioning issue, but the menu still bugs out, turns back instead of white and displays the first menu item in a strange fashion. It’s not until you get down to a phone size that the menu starts to look normal again.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#705244

You can open above file: root/templates/ja_onepage/navigation-responsive.less

At the beginning of file, you will see this rule:


//
// TABLET
// ------------------------------------------------------------- @media ( max-width: 1024px ) {
.t3-mainnav .navbar .nav > li > a {
margin: 0px 7px;
}

.t3-mainnav .dropdown-menu {
right: 0px !important;
left: auto !important;
}

.t3-mainnav .dropdown-menu .dropdown-menu {
left: -163px !important;
right: auto !important;
}
}


you can add additional rule as below:


//
// TABLET
// ------------------------------------------------------------- @media ( max-width: 1024px ) {
.t3-mainnav .navbar .nav > li > a {
margin: 0px 7px;
}

.t3-mainnav .dropdown-menu {
right: 0px !important;
left: auto !important;
}

.t3-mainnav .dropdown-menu .dropdown-menu {
left: -163px !important;
right: auto !important;
}
.t3-mainnav .navbar .btn-navbar {
margin: 15px 0 (@baseLineHeight / 2) 20px;
background: none;
box-shadow: none;
border: solid 1px @grayDarker;
}
}


1 user says Thank You to Saguaros for this useful post

1. meisner

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#751780

You can open above file: root/templates/ja_onepage/navigation-responsive.less

At the beginning of file, you will see this rule:


//
// TABLET
// ------------------------------------------------------------- @media ( max-width: 1024px ) {
.t3-mainnav .navbar .nav > li > a {
margin: 0px 7px;
}

.t3-mainnav .dropdown-menu {
right: 0px !important;
left: auto !important;
}

.t3-mainnav .dropdown-menu .dropdown-menu {
left: -163px !important;
right: auto !important;
}
}


you can add additional rule as below:


//
// TABLET
// ------------------------------------------------------------- @media ( max-width: 1024px ) {
.t3-mainnav .navbar .nav > li > a {
margin: 0px 7px;
}

.t3-mainnav .dropdown-menu {
right: 0px !important;
left: auto !important;
}

.t3-mainnav .dropdown-menu .dropdown-menu {
left: -163px !important;
right: auto !important;
}
.t3-mainnav .navbar .btn-navbar {
margin: 15px 0 (@baseLineHeight / 2) 20px;
background: none;
box-shadow: none;
border: solid 1px @grayDarker;
}
}


1 user says Thank You to Saguaros for this useful post

1. meisner

[Author]

Posts