Joomla Templates Club 406,261 posts

[hanifahmed Friend hanifahmedJoin date: August 2008Posts: 576Downloads:0Uploads:5 Thanks: 67 Thanked: 141 times in 110 posts]

#134355

Take a look at my top menus at:

http://www.lifeskillsdevelopment.org

Notice how the bottom of the menu is noticeably inconsistent to the rest of the menu and how the highlighted part of the menu is not aligned properly to the text.

The only change I made to the CSS is that to change the colour in between the options to dark green.

All help appreciated.

Thanks.

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#276250

Hi !
you can fix it following way below :
Open ja.moomenu.css file in templates/ja_edenite/ja_menus/ja_moomenu/ folder, find following code section at about line 116 :


#ja-cssmenu li ul {
background:#005826 url(../../images/grad2.gif) repeat-x scroll center bottom;
border:1px solid #005826;
}


change to :


#ja-cssmenu li ul {
background:#005826 url(../../images/grad2.gif) repeat scroll center bottom;
border:1px solid #005826;
}


[hanifahmed Friend hanifahmedJoin date: August 2008Posts: 576Downloads:0Uploads:5 Thanks: 67 Thanked: 141 times in 110 posts]

#276254

Hey
I made the change like you asked – but it came out 10 times worse!!!!
See attached screen shot. I uploaded the previous one back to how it was for now.

Thanks though.

---

Attachments:

1. 

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#276381

Hi hanifahmed !
obove my solution is way for fix last menu item in sublevel have color diffirent with rest part ! i really haven’t known your problem ! Please send me a screenshot with comment on it , i will check it for you !

[hanifahmed Friend hanifahmedJoin date: August 2008Posts: 576Downloads:0Uploads:5 Thanks: 67 Thanked: 141 times in 110 posts]

#276422

Hi

Attatched is the problem I am having. In my previous post, attatched is the outcome of the first solution I provided (which does not work).

I want it to be smooth allthroughout the menu.

Thanks.

---

Attachments:

1. 

[rowsoni Friend rowsoniJoin date: November 2008Posts: 5Downloads:0Uploads:0 Thanks: 2 Thanked: 1 times in 1 posts]

#280428

I have solved a similar problem I had myself (I posted a reply to my own post a few minutes ago). The problem you have, I think, is that the dark green colour you have specified for the intermediate menu lines,#005826, doesn’t quite match the top of the background for the bottom menu item. From the lifeskillsdevelopment.org site, it would appear the colour should be closer to #027533. I would try changing your original code in the css file to that or something close to it.

1 user says Thank You to rowsoni for this useful post

1. hanifahmed

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#280435

hanifahmed;85548Notice how the bottom of the menu is noticeably inconsistent to the rest of the menu[/quote]
Find on line 115 of ja.moomenu.css

/* 2nd level and above */
#ja-cssmenu li ul {
border: 1px solid #005826;
background: url(../../images/grad2.gif) repeat-x bottom #005826;
..and change to….

/* 2nd level and above */
#ja-cssmenu li ul {
border: 1px solid #005826;
background: #007816; /* Or colour of your choice. */

scotty wrote:

…and how the highlighted part of the menu is not aligned properly to the text.

Both problems are caused by your link text being long and wrapping to the next line. The background hover gif, images/grad2-1.gif, is not high enough to cover the whole space. To fix find online 143 of ja.moomenu.css…

#ja-cssmenu li ul a:hover,
#ja-cssmenu li ul a:active,
#ja-cssmenu li ul a:focus,
#ja-cssmenu ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchild-activesfhover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild-activesfhover {
background: url(../../images/grad2-1.gif) repeat-x top #005826;
color: #FFFFFF;
}
and change to…

#ja-cssmenu li ul a:hover,
#ja-cssmenu li ul a:active,
#ja-cssmenu li ul a:focus,
#ja-cssmenu ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchild-activesfhover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild-activesfhover {
background: #91AE4E;
color: #FFFFFF;
}

1 user says Thank You to scotty for this useful post

1. hanifahmed

[hanifahmed Friend hanifahmedJoin date: August 2008Posts: 576Downloads:0Uploads:5 Thanks: 67 Thanked: 141 times in 110 posts]

#280539

Fan-bloody-tastic.

Problem solved.

Many thanks to all of you guys!

[Author]

Posts