Joomla Templates Club 406,261 posts

[eminovpress Friend eminovpressJoin date: November 2010Posts: 64Downloads:0Uploads:0 Thanks: 17]

#162645

how to add an icon instead of the home page link? Or other link in main menu. :-*

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#385799

This must be done using css. for home link it can be easily done by applying a background image for <li> tag.

For others menu need to create a custom code and also work on css.

please let me which fix you need?

[eminovpress Friend eminovpressJoin date: November 2010Posts: 64Downloads:0Uploads:0 Thanks: 17]

#386196

this is my site: http://elmipress.com/

I want to change my homepage (əsas səhifə) on the icon. And also “həyat tərzi”.
In which css file should I add and what kind of code? How do I add a code <li> for image?

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#386204

Go to this file http://elmipress.com/templates/ja_anion/css/menu/mega.css

you need to edit this css code to make the home Menu icon


.ja-megamenu ul.level0 li:first-child {
background: none;
padding-left: 0;
}


upload the image in this folder http://elmipress.com/templates/ja_anion/images/

And change the background and padding css as below of your need

For Ex:


.ja-megamenu ul.level0 li:first-child {
background: url(../../images/home-icon.gif) left bottom no-repeat;
padding-left: 10px;
}


[eminovpress Friend eminovpressJoin date: November 2010Posts: 64Downloads:0Uploads:0 Thanks: 17]

#386245

I made the change what you asked for. If you checkout the website, you’ll notice that icon is misplaced. Although, I can’t delete the title, because it’s necessary in admin panel and customizations is not saved when I remove title. And icon dissolves in white area in some pages.

Besides those, I’d like to make this change also to other parts of website. How can I do it? Thanks for support.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#386246

Go to this file http://elmipress.com/templates/ja_anion/css/menu/mega.css

Add this code at the end of the mega.css file


.ja-megamenu ul.level0 li:first-child a span {
text-indent: -999em;
}


Also do this

Replace the following code


.ja-megamenu ul.level0 li:first-child {
background: url("../../images/ev.png") no-repeat left bottom ;
padding: 2px 0 0;
}


With

.ja-megamenu ul.level0 li:first-child {
background: url("../../images/ev.png") no-repeat left top ;
padding: 2px 0 0;
width: 50px;
}


[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#386247

I saw the Mouse Over stuff is not good in the existing site. Please do this for better results

Replace the following in the same mega.css file

Replace this


.ja-megamenu ul.level0 li.haschild a.mega span.menu-title, .ja-megamenu ul.level0 li.haschild-over a.mega span.menu-title {
background: url("../../images/arrow3.png") no-repeat left center;
padding-left: 12px;
}


With


.ja-megamenu ul.level0 li.haschild a.mega span.menu-title, .ja-megamenu ul.level0 li.haschild-over a.mega span.menu-title {
background: url("../../images/arrow3.png") no-repeat left center;
padding-left: 12px;
padding-right: 12px;
}


[eminovpress Friend eminovpressJoin date: November 2010Posts: 64Downloads:0Uploads:0 Thanks: 17]

#386248

In this file (mega.css) not this code. :-[:-[

.ja-megamenu ul.level0 li.haschild a.mega span.menu-title, .ja-megamenu ul.level0 li.haschild-over a.mega span.menu-title {
background: url("../../images/arrow3.png") no-repeat left center;
padding-left: 12px;
}

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#386310

Go to the mega.css file in http://elmipress.com/templates/ja_anion/css/menu/mega.css

Add this code in the end of the file


#ja-megamenu span{
padding-right: 12px;
}


If my post is helpful click on thanks Icon

1 user says Thank You to chavan for this useful post

1. eminovpress

[eminovpress Friend eminovpressJoin date: November 2010Posts: 64Downloads:0Uploads:0 Thanks: 17]

#386385

Thank you, healed. But there is one problem. When I entered some section I cant see first subcategory. How can I correct it? If it’s impossible I must rewind everything. :((

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#386388

Go to this file http://elmipress.com/templates/ja_anion/css/menu/mega.css

Replace this Code


.ja-megamenu ul.level0 li:first-child a span {
text-indent: -999em;
}


With

.megamenu li.first span {
text-indent:-999em;
}

.megamenu li ul .first span {
text-indent:inherit;
}


[eminovpress Friend eminovpressJoin date: November 2010Posts: 64Downloads:0Uploads:0 Thanks: 17]

#386409

incorrect work. :-[ look first subcategory.

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#386414

I’ve not tried this (and cannot cos I only have an ipad today) but instead of all the above you could try as per below

Add this to the end of your template.css

/* Special Buttons */
#ja-mainnav li.home { }
#ja-mainnav li.home a.home {
text-indent: -1000em;
width: 58px;
}
#ja-mainnav li.home .childcontent-inner { background-position: 14px top; /* Realign The Arrow */ }
span.has-image {
min-height: 18px;
}
/* Home Button */
#ja-mainnav li.home a.home { background: url(../images/home.png) no-repeat center !important; }
#ja-mainnav li:hover a.home,
#ja-mainnav li.over a.home,
#ja-mainnav li.active a.home {
background: url(../images/home-l.png) no-repeat center transparent !important;
}

Add your icons (please see the patsh and names above for what and where to put them)

In the menu manager go into the home menu and in Paramaters (System) set “Show Page Title” to “No”. Then in Paramaters (JA Extended) set the additional class to “home”

As I said, I have not tested and a few adjustments may be required but in theory it should work. The only issue might be with th tabs, maybe chavan can assist with the final details.

[eminovpress Friend eminovpressJoin date: November 2010Posts: 64Downloads:0Uploads:0 Thanks: 17]

#386440

this version don`t work. home menu hide. but don`t see home icon.

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#386443

Please check the menu settings as per above. Also, did you put images in the locations listed above?

[Author]

Posts