Joomla Templates Club 406,261 posts

[ArtisanWeb Friend ArtisanWebJoin date: May 2012Posts: 14Downloads:13Uploads:3]

#177728

Hello,

I have two sites that I’ve built with puresite: http://king.artisanwebandprint.com and http://law.artisanwebandprint.com. Overall I’m liking the template but I’m having a problem when I drag my browser size (width) from full desktop to the next size down (which I’m calling tablet). The menu breaks and I get a double menu which takes up a huge amount of space at the top and looks pretty bad. I’ve upgraded the template to the new release 1.0.1 to see if that would fix it. Here’s a screenshot:

Desktop View:
http://screencast.com/t/1TuMCgoR

Tablet View on a desktop – shortened the browser preview width:
http://screencast.com/t/u8gKNiAB

Phone View – shortened the browser preview width:
http://screencast.com/t/4kosb0HFR

The same thing happens on both websites but does not happen on your demo. I have made some small CSS changes to the menus to update color, but nothing with margins (left to right – one mod to center the menu top to bottom), etc.

/***************—————Customizations—————****************/

.ja-megamenu ul.level0 > li.active, .ja-megamenu ul.level0 li.over {
border-color: #bd8b03
}
.ja-megamenu ul.level0 li.over > a.mega {color: #bd8b03}

.ja-megamenu ul.level0 li.active > a.mega {
color: #bd8b03 !important;
}
.ja-megamenu ul.level0 li.mega a.mega {margin-top: 8px;} /**centers text top to bottom***/
.ja-megamenu ul.level0 > li.mega {border-bottom: 5px solid white;}
.ja-megamenu ul.level0 > li.active {border-bottom: 5px solid #bd8b03}
.ja-megamenu ul.level0 > li.over {border-bottom: 5px solid #EBDCB2 border-top: 5px solid #EBDCB2}
.ja-megamenu .childcontent .ja-moduletable img,
.ja-megamenu ul.level0 li.mega a img {
border: 5px solid #bd8b03
}

Thanks,

Dawn

[cssyeah Moderator cssyeahJoin date: June 2006Posts: 653Downloads:73Uploads:15 Thanked: 121 times in 81 posts]

#456247

Hi Globox,

I have checked your website on desktop, tablet and mobile. It have some problem the same your picture. I think that you have to many menu item, so when you view on table the menu will be broken. I have two solutions for you.

1. You remove some of the menu items.
2. You need restyle the main menu.

Thanks.

[ArtisanWeb Friend ArtisanWebJoin date: May 2012Posts: 14Downloads:13Uploads:3]

#457878

Hello,

I would like to use option 2. Could you please send me the CSS to basically tell the browser that when the viewport is less than 970 pixels to convert the menu to the “Navigation” style which will work fine on the tablet.

Thanks,

Dawn

[digimax001 Friend digimax001Join date: August 2012Posts: 19Downloads:0Uploads:5 Thanked: 2 times in 1 posts]

#466061

I would like to know this as well.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#466181

I would like to clarify that we do not provide customizations services because of our limited resources. You can find an expert to have the project done via a reliable freelance site: http://www.joomlancers.com, another network of JoomlArt. I personally recommend as thousands of projects have succeeded on the site.

However, your idea is so interesting and it will be recorded to our checklist for further reference.

Let me know if you need any other assistance.

[Author]

Posts