Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

How do I use graphics in the navigation bar instead of text? 
 
ashleyward
Jr. Member
 
Total Posts:  9
Joined:  2008-03-21
 

How do I use graphics in the navigation bar instead of text?

Can anyone help?

Thanks so much

Ash x

 
Magento Community Magento Community
Magento Community
Magento Community
 
ashleyward
Jr. Member
 
Total Posts:  9
Joined:  2008-03-21
 

Let me clarify,

What I mean is, using images, which will link to categories instead of text

is this possible?

Thanks

Ashley

 
Magento Community Magento Community
Magento Community
Magento Community
 
pankajk
Member
 
Avatar
Total Posts:  38
Joined:  2008-04-15
Mumbai -101, Maharastra, India
 
ashleyward - 23 April 2008 12:50 PM

Let me clarify,

What I mean is, using images, which will link to categories instead of text

is this possible?

Thanks

Ashley

YES IT IS POSSIBLE TO PUT IMAGES FOR NAVIGATION YOU NEED TO CHANGE, JUST GO TO app>code>core>mage>catlog>block>navigation.php and change in drawItem() function as you wanted. as you can change <a> tag to images.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Pro Web
Jr. Member
 
Total Posts:  7
Joined:  2008-04-13
 

Im trying to follow the path you mentioned....In the admin area, where is the first step called ‘App’

Thx for detailing this!

 
Magento Community Magento Community
Magento Community
Magento Community
 
mkenigson
Jr. Member
 
Total Posts:  5
Joined:  2008-10-03
 

Thanks for the hint!  I’m sure Pro Web figured this out by now but for those of you having the same issue, the path mentioned above is a filesystem path, not menu navigation within the app.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Lol
Member
 
Avatar
Total Posts:  68
Joined:  2008-06-26
Plymouth, UK
 

Is this not something that could be done with css? Looking at the plain html code for the navigation bar it would seem that all the necessary tags and classes are there to target each individual menu item. When a category link has been followed it is set to ‘active’ by including ‘active’ in the class name and the css can target this too.

<div class="header-nav-container">
    <
div class="header-nav">
        <
h4 class="no-display">Category Navigation:</h4>
        <
ul id="nav">
            <
li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)" class="level0 nav-bed-and-bath active parent">
                <
a href="http://localhost/store/bed-and-bath"><span>Furniture</span></a>
                <
ul class="level0">
                    <
li class="level1 nav-bed-and-bath-living-room">
                        <
a href="http://localhost/store/bed-and-bath/living-room"><span>Living Room</span></a>
                    </
li>
                    <
li class="level1 nav-bed-and-bath-bedroom last">
                        <
a href="http://localhost/store/bed-and-bath/bedroom"><span>Bedroom</span></a>
                    </
li>
                </
ul>
            </
li>
            <
li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)" class="level0 nav-electronics parent">
                <
a href="http://localhost/store/electronics"><span>Electronics</span></a>
                <
ul class="level0">
                    <
li class="level1 nav-electronics-cellphones">
                        <
a href="http://localhost/store/electronics/cellphones"><span>Cell Phones</span></a>
                    </
li>
                    <
li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)" class="level1 nav-electronics-digital-cameras parent">
                        <
a href="http://localhost/store/electronics/digital-cameras"><span>Cameras</span></a>
                        <
ul class="level1">
                            <
li class="level2 nav-electronics-digital-cameras-accessories">
                                <
a href="http://localhost/store/electronics/digital-cameras/accessories"><span>Accessories</span></a>
                            </
li>
                            <
li class="level2 nav-electronics-digital-cameras-digital-cameras last">
                                <
a href="http://localhost/store/electronics/digital-cameras/digital-cameras"><span>Digital Cameras</span></a>
                            </
li>
                        </
ul>
                    </
li>
                    <
li class="level1 nav-electronics-laptops last">
                        <
a href="http://localhost/store/electronics/laptops"><span>Laptops</span></a>
                    </
li>
                </
ul>
            </
li>
            <
li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)" class="level0 nav-apparel parent">
                <
a href="http://localhost/store/apparel"><span>Apparel</span></a>
                <
ul class="level0">
                    <
li class="level1 nav-apparel-shirts">
                        <
a href="http://localhost/store/apparel/shirts"><span>Shirts</span></a>
                    </
li>
                    <
li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)" class="level1 nav-apparel-shoes parent">
                        <
a href="http://localhost/store/apparel/shoes"><span>Shoes</span></a>
                        <
ul class="level1">
                            <
li class="level2 nav-apparel-shoes-mens-s-shoes">
                                <
a href="http://localhost/store/apparel/shoes/mens-s-shoes"><span>Mens</span></a>
                            </
li>
                            <
li class="level2 nav-apparel-shoes-women-s-shoes last">
                                <
a href="http://localhost/store/apparel/shoes/women-s-shoes"><span>Womens</span></a>
                            </
li>
                        </
ul>
                    </
li>
                    <
li class="level1 nav-apparel-college-hoodies last">
                        <
a href="http://localhost/store/apparel/college-hoodies"><span>Hoodies</span></a>
                    </
li>
                </
ul>
            </
li>
        </
ul>
    </
div>
</
div>
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top