Since Uncode version 2.8.0, two new HTML areas that can be used to insert additional elements to the menu have been introduced in Theme Options → Navbar → Additional, screenshot ;

Thanks to these fields, it is possible to add contact information, emails, opening hours, buttons, free text, etc. Note that these are entirely free HTML fields because each user's needs differ.

Uncode applies only the Skin and hover colors (the menu hover colors) in these fields.

The Menu Extra HTML option is available with the Overlay, Off Canvas, and Lateral menus; the Menu Mobile Extra HTML option is available with Centered and Off-Canvas mobile menus.

We offer two separate fields because it might be helpful for some users to show different information from desktop to mobile. You can duplicate the customization if you use the same additional information on desktop and mobile.

NB. Please note that this option is designed to add simple additional details to the menu, and not inserting complex HTML elements may not be compatible.

Following are sample HTML shortcodes that you can use:

Menu Extra HTML

Example 1

<p class="font-weight-menu" style="font-size:2vh;"><a href="mailto:info@yoursite.com">info@yoursite.com</a></p>

Example 2

<p style="font-size:20px;" class="font-weight-menu">Contact</p><p style="margin-top: 9px; font-size:20px;"><a href="mailto:info@yourwebsite.com">info@yourwebsite.com</a><br>+1 (555) 123-4567</p>

Example 3

<p style="font-size:18px;" class="font-weight-menu">Contact</p><p style="margin-top: 9px;"><a href="mailto:info@yourwebsite.com">info@yourwebsite.com</a><br>+1 (555) 123-4567<br>New York, NY 10001, USA</p>

Example 4

<b>Email</b><br><a href="mailto:info@yourwebsite.com">info@yourwebsite.com</a><br><br>
<b>Phone</b><br>+1 (555) 123-4567<br><br>
<b>Location</b><br>123 Main Street<br>New York, NY 10001, USA

Menu Mobile Extra HTML

Example 1

<p style="font-size:4vw;" class="font-weight-menu">Contact</p><p style="margin-top: 9px;"><a href="mailto:info@yourwebsite.com">info@yourwebsite.com</a><br>+1 (555) 123-4567</p>

Example 2

<b>Email</b><br><a href="mailto:info@yourwebsite.com">info@yourwebsite.com</a><br><br>
<b>Phone</b><br>+1 (555) 123-4567<br><br>
<b>Location</b><br>123 Main Street<br>New York, NY 10001, USA

Example 3

<span style="font-size:18px;"><b>Location</b><br>123 Main Street<br>New York, NY 10001, USA</span>

Example 4

<hr style="border-top: 1px solid #ddd; ">
<p><span class="font-weight-menu" style="font-size:4.5vw;">Subscribe</span></p>
<p><a href="#">Become a member for new promos, best products, and inspiration. →</a></p>
<hr style="border-top: 1px solid #ddd; ">
<p><span class="font-weight-menu" style="font-size:4.5vw;">Get Help</span></p>
<p><a href="#">Order Status</a><br>
<a href="#">Shipping and Delivery</a><br>
<a href="#">Returns</a><br>
<a href="#">Payment Options</a></p>
<hr style="border-top: 1px solid #ddd;">
<p class="text-small">© 2023 Uncode. All rights reserved</p>