Link to home
Start Free TrialLog in
Avatar of ITsolutionWizard
ITsolutionWizardFlag for United States of America

asked on

HTML Template Admin

I use html template: https://cssauthor.com/bootstrap-admin-templates/
and you can download here https://github.com/chaegumi/sb-admin-2-sammyjs

My question is

When the url structure like Domain/ParentApp/ChildrenApp/ - The left side nav menu is all expanded out.
When the url structure like Domain/ParentApp/ - The left side nav menu is working okay.

Do you know how to fix it?
Avatar of ITsolutionWizard
ITsolutionWizard
Flag of United States of America image

ASKER

i think the url is here https://github.com/onokumus/metisMenu for your reference
Any helps?
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank You Scott.
If you do not mind, please try to download the template and try out. It is free.
I did try your advice but still not working

I don't have time do that right now. It would be easier to help you if you created a test on your server and linked to it for us to view. 


I can show you some examples of what I am talking about that should help.


Start with  https://github.com/onokumus/metismenu/blob/master/demo/mm-event2.html

Line 21  <script src="https://unpkg.com/metismenu"></script>

Try and surf to that link and you end up at  https://unpkg.com/metismenu@3.0.5/dist/metisMenu.min.js. That is probably the actual link that should be at. 


Lines 597 and 598

<script src="https://cdn.jsdelivr.net/npm/jump.js"></script>
<script src="assets/js/mm-event2.js"></script>

Open in new window

Notice the first line is for the full link. No matter what your own url structure is, jump.js will always be available.  This will not be true for the 2nd link.  That may work for yourdomain.com if the assets folder is top level. But once your structure goes to yourdomain.com/somethingelse/ it will break because it is amused that assets/ is at the same level.  


What you need to do is give the full link or absolute.  In other words


<script src="/assets/js/mm-event2.js"></script>

Open in new window

or

<script src="https://yourdomain.com/assets/js/mm-event2.js"></script>

Open in new window



Check your html to make sure that all the js and css files are either full links or absolute. 

Hi,

I would recommend to use  AdminLTE instead https://github.com/ColorlibHQ/AdminLTE
I'm using it since long time, the community is active and there is a new version with Bootstrap 4

Metis menu is an old script and was not working very well I tried to use it long time ago, so I don't recommend to loose your time on it.

Menu is one of the most complicated element it required Javascript and CSS and it can be hard to fix.

If you have a budget 35$
I would recommend to buy this template (this one is very active and popular)
https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469

While a good suggestion, that does not help in the matter and it will be the same issue.


The takeaway is you have to adjust the links to your linked css and js files if you use the demo html files. 

Hi,

Do you see any errors into the browser console right-click / inspect ?

If everything is fine except the menu position check if the menu use Localstorage or Cookies for the position...
You can set localstorage or cookie to use path so you can have a menu state for each domain...

Maybe this is because you use caplocks in URL make sure the JS and CSS links have the caplocks too
Domain/ParentApp/ChildrenApp/

Or what you can do is to include the scripts using PHP  from a place that is working fine
<?php 
	
	include '.../header.php'; 
	
?>

Open in new window

lenamtl, this is not a php topic, it is html. 


What you are proposing in your code will open up for another set of issues that will depend on how include path is set up. I think this just confuses the issue.


This is an issue about linking css and js files using relative vs absolute paths.