Custom Mobile Icon Navigation for Flatsome


I have planned to do this for quite some time now; if you have been waiting for this I am happy to say here it is! But, Let’s dive in and make this happen. If you wish to see, a demo Click Here

This post in only for the Flatsome Theme!  <– Affiliate Link! If you never used Flatsome I encourage you to check it out. Did you know Flatsome powers this site?

1. PREPARE ICONS AND PAGES

You can get icons from

iconmonstr

Flaticon

Just like everything in life, everything is easier when you plan. I use flaticon.com for all of my icons, and personally, I have a paid subscription with then because love having icons at my disposal where I don’t have to credit any authors. Also, is a huge perk when you’re a web developer. But the pages you pick need to be a factor or 3. So 3, 6, 9, or max of 12. I mean it doesn’t have to be, but it would look weird if it’s not.

So make a list of your pages and go shopping for the icons you would like to use. You may want to think about the order too.

Here is my list for this demo: Home, Shop, Blog, FAQs, Support, About, My Account, Cart & Checkout.

Here we are at flaticon.com and we have the images picked out.

In Flaticon you can paint the icons to any color you want. I’m not sure if this is included in the free version.

Download your icons and save them to your computer. In the next step you will be uploading them to the media gallery.  I personally prefer the file size or 128 x 128 or 64 x 64. Now, I also use the PNG file format. So the back ground of the image is transparent. I would use SVG but you cannot see SVG items are not visible in WordPress’s media library.

2. UPLOAD YOUR ICONS TO THE MEDIA LIBRARY

Don’t waste time by uploading your icons individually, that’s silly.

3. CREATE A BLOCK AND PASTE IN THIS CODE

Navigate to blocks>add new. Your going to need to give your block a title then paste in this code then click publish.

Now I have created two options. A light and a dark version. Light has a white background with dark text, and the dark version is vise versa. The below code is the dark version. You can see the light version on GitHub.

MAKE SURE TO SELECT TEXT WHEN PASTING IN THIS CODE

Go ahead and paste your done and when you are done it should look something like this.

4. CUSTOMIZE IN THE UX BUILDER

Click on edit with UX Builder. Here is where you will add your icons to the icon boxes and replace the text. Now make sure you update the link. You don’t have to type in the full URL. You can just type in the permalink. Example. /about. I assume you know how to use the UX Builder being that you are using Flatsome.

For every icon box you will be replacing the image (aka icon), text and links to whatever you would like.

IT IS NORMAL TO SEE RANDOM IMAGES IN YOUR GALLERY SHOW UP HERE. Flatsome uses the image ID to display icons with the shortcode. Don’t freak out. Just replace the images to your icons.

When you are done it should look some thing like this.

5. PASTE THE BLOCK’S SHORTCODE HTML FIELD IN THE CUSTOMIZER

Appearance>Customize>Header>HTML> Paste the block’s short code in any HTML section that’s available. Flatsome provides five options. I doubt you are using all 5. In the even where you are you will have to sacrifice one.

In this photo you can see we pasted the block’s short code in the HTML 5 section.

6. CHOOSE MENU ELEMENTS TO ONLY DISPLAY HTML OPTION

Appearance>Customize>Header>Header Mobile Menu / Overlay>Unselect all and select the HTML block that contains the shortcode.

In the below photo we unchecked all elements and selected HTML 5.

7. SOME CSS

Now if you check your menu it will look like this. Therefor we will need to add some CSS code.

Add the CSS code into your theme. If your using custom CSS always paste in a child theme.

To do this navigate to: Flatsome>Advanced Options> Custom CSS
Here is the code…

The below code is broken down into three sections. All CSS, Tablet and mobile version. You may want to change the width if the menu on certain devices. My code is a starting point, and you can adjust it to fit your desired styles.

In the below image you can see that we have pasted the CSS code in our child theme.

 

THE END RESULT

Final thoughts. Be creative, make your menu unique. The possibilities are close to endless. Also, match the colors of your website. Happy creating! Much love and bye for now 🙂

Web Hosting

WANT TO GET WORDPRESS TIPS IN YOUR INBOX?


  • I would like to use this menu only for the mobile and tablet. For the website i would prefer the one i presently have. Any options to do that?

    • On desktop do you still want to have the off canvas menu? If not, in the customizer when customizing the header you can remove the mobile nav icon for desktop versions.

    • Awsome. I’m would like to put some examples on this post. If you would like for your site to be featured send me the url.

  • Top
    LIGHTS
    >