Joomla Templates Club 406,261 posts

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#185824

Hello

when we use “text separator” in a menu item, all css are gone. See screenshot for more understanding (example with ‘Explore2’ menu).

We tried this solution :

#mainnav .menu > li > a , #mainnav .menu > li > span
from this thread :
http://www.joomlart.com/forums/topic/top-menu-menu-item-type-text-separator/ but it is not working.

If someone have a idea to fix this ?

Thank in advance.

---

Attachments:

1. 

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

#486481

Hi dieudonne,

Here is my guide on your concern:
1. Go to administrator >> Extensions >> Template Manager >> Current template style >> Disable Development Mode. Now you site will load CSS files, instead of LESS files.

2. On your server, open templatesja_merocssbootstrap.css. Then replace lines:

[PHP].dropdown-toggle {
*margin-bottom: -3px;
}[/PHP]

with lines

[PHP]
.dropdown-toggle { // This css class make Explore <span> has same style like <a>
background-color: transparent;
border-top: 0;
font-family: ‘open_sans_lightregular’;
font-size: 18px;
padding: 10px;
text-shadow: none;
}

.dropdown.mega.sub-hidden-collapse { // This additional class make Explore menu stay in same line with other menus
padding-top: 10px;
}

[/PHP]

Regards,
—
Leo

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#486499

Hello,

thank for your answer, but it change nothing. (all caches cleared)
The menu item look the same.

Do you have a other idea ?

Thank in advance.

---

Attachments:

1. 

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

#486508

Hi đieuonne,

Did you try on my 1st guide:

1. Go to administrator >> Extensions >> Template Manager >> Current template style >> Disable Development Mode. Now your site will load CSS files, instead of LESS files.

>> You need to set No to Enable Development mode in Template Manager. Now, you just need to customize CSS files. You need to do this step before trying on 2nd step.

If you still face this problem, please PM me with your site URL ? I’ll show you what and where to fix it on your site.

Regards,
—
Leo

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#486747

Hello,

thank for your help.
I did exactly what you wrote. But sorry it didn’t work.

I just PM you with access code.

Thank in advance.

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#486881

Hello,

any news about this ?

I tried again, but it still the same. Nothing changes…

Thank in advance for any help.

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#486931

@ Leo Burnetts :
Hello, did you receive my PM ?

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

#486958

Hi dieudonne,

I did fixed this issue on your site. And I want to correct my wrong guide above, actually, You need to apply this below codes to
<blockquote>templatesja_merocsscustom.css</blockquote> with:


.ja-mainnav .navbar .nav > li > a ,.ja-mainnav .navbar .nav > li > span.separator{
font-family: 'NovecentowideBookRegular';

}

.ja-mainnav .navbar .nav > li > span.separator {
border-top: 0;
font-family: 'open_sans_lightregular';
font-size: 18px;
padding: 9px 15px;
text-shadow: none;
text-transform: uppercase;
display: block;
}


* But, there is an extra issue on you site that I need you ftp to correct it. Pls see my snapshot here:

Regards,
—
Leo

---

Attachments:

1. 

1 user says Thank You to phong nam for this useful post

1. dieudonne

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#486998

Excellent,

thank you very much for this great tip !

And is it possible to keep the little arrow on the right ?

I just PM you with the new access code (and ftp access).

Than in advance for your help

UPDATE : and the menu is not in bold when it is selected… if you have a idea to fix this ?

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

#487024

Hi dieudonne,

The seconde issue no longer exists on your site. In order to make menu bold, you need to open: templatesja_merocsscustom.css, then insert line:

.navbar .nav > li {
float: left;
font-weight: bold;
}

Regards,
—
Leo

1 user says Thank You to phong nam for this useful post

1. dieudonne

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#487235

Hello,

thank for your answer, but my first question was <blockquote>And is it possible to keep the little arrow on the right ?</blockquote>

So is it possible or no ?

And my second question was <blockquote>and the menu is not in bold when it is selected…</blockquote>
I said when the menu is selected, like the other menu who don’t have “text separator” selection.

Do you have a idea to fix this ?

Thank in advance.

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

#487409

Hi dieudone,

Sorry for my lack of attention, I did correct the Main menu as you want for Text Separator menus. Here is my steps:

– Bold menus (Text separator menus) is selected:

On your server, open <blockquote>templates/ja_mero/css/custom.css</blockquote>
then replace lines:

.navbar .nav li.dropdown.open > .dropdown-toggle separator, .navbar .nav li.dropdown.active > span.separator, .navbar .nav

li.dropdown.open.active > .dropdown-toggle separator, .navbar .nav li.dropdown.open.active > .dropdown-toggle separator{

color: #1BA1E2;
font-family: 'NovecentowideLightBold';

}

with lines:

.navbar .nav li.dropdown.open > .dropdown-toggle separator, .navbar .nav li.dropdown.active > span.separator, .navbar .nav

li.dropdown.open.active > .dropdown-toggle separator, .navbar .nav li.dropdown.open.active > .dropdown-toggle separator{

color: #1BA1E2;
font-family: 'NovecentowideLightBold'; // Bold the menus is selected

}

– Arrow again for Text Separator which have child menus.

Open <blockquote>/templates/ja_mero/css/custom.css</blockquote> then insert below lines at the end of file:

.t3-megamenu .nav .caret, .t3-megamenu .nav > .dropdown > .dropdown-toggle.caret {
display: block;
float: right;
position: absolute;
right: 0;
top: 10px;
}

Open <blockquote>plugins/system/t3/includes/menu/megamenu.tpl.php</blockquote> at 240th line then replaces lines:

$class .= " separator";

return "<span class="$class">$icon$title $linktype</span>";

with lines

if($item->dropdown && $item->level < 2){
$vars['class'] .= ' dropdown-toggle';
$vars['dropdown'] = ' data-toggle="dropdown"';
$vars['caret'] = '<b class="caret"></b>';
}
else {
$vars['linktype'] = $item->title;
}

$class .= " separator";

return "<span class="$class">$icon$title $linktype</span>".$vars['caret'];

Regards,
—
Leo

1 user says Thank You to phong nam for this useful post

1. dieudonne

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#487474

Hello,

thank you very very much for this and for all your explanations.
I like to understand.

I’ll put these into my book for next time.

Thank you again for your great help.
Regards.

[Author]

Posts