inline text with svg icon left

Hi there,

I want to create a horizontal list with icons in svg left and the text to the right. I see it is not possible with the elements of your theme. How can I do this.

Please see example image. https://snipboard.io/LG6iQ8.jpg

So the text are aligned in the middle.

And also my menu is shaking when it is in sticky modus. When I hover from one menu to the other.

https://snipboard.io/uOWqcV.jpg

Thanks for the help.

regards,
ibrahim

Hello,

It is possible. You can add Fontawesome icons into the menu item. Please check this instruction to find the option on how to do that: https://xtemos.com/docs/woodmart/create-menu-2/

Best Regard

You answered me completly different then what I asked for.

I asked 2 different things.

1. I showed you a printscreen I want see printscreen https://snipboard.io/c6f8mE.jpg
horizontal list with svg ivon left

my other problem see my webite

I have a sticky menu, when scrolling down and going with the mouse to the menu and hovering. and move between other menu links it is shaking. please check

Please read carefull what I wrote cause you answered me totally wrong thing, I didnt ask for.

Hello,

Sorry for the confusion, your first screen showed the main menu, and the second screen was interpreted as the main menu as well, that is why I have provided such instruction.

There is no option to create such a menu, you can consider building the menu by means of Information boxes.

As for the second problem, please deactivate the plugins not related to the theme and check again.

Best Regards

Dear Elise,

I know there is no such menu, I am asking if you have one inline html code so I can paste it there, cause I have no html knwoledge.

something like this

text       

it will look this :

icon.svg text       icon.svg text icon.svg text icon.svg text

I want this to be in one line (horizontal) for you it is ease, I really have no knowledge.

Your theme does only provide it in block and I don’t want that.

Is it really that much asked to provide it.

——————————————
As for the other problem, disabling pugins I have done that before not working.

Thanks in advance.

Regards,

Ibrahim

Hello,

Please follow these steps:

1. Add a Raw HTML element and add this class to the element: custom_menu_gorizontal
2. Add this code to the element:

<ul class="menu">
	<li><i class="fab fa-500px"></i> <a href="#">New York</a></li>
	<li><i class="fab fa-500px"></i> <a href="#">London SF</a></li>
	<li><i class="fab fa-500px"></i> <a href="#">Cockfosters BP</a></li>
	<li><i class="fab fa-500px"></i> <a href="#">Los Angeles</a></li>
	<li><i class="fab fa-500px"></i> <a href="#">Chicago</a></li>
	<li><i class="fab fa-500px"></i> <a href="#">Las Vegas</a></li>
</ul>

3. Replace fa-500px with your icon. Then insert your full URL instead of #, replace the content of the link.

4. Add this custom CSS to the Theme Settings > Custom CSS > Global.

.custom_menu_gorizontal ul{
display:flex;
justify-content:center;
}
.custom_menu_gorizontal ul li{
display:inline-block;
margin:2px 10px;
}

Best Regards

Hi Elise,

Thank you very much for your efford.

Great service as always.

Best regards,

Ibrahim

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts