How to use images as secondary navigation?

[labecs]

I am trying to use images instead of text on the secondary navigation on my Lifestyle Child theme.  This is what I want it to look like, http://www.outlawbyjazz.com/ but I have no idea of how to code for this. Can someone help me, please? Is it possible?

 

 

[marybaum]

I haven't used images as navigation in a long time - like, since I learned CSS in 2007. But I would think one way to do it would be to create some plain ol' html markup for the secondary nav that looks like this:

<ul>

<li><a href="http://yoursite.com/link1.html"><img src="http://yoursite.com/image1" title="title" blah blah="gobbledygook attributes"/></a></li>

<li><a href="http://yoursite.com/link2.html"><img src="http://yoursite.com/image2" title="title" blah blah="gobbledygook attributes"/></a></li>

<li><a href="http://yoursite.com/link3.html"><img src="http://yoursite.com/image3" title="title" blah blah="gobbledygook attributes"/></a></li>

</ul>

Where blah blah="gobbledygook attributes" are whatever dimensions, alt text and other attributes you want to stick in there. I've found that stripping the dimensions out of there makes an image shrink down to the size of its containing div if I need to make the div smaller - as in, when I want to make a column class smaller, or in a responsive design.

What I'm less sure of is what to do with this markup.

I can imagine three ways to handle it:

1. as a hook with the Genesis Simple Hooks plugin;

2. as a text widget - since we can add html markup in the text-widget box - after creating a php file (subnav.php maybe)that creates a widget area in the nav div:

<?php

/**Creates a widget area in the subnav div.

?><div id="subnav" class="wrap" class="widget-area">
<?php
genesis_structural_wrap( 'subnav_wrap' );
do_action( 'genesis_subnav_wrap_widget_area' );
genesis_structural_wrap( 'subnav_wrap', 'close');

?>

</div>

And registering the widget area in functions.php:

genesis_register_sidebar( array(
'id' => 'subnav',
'name' => __( 'subnav, 'yourtheme' ),
'description' => __( 'This is your new subnav.', 'yourtheme' ),
) );

Or 3. Copying the subnav chunk of the original menu.php -- the action 'genesis_do_subnav' to a new file in your theme and naming that new file subnav.php, then editing that to take out almost all the php and leaving just the html markup with the images as links.

In the end, that might be the simplest thing.

Mary Baum

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

There is also a CSS-only way to do it if you're willing to ignore Internet Explorer or go to great lengths to offer workarounds like Modernizr and some others. I'm more interested in learning php at the moment, so I started with the geeky stuff first.That would be to set up your list items as nth-child block elements, give them background images and set the text to indent way outside the borders:li

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

There is also a CSS-only way to do it if you're willing to ignore Internet Explorer or go to great lengths to offer workarounds like Modernizr and some others. I'm more interested in learning php at the moment, so I started with the geeky stuff first.

That would be to set up your list items as nth-child block elements, give them background images and set the text to indent way outside the borders:

li

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

There is also a CSS-only way to do it if you're willing to ignore Internet Explorer or go to great lengths to offer workarounds like Modernizr and some others. I'm more interested in learning php at the moment, so I started with the geeky stuff first.

That would be to set up your list items as nth-child block elements, give them background images and set the text to indent way outside the borders:
ul ul li:nth-child(1) {
background: url(http://yoursite.com/images/cat.png) top center no-repeat;
display: inline-block;
text-indent:-999px;
}

ul ul li:nth-child(2) {
background: url(http://yoursite.com/images/dog.png) top center no-repeat;
display: inline-block;
text-indent:-999px;
}

ul ul li:nth-child(3) {
background: url(http://yoursite.com/images/bunny.png) top center no-repeat;
display: inline-block;
text-indent:-999px;
}
Not that your images are cute, fuzzy animals, but you get the idea. Also, your theme may designate the subnav list items differently, and no doubt you have other properties listed.

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[labecs]

Thank you so much, Marybaum... if you had seen my face when I started reading your answer you would have laughed hysterically... my ignorance of php is gargantuan.... I understood the html code perfectly but after that you started speaking some death tongue  🙁

I sort of like the last "simplest thing" you mentioned, but I have no idea where to start...

<<Or 3. Copying the subnav chunk of the original menu.php — the action ‘genesis_do_subnav’ to a new file in your theme and naming that new file subnav.php, then editing that to take out almost all the php and leaving just the html markup with the images as links.>>

Where is the original menu.php and so on? Would you mind explaining that to me in simpler terms, or with step to step instructions, please?

I'm still not past css and html  🙁

For a simpler option, I also have a special "old western" font that I could use for the Navigation and the footer, and I don't know if it would be easier to do that.

I have this code from the original website (I'm actually trying to reproduce it with a different theme)

<code> @font-face {
font-family: 'CarnivaleeFreakshowRegular';
src: url('fonts/carnevalee_freakshow-webfont.eot');
src: url('fonts/carnevalee_freakshow-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/carnevalee_freakshow-webfont.woff') format('woff'),
url('fonts/carnevalee_freakshow-webfont.ttf') format('truetype'),
url('fonts/carnevalee_freakshow-webfont.svg#CarnivaleeFreakshowRegular') format('svg');
font-weight: normal;
font-style: normal;
} <code>

But I have no idea of what file to put it in and where so that it only appears on the subnav and the footer.

What do you think would be easier, or how can I do both...?

Thank you in advance.... I will owe you dinner 🙂

 

[buddy_boy8403]

You can buy and install the UberMenu plugin.  I've used it on about 8 sites and it is wonderful!  Allows for some pretty fancy menus - including the ability to easily upload an image into the menu.

[labecs]

Thank you, Buddy!!!!

 

[labecs]

Oh, Buddy... I got the plugin and I love it, but... I don't like how it looks on my page, so I decided to go with the special font for the navigation and the footer, so can someone help me with that?

I have this code from the old page

<code> @font-face {
font-family: ‘CarnivaleeFreakshowRegular’;
src: url(‘fonts/carnevalee_freakshow-webfont.eot’);
src: url(‘fonts/carnevalee_freakshow-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/carnevalee_freakshow-webfont.woff’) format(‘woff’),
url(‘fonts/carnevalee_freakshow-webfont.ttf’) format(‘truetype’),
url(‘fonts/carnevalee_freakshow-webfont.svg#CarnivaleeFreakshowRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
} <code>

But I have no idea of where to place it within my Lifestyle theme 🙁

[Author]

Posts