Canvas Support

displaying social media icon on one line in menu

7 replies·opened Aug 14, 2023
B
bagginsAug 14, 2023

I'm able to display social icons on the menu but it is displaying on two lines. I would like to display on one line:

<li class="menu-item mega-menu mega-menu-small" style="--cnvs-mega-menu-width-sm: 220px">
   <a class="menu-link" href="http://www.instagram.com/xxxxx"><div><i class="bi-instagram"></i></div></a>                            
   </li>
   <li class="menu-item mega-menu mega-menu-small" style="--cnvs-mega-menu-width-sm: 220px">
      <a class="menu-link" href="http://www.facebook.com/xxxxx"><div><i class="bi-facebook"></i></div></a>                            
   </li>

Also, how may I change it so that social media icons are displayed when menu is collapsed?

S
SemiColonWebSTAFFAug 14, 2023

Hello,

You can consider using something like this instead:

<li class="menu-item">
	<div class="widget p-4">
		<div class="d-flex">
			<a href="#" class="social-icon si-small text-white rounded-circle bg-facebook" title="Facebook">
				<i class="fa-brands fa-facebook-f"></i>
				<i class="fa-brands fa-facebook-f"></i>
			</a>

			<a href="#" class="social-icon si-small text-white rounded-circle bg-twitter" title="Twitter">
				<i class="fa-brands fa-twitter"></i>
				<i class="fa-brands fa-twitter"></i>
			</a>

			<a href="#" class="social-icon si-small text-white rounded-circle bg-pinterest" title="Pinterest">
				<i class="fa-brands fa-pinterest-p"></i>
				<i class="fa-brands fa-pinterest-p"></i>
			</a>

			<a href="#" class="social-icon si-small text-white rounded-circle bg-whatsapp" title="Whatsapp">
				<i class="fa-brands fa-whatsapp"></i>
				<i class="fa-brands fa-whatsapp"></i>
			</a>
		</div>
	</div>
</li>

This can only be added inside Sub-Menus. However, if you are adding Social Icons in the Main Menu Container, you will need to add them inside the .header-misc DIV instead of the Primary Menus. This is currently not supported.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

B
bagginsAug 14, 2023

Hope that in future update, the social icons can be added to the main menu container so that its displayed after menu collapse.

S
SemiColonWebSTAFFAug 14, 2023

Hello,

You can still add this. Consider using the following code instead of the above you are currently using:

<li class="menu-item">
	<div class="d-flex py-3">
		<a href="#" class="social-icon si-small text-white rounded-circle bg-facebook" title="Facebook">
			<i class="fa-brands fa-facebook-f"></i>
			<i class="fa-brands fa-facebook-f"></i>
		</a>

		<a href="#" class="social-icon si-small text-white rounded-circle bg-twitter" title="Twitter">
			<i class="fa-brands fa-twitter"></i>
			<i class="fa-brands fa-twitter"></i>
		</a>

		<a href="#" class="social-icon si-small text-white rounded-circle bg-pinterest" title="Pinterest">
			<i class="fa-brands fa-pinterest-p"></i>
			<i class="fa-brands fa-pinterest-p"></i>
		</a>

		<a href="#" class="social-icon si-small text-white rounded-circle bg-whatsapp" title="Whatsapp">
			<i class="fa-brands fa-whatsapp"></i>
			<i class="fa-brands fa-whatsapp"></i>
		</a>
	</div>
</li>

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

B
bagginsAug 15, 2023

The code above doesn't display social icons when menu collapses.

S
SemiColonWebSTAFFAug 15, 2023

Hello,

We have just checked this out and it is working perfectly fine for us with the above codes without any issues (see the video attached). Please make sure that you always provide us with Live URLs to minimize support times and replies, which will enable us to resolve issues more quickly.

Additionally, since, currently Customization related Support is not included with the License according to the Item Support Policy: https://themeforest.net/page/item_support_policy . You will need to manually code this or Hire Us to help you out with Customizations.

Thanks for your Patience and Understanding.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

B
bagginsAug 17, 2023

I guess I wasn't clear in the description of what I want. Here is a screen shot of how the social icons are displayed when menu is collapsed:

(facebook icon) (instagram icon) (collapsed menu)

In the code you provided, the social media icons are included in the collapsed menu and thus doesn't display.

Unfortunately, I can't find an example right now. Nor could I find an example on any of your website examples.

S
SemiColonWebSTAFFAug 18, 2023

Hello,

Thanks for your Patience and Apologies for the misunderstanding. This is also supported! Consider trying this code:

<div class="header-row">

	<!-- Logo
	============================================= -->
	<div id="logo">
		<a href="index.html">
			<img class="logo-default" srcset="one-page/images/canvasone.png, one-page/images/canvasone@2x.png 2x" src="one-page/images/canvasone@2x.png" alt="Canvas Logo">
			<img class="logo-dark" srcset="one-page/images/canvasone-dark.png, one-page/images/canvasone-dark@2x.png 2x" src="one-page/images/canvasone-dark@2x.png" alt="Canvas Logo">
		</a>
	</div><!-- #logo end -->

	<div class="header-misc">

		<div class="d-flex">
			<a href="#" class="social-icon si-small text-white rounded-circle bg-facebook" title="Facebook">
				<i class="fa-brands fa-facebook-f"></i>
				<i class="fa-brands fa-facebook-f"></i>
			</a>

			<a href="#" class="social-icon si-small text-white rounded-circle bg-twitter" title="Twitter">
				<i class="fa-brands fa-twitter"></i>
				<i class="fa-brands fa-twitter"></i>
			</a>

			<a href="#" class="social-icon si-small text-white rounded-circle bg-pinterest" title="Pinterest">
				<i class="fa-brands fa-pinterest-p"></i>
				<i class="fa-brands fa-pinterest-p"></i>
			</a>

			<a href="#" class="social-icon si-small text-white rounded-circle bg-whatsapp" title="Whatsapp">
				<i class="fa-brands fa-whatsapp"></i>
				<i class="fa-brands fa-whatsapp"></i>
			</a>
		</div>

	</div>

	<div class="primary-menu-trigger">
		<button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
			<span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
		</button>
	</div>

	<!-- Primary Navigation
	============================================= -->
	<nav class="primary-menu">

		<ul class="menu-container">
			<li class="menu-item">
				<a href="index.html" class="menu-link"><div>Home</div></a>
			</li>

			...
		</ul>

	</nav><!-- #primary-menu end -->

</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard