An icon only menu?

Hi. I’m looking a way to build a menu with my own images (home made icons); each item in the menu should be an image, with no text at all. No element in the foundry stacks seems to do that (unless I have missed something). I have seen on this forum that FontAwesome could be used, but this seems a difficult solution.

I’m able to do a menu like I wish using a grid of images for a single page, but it seems to me impossible to copy the container to others pages.

I have thought a solution, but not sure if this is feasible : if I made a hidden particular page, containing only a menu, can I insert this page automatically for each page of the site ? (with iframe ?). Or should I make a class in css, and load this class to each page ?

Thanks for your help ! Any hints could be very useful…
F.

You can use the mega menu and within use a plain image stack, if I am not missing something

1 Like

I’m exploring this right now, thanks.

I have looked into your proposition, I’m probably missing something, but I do not see any ways to include a picture with a menu item, even with mega-menu. An image stack can be inserted in a drop down menu, but not at the first level. Here is an example of that I want to do:

Thanks again.
F.

In case this is useful for somebody, I have found a solution, not the best, but one solution. I did not know “partial” features of stacks. So I have a container containing my menu with images, set as a partial stack, so that can be used in every page, and a modification to this partial will propagate to all pages.

But, this is solutions of compromise. If anyone think of a better solution for my icon-only menu, please share your ideas !

F.

What you’re looking to do isn’t an option of any of the Foundry stacks. This is because of the problems using custom, non-uniform images would possibly cause in relation to the navigation bar formatting, etc.

I understand, thanks for the explanation. An idea for a new stack ? :wink:

Unfortunately it isn’t a matter of putting that feature into an existing navigation stack that would be the problem. A new stack would have the same possible problems. It isn’t to say it is some impossible task, as it isn’t – just that it is one that has the possibility of creating more headaches than I’d like to introduce.

I trust you ! Thanks for the feedback.
F.

I do this all the time with font awesome and the Foundry Nav Bar stack. Put the FA code in front of the name of your page in the RW inspector panel, like:

<i class='fa fa-home fa-lg' style="color:#0099cc"></i>Home

It results in a navigator with colored FA icons next to the name of the page such as:

You said you didn’t want any text. There is no reason the icons wouldn’t show up without the name there also, but it seems like it might cause problems in creating links to the pages. I’ve never tried that.

1 Like

I think I understand what you are doing (not in depth !). I’ve looked into Font Awesome… but did not understand if you can juste juste their icons, or define yours ?

Thanks.

Just theirs. For the menu: If you do not use one of the menu options, you can use the columns stack to create your own. Place an image into each column and link each image to the page you want to. Copy and paste the column into each page. If you want to use a sticky menu, place the column into a sticky stack.

1 Like

I’ve finally done something like this, but the sticky stack is a good idea. Thanks.
I’m actually surprised that something which seems to a novice like me so natural, is not not easily feasible: A picture is worth a thousand words !

I use the Font Awesome in my menus alot as @Bioguy mentioned. You can also add html to the Title section of the Mega Menu; for example: #img src=“resources/mexico.png” alt=“Mexican Flag icon”% En Español

REPLACE the # with < and the % with >
Just make sure to pre-size all your images to the size you need. @Fabrice

1 Like

This is for you:

1 Like

Wow, Fabrice. Looks like you have a secret power of suggestion. Wish for something else now. :wink:

1 Like

The lottery numbers for next week would be fine :slight_smile:

2 Likes

While it is more basic, as I just threw it together after seeing @Fuellemann’s post, you can do something like that using just Foundry and Potion Pack stacks.

Sample Project File: modal-icon-menu-example.zip • Droplr

Note: Not trying to discourage you from buying the stack @Fuellemann linked to. It is a nice looking stack from the previews. Just pointing out you can do fun things with a set of modular stacks like Foundry.

6 Likes