Use icons in menu?

EmilyGrace · May 16, 2015

Is there a way to use icons instead of text for menus?
I'd like to have a minimalistic header and my menu is too long typed out. I'm looking for something similar to the social icons. I would use html/css to create a menu but I don't know how to link to the smugmug contact window. Right now my menu is to the left of my logo in the header and is shortened to H G A C S for Home Galleries About Contact and Search.

emilygrace.smugmug.com

Any help would be appreciated. Thanks!

Lille Ulven · May 16, 2015

I would think that there is not a way to use a menu with icons - at least not as long as you go for a standard smug mug menu in your header and do not start coding it yourself in some other area of your site.

But maybe something else could work out for you?
What about, instead of having the classical menu where everything is either vertical or horizontal spread across your header, you could have a menu that only opens if you point on it with a little trick.
You build your normal menu with smug mug as described here http://help.smugmug.com/customer/portal/articles/1222523 but instead of sorting Galleries, About, Contact and Search directly below "Home" you sort them as if they were sub-menus of "Home" and chose "Vertical bar" for the style of it. That way you would get a rather slim menu, yet every one of your menu titles could be written out fully.

Good luck

Lille Ulven

EmilyGrace · May 16, 2015

Thanks Lille Ulven, but I like the look of the icon menu.

I figured out how to create a menu using the smugmug font icons
by putting this in the html:
<center><div id="iconmenu"><a href="http://emilygrace.smugmug.com/" class="sm-muted"><span class="sm-fonticon sm-button-fonticon sm-fonticon-large sm-fonticon-Home"></span></a> <a href="http://emilygrace.smugmug.com/Galleries" class="sm-muted"><span class="sm-fonticon sm-button-fonticon sm-fonticon-large sm-fonticon-Gallery"></span></a> <a href="http://emilygrace.smugmug.com/Galleries/About" class="sm-muted"><span class="sm-fonticon sm-button-fonticon sm-fonticon-large sm-fonticon-User"></span></a><div style="display: inline;" class="sm-footer-navitem-contact"><a href="/#" class="sm-muted"><span class="sm-fonticon sm-fonticon-large sm-fonticon-Mail"></span></a></div><a href="http://emilygrace.smugmug.com/search" class="sm-muted"><span class="sm-fonticon sm-button-fonticon sm-fonticon-large sm-fonticon-Search"></span></a></div></center>

And this in the css:
#iconmenu a {
padding: 6px;
color: #000;
}
#iconmenu a:hover {
padding: 6px;
color: #fff;
}

However, I still have not figured out how to get the smugmug popup contact window to work as a link. I tried using this: http://www.dgrin.com/showthread.php?t=251035&highlight=custom+contact+form+image
Any suggestions for getting that to work would be appreciated.

rainforest1155 · May 18, 2015

Hi Emily (and everyone else considering replying),
Since there's already an exchange in this thread, it might be best if we stay with that other thread to avoid having two threads on the same issue going on at once.

Tom Foster · May 18, 2015

rainforest1155 wrote: »

Hi Emily (and everyone else considering replying),
Since there's already an exchange in this thread, it might be best if we stay with that other thread to avoid having two threads on the same issue going on at once.

I think those are 2 different issues rainforest? The other thread is about images used to open the contact form while this is about icons used in the menus as opposed to text links?

rainforest1155 · May 19, 2015

Hi Tom,
From what I can tell, the codes that Emily posted, include icons instead of images in both threads. So it seems to me that she didn't make a distinction between those two use cases and these threads were running somehow in parallel about the same issue.

Use icons in menu?

Comments