Joomla Templates Club 406,261 posts

[iainmac Friend iainmacJoin date: September 2006Posts: 62Downloads:0Uploads:3 Thanks: 25 Thanked: 2 times in 1 posts]

#157911

I want to replace the coloured borders in the mega menu with a multi coloured image but when I replace the following code:


.ja-megamenu {padding: 0; border-bottom: 5px solid #000; }

with

.ja-megamenu {background: url(../images/bar.png) no-repeat; }

The image does not appear even when I document the full url. What am I doing wrong?
Thanks

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

#368776

Make sure you are in development mode and css compression is set to no. Then clear your caches (browser and jat3) and see if that helps locate the problem. If no then please post a link and we will see if we can advise.

[iainmac Friend iainmacJoin date: September 2006Posts: 62Downloads:0Uploads:3 Thanks: 25 Thanked: 2 times in 1 posts]

#368778

Still doesn’t seem to be having an impact. I will pm site details and would be grateful for your feedback.
Thanks

[iainmac Friend iainmacJoin date: September 2006Posts: 62Downloads:0Uploads:3 Thanks: 25 Thanked: 2 times in 1 posts]

#368799

The site is at maximise.com/clr3

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

#368805

The path should be
/clr3/images/bar.png

1 user says Thank You to Phill for this useful post

1. iainmac

[iainmac Friend iainmacJoin date: September 2006Posts: 62Downloads:0Uploads:3 Thanks: 25 Thanked: 2 times in 1 posts]

#368809

Thanks, that worked!
The image is appearing at the top of the menu instead of at the bottom where the border was. Any ideas how I get the bar to show underneath the menu?

Thanks

[iainmac Friend iainmacJoin date: September 2006Posts: 62Downloads:0Uploads:3 Thanks: 25 Thanked: 2 times in 1 posts]

#368818

Almost got it with this code:

.ja-megamenu { background: url(/clr3/images/bar.gif) no-repeat 2px bottom;}

but there seems to be an orange repeat under the rss, twitter icons. Any ideas on how to resolve that?

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

#368822

That is a separate menu also using the same border. You would have to add a separate style to the menu to remove that. Use Firebug for firefox and you should be able o work it out.

[iainmac Friend iainmacJoin date: September 2006Posts: 62Downloads:0Uploads:3 Thanks: 25 Thanked: 2 times in 1 posts]

#368836

OK, from what you are saying I understand that there is a separate area hosting the rss, twitter etc icons, which is calling for the same menu bar. I am not familiar with firebug but I assume that what you are suggesting is that I need to somehow differentiate that menu area from the code that holds the menu bar, so any further pointers would be most helpful. Thanks

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#368909

Hi iainmac,

Phill meant you should add an new class to ja-megamenu, for example

<div id="ja-megamenu" class="ja-megamenu colorline clearfix">
and then change the code

.ja-megamenu { background: url(/clr3/images/bar.gif) no-repeat 2px bottom;}
to

.colorline{ background: url(/clr3/images/bar.gif) no-repeat 2px bottom;}
It should be able to remove the duplicated line.

1 user says Thank You to Ninja Lead for this useful post

1. iainmac

[iainmac Friend iainmacJoin date: September 2006Posts: 62Downloads:0Uploads:3 Thanks: 25 Thanked: 2 times in 1 posts]

#368925

That did remove the duplicated line but keeps the one underneath the rss & twitter icons. Can you suggest how I amend it to keep the line under the menu instead?

Thanks

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#368926

Hi iainmac,

you have put the “colorline” class in a wrong place, there are 2 “ja-megamenu” elements, place the class into the second one (the one inside ja-mainnav), it should be ok.

2 users say Thank You to Ninja Lead for this useful post

1. Phill
2. iainmac

[Author]

Posts