menu like in JM Crafts in full width screen

Hope my answers below will be of help.

1. To change menu like JM-Crafts, you can edit file "../skin/frontend/default/jm_sporty/joomlart/jmmegamenu/css/jmmegamenu.css":
line 137:

Code:

	.jm-megamenu li.haschild-over .childcontent, 
	.jm-megamenu li.haschild:hover > .childcontent, 
	.jm-megamenu li.mega li.haschild-over .childcontent, 
	.jm-megamenu li.mega li.mega li.haschild-over .childcontent, 
	.jm-megamenu li.mega li.mega li.mega li.haschild-over .childcontent, 
	.jm-megamenu li.mega li.mega li.mega li.mega li.haschild-over .childcontent, 
	.jm-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .childcontent {
		left: 0;
	}

2. You can replace background and text color at once for all menus by base theme in admin. Please refer to the following link to fix them:
http://www.joomlart.com/documentatio…jm-sporty#sec7

Thanks a lot for your quick reply.
Actually I can not get the needed result by following your instructions.
1. I need menu popup at the leftmost edge of the screen not at the beginning of the menu. ex Crafts menu is starting at the leftmost edge, but following your instruction I can only move starting point bellow my logo.
2. Through base theme I can change the header background image or color but not the color inside menu. By changing for example through base theme, the header background to grey, the rest of the popup and the column separators, still in black.
Probably I shall make the changes to jmmegamenu.css. But is it possible to change color at once with a declaration at the beginning of the css file?

Hi izyshoes,

The idea of update style Mega menu of your site same as our JM crafts is great but this needs customization of not only header area but also the basetheme extend settings . It is not a simple task as a result we can not give out the solution here.
If you want us to handle this , please consider to submit a tweak (http://www.joomlart.com/tweak), we will assist upon receipt of your inquiry.

Thank you for your answer.
At this moment I do not want to make changes that could give me troubles to upgrade to newer versions.
Regarding color, I will make the changes one by one in the css file.
But could you tell me what is the code to move the menu leftmost edge to the screen leftmost edge?

@ izyshoes,

It would be best if you can provide me with screenshot(s) so that I can understand better what you are trying to achieve.

@ Sherlock Holmes

Thank you again for your help.

Here is a screenshot of the menu of crafts theme that is showing what I want to achieve as visual result when my menu pops-up.
Attachment 33553

I need the menu to start at the leftmost edge of the browser instead of just bellow of my logo.

To change the menu like JM-Crafts, you can edit the ../skin/frontend/default/jm_sporty/css/styles.css file:

At line 236:

Code:

#ja-header .main .inner {
    line-height: normal;
    padding: 0;
}

At line 574:

Code:

#ja-mainnav {
    float: left;
    padding: 0;
}

At line 486:

Code:

#ja-search {
    background: none repeat scroll 0 0 #292929
    border: 1px solid #2B2A2A
    border-radius: 15px;
    float: right;
    height: 28px;
    margin: 17px 0 0;
    width: 210px;
}

Hope that helps.

Thanks a lot for your help Lee Seoki,
but unfortunately with those change I have not the requested change.
By following your instruction I am just arriving to lead the leftmost edge of menu to the leftmost edge of the browser.
The difference with Craft menu is that we have a padding to left and right of the screen regardless the width of menu or screen.
I mean the content of the menu still positioned at the center of the screen and only background is going to left and right.
Could you imagine what is the code to have the result that I need?
Anyway your help is highly appreciated

@ IzyShoes,

Please correct me if I am wrong, you need to customise the menu as per this attached image:
Attachment 33688

If so, please follow the post #8 on this thread.

If it does not help, I can help to update directly on your site.

@ Lara Croft,
thanks a lot for your help.

Actually by applying the code change of post #8, all my menu is moving to the left of the screen instead of padding the space between my menu and the left edge of the screen.(like the screenshot of post #7)
I mean, my menu shall still centered in the screen instead of moving left.
additionally there is no padding to the right.
Here bellow a screenshot of what is happening by applying the changes form post#8
Attachment 33687

To change the menu like JM-Crafts, you can edit files

1. File ../skin/frontend/default/jm_sporty/css/styles.css:

At line 236:

Code:

#ja-header .main .inner {
    line-height: normal;
    padding: 0;
}

At line 574:

Code:

#ja-mainnav {
    float: left;
    padding: 0;
}

At line 486:

Code:

#ja-search {
    background: none repeat scroll 0 0 #292929
    border: 1px solid #2B2A2A
    border-radius: 15px;
    float: right;
    height: 28px;
    margin: 17px 0 0;
    width: 210px;
}

2. File ../skin/frontend/default/jm_sporty/joomlart/jmmegamenu/css/jmmegamenu.css:
line 145:

Code:

.jm-megamenu li.haschild-over .childcontent, 
.jm-megamenu li.haschild:hover > .childcontent,
.jm-megamenu li.mega li.haschild-over .childcontent, 
.jm-megamenu li.mega li.mega li.haschild-over .childcontent, 
.jm-megamenu li.mega li.mega li.mega li.haschild-over .childcontent, 
.jm-megamenu li.mega li.mega li.mega li.mega li.haschild-over .childcontent, 
.jm-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .childcontent {
	background: #F5F5F5
	box-shadow: 0 5px 3px 0 rgba(0, 0, 0, 0.1);
	left: 0;
	width: 100%;
}

line 300:

Code:

.jm-megamenu .childcontent-inner {
    background: #F5F5F5
    margin: 0 auto;
    padding: 20px 0;
}

Please see screen short for result at my end:

Attachment 33694

this is exactly what I need.
I will do the changes immediately.
Thanks a lot for your help.