Joomla Templates Club 406,261 posts

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#201215

(Question #1)

How do can I freeze the page contents while the mobile menu is active, so that user scrolls up and down the menu while the page remains unmoved (similar to JA Nuevo)

(Question #2)

How can I move the menu from the left side to the right to improve my sites UX (menu icon & off canvas navigation)?

Note: I have already altered the Follow-Us module (to render only two icons), I would like the menu to be positioned to the right of the modified Follow-Us module.

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

#549244

Hi,

1. Unfortunately, the Off-Canvas menu of JA Argo was not designed to work that way.

2. Could you please provide your site url so I can have a look ? In addition, please temporary disable CSS Compression so I can take a look at the code as well.

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#549398

The site is currently private…can I send you a Direct Message?

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

#549478

Hi,

Yes, you can send you site detail via private message (just click my username and you will see a button to send private message).

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#549541

Done…I sent a message

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

#549642

Hi,

Please open root_folder/templates/ja_argo/css/custom.css (if you don’t have this file, just create a new one) then add the code below :

.t3-mainnav .navbar .btn-navbar {
float: right;
margin: 0;
}
.head-search-link,
.head-search-link:link {
right: 50px;
border-right: 1px solid #4f3c81;
} @media (max-width: 767px) {
.logo {
margin-left: 20px;
}
.head-social {
right: 50px;
}
.off-canvas-enabled body > * {
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
-o-transform: translateX(-250px);
transform: translateX(-250px);
}
.off-canvas body {
overflow: hidden;
}
}

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#549659

I already have a custom.css file. I added the you provided. I moved the menu icon to the right side, but when clicked, the off-canvas slides out, but there are no links, just blank white space.

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

#549661

Hi,

My bad, just add 1 more at at the end of custom.css file as below and you will see the Off-Canvas menu there :

.off-canvas #off-canvas-nav {
left: auto;
right: -250px;
}

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

1. joomdude808

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#549779

It worked…THANK YOU 🙂

[Author]

Posts