Right Align Off Canvas / Mobile Menu In Orbit Template
Stuart Clark
PLEASE SEE SCREENSHOTS TO UNDERSTAND ISSUE
When using Orbit template, the OffCanvas menu is not correctly right aligned (in terms of the menu icon display); it is especially worse after JoomShaper did some custom work on my site in ticket https://www.joomshaper.com/forum/question/33540
Now - when viewing on a desktop the site looks OK. When viewing on a PORTRAIT MOBILE the site looks reasonable, but when viewing on a LANDSCAPE MOBILE, PORTRAIT TABLET or LANDSCAPE TABLET the OffCanvas menu / user login icon & cart icon are NOT aligned correctly.
See: https://prnt.sc/VmUJJbHnxh44 <-alignment is OK, but not quite far enough right
See: https://prnt.sc/-h_I_iHtHhI7 <-alignment is NOT OK - needs to move FAR to the right
Toufiq
Accepted AnswerHi there,
I didn't modify your layout. I just solved this issue. That was two months ago.
Edit "user Menu" Items Shown Under The User Icon Of Orbit Template
https://www.joomshaper.com/forum/question/33540
Provide me login permission to check the issue. I will check & get back to you soon.
Best regards,
Toufiqur Rahman (Team Lead, Support)
Stuart Clark
Accepted Answer@toufiq,
Maybe it wasn't you, but someone altered the template to change how the user icon is displayed; as well as you telling me which PHP file to edit to change the shown options.
The timescale doesn't matter - I'm now trying to fix this issue. (talking of timescales - it is very disappointing this issue was ignored for 5 days)
Login details are below:
Stuart Clark
Accepted AnswerI've agreed your IP address - you should now be able to change the template
Stuart Clark
Accepted AnswerThanks - it still isn't quite right though.
I've tried editing the col-<number> a little and it's better at col-8, but still not correct (see screenshot). Col-9 overflows the menu on both mobile and desktop.
Is this not a case of the menu not force aligning from the right rather than using the column number to create extra space from the left?
Screenshot of how it looks now (col-8): https://prnt.sc/vOF3UUjNMCkP
Stuart Clark
Accepted AnswerI've been playing with this more, by comparing various header files etc.
What I've currently got is the best yet; but I actually now need a little padding to the right of the menu hamburger in mobile / tablet mode (see screenshot) https://prnt.sc/PSDHcCVa1d3L
What I've done is set:
$logoClass = 'col-auto flex-auto';
$menuClass = 'col-auto flex-item-right ';This makes the menu and offcanvas items move as I'd want, but as I say - it needs a little padding after the hamburger menu. Is there a way we can achieve that??
Toufiq
Accepted AnswerPlease check now. I have added this css code inside the template settings custom css box.
div#sp-menu {
padding-left: 0px;
padding-right: 10px;
}