I was in the Headway forums the other day and had someone ask how to create ??a menu that contains icons. I gave him the basic,’well you need to use CSS and do this and that to get it to work,’ type answer, and I got back the general ‘well I don’t know CSS or what you’re talking about,’ answer. So I decided I would take 15 minutes or so and make a screencast showing you a very easy way to get some icons to the left of the navigation text.
This screencast runs about 19 minutes in length. I hope you enjoy!!
17 responses to “Icons, Menus, and Headway, Oh My!”
AJ,
Informative video. I am one of those non-coders learning about WordPress and the Headway theme. I have two questions: 1. Could you delete the text and just make the icons link to the social websites? 2. Could you add a social media tab to an existing main menu and then do a drop down with the icons?
Thanks!
Nathan in Portland
Hi Nathan, Actually this video was really just for adding images to your existing menu. To do what you’re looking for, you’d want something more like . If that’s not what you’re looking for, let me know and maybe I’ll do a separate screencast for what you’re looking for.
Hi AJ-
Thanks so much for that video. I found it on Youtube and added it to my favorites. I was wondering what your response to Nathan in Portland (hey! that’s where I am too!) was…the “you’d want something more like” sentence ends without a link, so I was curious. I’ve been trying to figure out how to use images as my menu (that display a mouseover and mousedown), as well as remaining in mousedown when the user is on that specific page, and through all my searching your tutorial was the only thing that came close.
Please let me know what you said to Nathan below!!
Thank you so much-Best,Carly
@carlyjcais I’m not sure either. This is an older post, so I’m not sure what I was thinking then. lol As for your question about drop-downs, that should still work the same as in the video. Just put the menu items in underneath a menu item instead of putting them at the top.
@AJMorris Thanks so much for your speedy reply. So how would one go about using PNGs as the menu items (without using any text at all)?
Did I write “drop-downs”? I meant to write “mousedown” as in, when the item is clicked upon, the PNG image is swapped out to its mousedown state PNG. In other words, creating menu item functionality through Headway utilizing images and no text whatsoever.
Can this be done?Thanks again!Best,Carly
Hi AJ,
This video was fantastic for a CSS nitwit like myself. Thank you!
That being said, I’m having trouble getting it to work! I’ve followed all the steps but nothing has changed. This is what I’ve done:
I have created a navigation menu and assigned each menu item a CSS class. I uploaded a test image called blue-star.jpg to the custom/images folder under headway-2013. And I tried to put my blue star picture next to the “home” button on my navigation menu, using the following code typed into the custom.css file:
body.custom div#navigation .home{
background: url(custom/images/blue-star.jpg);
background-repeat: no-repeat;
background-position: left center;
}
The only thing I did differently than the video was edit custom.css through my wordpress dashboard instead of the notepad/ftp combo you used.
Is there anything in headway 2.0.13 that would make this not work? Otherwise I’m baffled as to why your brilliant directions aren’t working for me…
Elizabeth
Not sure, where in the custom.css file did you put it? Do you have a link to your site?
Sorry, yes–the site is http://www.sugarhero.com
I put it at the very bottom of the custom.css file after the */ so it wouldn’t be commented out.
Got it, so looks like you left out an li and an anchor tag. The first line of the code should read, body.custom div#navigation li.home a {}. That should fix it.
You are awesome! That worked perfectly.
And I am so sorry, but I have one more question. I tried to move the words over so they’re not overlapping the icon, but when I used the code from the video everything (icon + words) shifted over instead. I added this right before the previous code:
body.custom div#navigation ul.navigation li {
padding-left: 30px;
}
Whoa–all my old comments disappeared. Sorry for the double post, and I really want to thank you, both for the video and for taking the time to troubleshoot with me–it is above and beyond and I so appreciate it.
If I can ask one more question…the icons are now appearing on top of the words. I tried to move the words over, as in the video, but it just shifted everything (words AND icons) over. This is the code I used:
body.custom div#navigation ul.navigation li {
padding-left: 30px;
}
Again, thank you SO much!
site again: http://www.sugarhero.com
Never mind–I got it. (Sorry to spam your page, feel free to delete all these.) Thank you for all your help!
They are back now. 🙂 Was implementing my old comment system and for some reason they weren’t showing up. Glad you got things working now.
Hi AJ! What a great video – i’m looking forward to checking out some more of your screencasts as it’s so much easier to understand things that way (I’m just getting started with Headway). A couple of questions I was hoping you could help with –
1) is it possible to remove the text entirely and just have the icons?
2) how do you centre the entire navigation bar?
3) how do you add a custom background to the whole navigation bar?
thanks so much
Vicky
How can I accomplish this in Headway 3.0?
Hi AJ,
I can’t get enough of your videos, awesome work! If one day I can design a fraction of what you do I would be so happy.
I am trying to add the icons without a text on the navigation bar. I would like my menus to the left and icons to the right, How can I do that? Is there any other video I can learn from?
Thank you!