Joomla Templates Club 406,261 posts

[jtadesign Friend jtadesignJoin date: June 2013Posts: 15Downloads:1Uploads:0 Thanked: 1 times in 1 posts]

#187958

Hi
Im using the megamenu with each element of the meny having 4 columns with modules. Ive chosen the justify alignment, so the menyu block opens for the entire width. The problem is that the menu block with the columns and modules opens starting in the first element of the menu. This is not ideal, as the menu block should open starting in the web page itself (a bit more to the left, where the logo is), so the menu block is perfectly aligned to the page content. Im trying to achieve something as the following: http://www.olympic.org/

Ive tried to do this by adding in the custom.css:

.t3-megamenu .mega-align-justify > .dropdown-menu {
left: -225px !important;
}
@media (max-width: 768px) {
.t3-megamenu .mega-align-justify > .dropdown-menu {
left: 0 !important;
}
}

This is working well in my Mac, however the meny is slightly to the right in a PC or in an iPad. Also teh problem is that if I add a new element of menu, then all has to be changed again.

My question is: How can be done so the menu block with modules of the megamenu takes always the whole width of the content area (as in JUSTIFY alignment) but starting on the left and not in the first element of the menu, so the menu is always shown and not cut out?

Thank you

[jtadesign Friend jtadesignJoin date: June 2013Posts: 15Downloads:1Uploads:0 Thanked: 1 times in 1 posts]

#494858

Hi

Any help?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#494956

Hi,

Pls align JUSTIFY for your selected menu items, then set No to Optimize CSS & No to Development Mode in Template Manager.
And put your url here, I will check & help to correct the padding with neccessary css.

Leo

[jtadesign Friend jtadesignJoin date: June 2013Posts: 15Downloads:1Uploads:0 Thanked: 1 times in 1 posts]

#494986

I thought there was support when purchasing the template. But no answers

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#495022

Hi,

Can you follow my previous reply ? I will help you to adjust the mega menu style with necessary css.

Leo

[jtadesign Friend jtadesignJoin date: June 2013Posts: 15Downloads:1Uploads:0 Thanked: 1 times in 1 posts]

#495032

Thank you, Leo. The site is at http://www.worldtaekwondofederation.org
Id like the menu block to ocupy the content area so its outsid the page.

[jtadesign Friend jtadesignJoin date: June 2013Posts: 15Downloads:1Uploads:0 Thanked: 1 times in 1 posts]

#495058

Sorry, I meant so the menu block is not outside the page, just fits the exact web page content are from left to right

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#495078

Hi,

Pls try on these:
1. Open templatesja_fubixetcassets.xml, then add below line:

<file>css/custom.css</file>

after

<file>css/iefix.css</file>

2. Then attract my attached file to path: templatesja_fubixcss

* Your dropdown also covered entire width when I checked out on iPad.

Backup your site first before making changes.

Leo

---

Attachments:

1. 

1. custom.zip

[jtadesign Friend jtadesignJoin date: June 2013Posts: 15Downloads:1Uploads:0 Thanked: 1 times in 1 posts]

#495130

Thank you Leo
I already tried that solution. The problem with that is that it will look just fine in an iPad for example. However when displayed in a PC or a Mac it will look different, as the block is placer relative to the first menu item, and depending on the browser used the menu items are displayed in slight different positions. Also, if a new menu item is added by teh client, then the block will be placed differently.
Isnt there a different approach? So the block is placed through absolute positioning to the page or something?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#495322

Hi,

Pls try to add below extra codes into the end of custom.css file (attached in previous reply):

.t3-megamenu .mega.open > .mega-dropdown-menu, .t3-megamenu .mega.dropdown-submenu:hover > .mega-dropdown-menu {
display: block;
margin-left: 34px;
}

Leo

[jtadesign Friend jtadesignJoin date: June 2013Posts: 15Downloads:1Uploads:0 Thanked: 1 times in 1 posts]

#495336

Thank you, Leo
Thats not working. It doesnt make any difference. The thing is that the menu block should appear relative to page content or logo, NOT relative to menu, as changing the menu will affect the positioning, also depending on system (mobile, PC or Mac) the menu changes slightly it sposition as fonts are rendered differently.

Any way to place the menu block relativee to page content or logo on top left instead of simply reducing margin-left relative to first menu item?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#495442

Hi,

<blockquote>Any way to place the menu block relativee to page content or logo on top left instead of simply reducing margin-left relative to first menu item?</blockquote>
Well, lets try on this:

1. Remove your overriden css (below codes) in custom.css.

.t3-megamenu .mega-align-justify > .dropdown-menu {
left: -265px !important;
}

2. Put below codes into the custom.css:

.navbar .nav {
position: none !important;
}

.collapse {
position: none !important;
}

Hope it helps.

[jtadesign Friend jtadesignJoin date: June 2013Posts: 15Downloads:1Uploads:0 Thanked: 1 times in 1 posts]

#495638

Thank you Leo. I didnt work with “none” for me but it worked with “static”. Its great ! Thank you so much !

.navbar .nav {
position: static !important;
}

.collapse {
position: static !important;
}

1 user says Thank You to jtadesign for this useful post

1. phong nam

[Author]

Posts