Joomla Templates Club 406,261 posts

[leonardcraciun Friend leonardcraciunJoin date: April 2011Posts: 88Downloads:20Uploads:34 Thanks: 12]

#162721

Hi. I have inserted in the submenu of mega menu a bigger icon than 16 px using this for an 32×32 px icon :<blockquote>ul.level0 li.mega .has-image {
padding-left: 40px; padding-bottom:5px;
display: block;
background-repeat: no-repeat;
background-position: left top;
}</blockquote>
now the image is going under the menu name because of course is bigger. That’s why I want to move the text to the right a little bit. But how? I have been searching one day, no luck. please help.

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#386051

Hi,

Please post your site URL.

[leonardcraciun Friend leonardcraciunJoin date: April 2011Posts: 88Downloads:20Uploads:34 Thanks: 12]

#386283

http://www.yourpresent.co.uk
Pls go to mega menu , than “Features”, “Layout” and have a look at “Default (main + left + right)” there is the problem. even if I make the first colum bigger the text is going to stay on top of the icon. Thank you for your time and I am looking forward for an replay.

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#386290

Hi,

Place following code in your template.css file

<blockquote>div.megacol span.has-image {
background-position: left 1px;
background-repeat: no-repeat;
display: block;
overflow: hidden;
padding-left: 40px;
}</blockquote>

If you need to increase or decrease the distance between image and text again, you need to change value of padding-left in above code.

After you save the templa.css, check if you can see the change in menu. If you cant see the change, then
1. Go Extensions>Template manager and click on the template name to edit it.
2. In GLOBAL tab, you will find an option Optimize CSS, change the option to NO. Check the menu again.

[leonardcraciun Friend leonardcraciunJoin date: April 2011Posts: 88Downloads:20Uploads:34 Thanks: 12]

#386373

I was opening the template.css located here: c:wamp/www/templates/ja_social/css/
unfortunately I don’t have any code like this:
<blockquote>div.megacol span.has-image {
background-position: left 1px;
background-repeat: no-repeat;
display: block;
overflow: hidden;
padding-left: 40px;
} </blockquote>
Have I done something wrong?
Thank you.

[leonardcraciun Friend leonardcraciunJoin date: April 2011Posts: 88Downloads:20Uploads:34 Thanks: 12]

#386383

Now I understand I supposed to “place” there the code.
I did it in the bottom of the template.css like in attachment “template css padding left text”
NO changes.
Than I went to Extensions>Template manager>Global and I have done the following ( see attachment named: “optimize css – No”)
Still no changes.
Please help.
I work on local at the moment.

---

Attachments:

1. 
2. 

[leonardcraciun Friend leonardcraciunJoin date: April 2011Posts: 88Downloads:20Uploads:34 Thanks: 12]

#386467

I have spent today more time in figuring out how to add some padding to the text. I have tried the solution above. Doesn’t work . Any other suggestions? Thank you in advances,
Leonard.

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#386468

Please add this code:


.ja-megamenu ul.level0 li.mega.active .has-image {
background-position: left center;
}

to templates.css in templates/ja_social/css/

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#386493

Hi Leonard,

Make one change in the code I had given.
Previously it was<blockquote>padding-left: 40px;</blockquote>
Change it to <blockquote>padding-left: 40px !important;</blockquote>

Even after you placed the code in template css, the megamenu css was overriding it, but now it should work with !important…

[Author]

Posts