Use HTML tag to bold only some words of a menu item

Question

I am trying to use a HTML tag in my menu item in order to get a menu like this:

Parent menu

• My fist submenu is in bold
• My second submenu is emphasized

If I enter for instance the <strong> tag in the menu title field, it gets stripped out when I save the page.

But if I enter [b]My fist submenu[/b] is in bold, the [b] tag isn't stripped out.

Is there a way to tell Joomla to replace [b] by a <strong> tag?

Answer 1

You have a few options here.

Option 1 would be to do what @Bakual has recommended. I've never tried using ReReplacer but the extension is developed and maintained by a very popular and well praised developer, therefore it is bound to do the job well.

Option 2:

You could develop a small plugin and targets the menu items and replaces [b] with a <strong> tag using something like this:

$item = //code to get menu items
$tag = array(
    '/\[b\](.*?)\[\/b\]/is',
);
$replace = array(
    '<strong>$1</strong>',
);
$output = preg_replace($tag, $replace, $item);

Option 3

The beloved jQuery method which may I add is not the preferred method however might be the easiest. Something similar to this:

$('.nav li a').html(function (i, html) {
     return html.replace(/(\w+\s\w+\s\w+)/, '<strong>$1</strong>')
});

Hope this helps

Answer 2

You could use ReReplacer from NoNumber (http://www.nonumber.nl/extensions/rereplacer) to replace such things on each pageload. However I would not recommend it in this case.

May I suggest a different approach to solve this? In the menu item options, you can set a "Link CSS Style" in the "Link Type" tab. Add there a CSS class and apply the formatting to this class instead. Like add the CSS class bold there and define it in your template CSS file as

.bold {
    font-weight:bold;
}

That should do the trick without needing HTML in your menu item.

Answer 3

Have you ever used Maximenu CK? http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/11578

It has a ton of extra functionality, which you probably won't need, but you can set it to be a stripped style so you can style the css yourself. Anyway, the cool part of this is it allows you to separate menu item text with pipe breaks and it will automatically add a class to the half that comes after the pipes.

My Menu||Item

Then you style the entire thing to match what you want for the "My Menu" section, then you override those styles using the class that's been applied to the "Item" section.

Very useful. Incidently, Maximenu also has mobile menu integration, description fields, and a few other cool options.

Mobile plugin can be found here: http://extensions.joomla.org/extensions/extension-specific/extensions-specific-non-sorted/22662

Answer 4

Are you sure you should be using the strong tag?

strong should not be used to make text bold. Ditto the em tag. em is used to apply emphasis (as read) to a piece of text not to render it in an italic font. If what you want is for some of the text of your menu item to appear in a heavier font-weight, then b is a far better choice.

However, to have full control over the content of menu items I can recommend the JBType plugin from Joomla Bamboo; http://www.joomlabamboo.com/joomla-extensions/jb-type-joomla-typography-plugin

Using it you can simply enter your menu title like:

A menu item with {jb_i}italics{/jb_i}

And the plugin will render the output with em tags.

Answer 5

As a pure css solution, you can use nth-of-type() to target the submenu items.

For my local test, these selectors worked for me:

li.deeper > ul.nav-child > li.deeper:nth-of-type(1) > a {
    font-weight: bold;
}

li.deeper > ul.nav-child > li.deeper:nth-of-type(2) > a {
    font-style: italic;
}

My screenshot shows that:

• The first submenu is bold
• The second submenu is italic
• The third submenu has no custom style applied

These selectors may or may not work "right out of the box" for your project -- results may vary depending on your menu structure and intended styling for other submenus. Just use your browser's developer tools to inspect elements and determine the right classes and hierarchy to target the desired elements.