Joomla Templates Club 406,261 posts

[rfairman Friend rfairmanJoin date: March 2008Posts: 11Downloads:0Uploads:0 Thanks: 6]

#167286

Good Morning,
My template is looking great!! thanks again tcraw1010 🙂

http://bistro.canadianbeaconregistry.ca

I just need to change the colour of the navigation menu to black, with a
white divider….so that it is as close to the menu on this site as
possible:
http://www.servicecanada.gc.ca/eng/home.shtml

Thanks again; you guys are great!
Rhonda

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

#405665

<em>@rfairman 258984 wrote:</em><blockquote>Good Morning,
My template is looking great!! thanks again tcraw1010 🙂

http://bistro.canadianbeaconregistry.ca

I just need to change the colour of the navigation menu to black, with a
white divider….so that it is as close to the menu on this site as
possible:
http://www.servicecanada.gc.ca/eng/home.shtml

Thanks again; you guys are great!
Rhonda</blockquote>

Let’s start by making the background black. Open mega.css and add the line in red below (about line 13)

.ja-megamenu {
background-color: black;
margin: 0;
padding: 0;

}

We also need to change the font colour so change megas.css line 1 to

.ja-megamenu a {
color: #ffffff;

}

For the white borders we could do that in css or simply change the image nav-sep.png to a white line.

1 user says Thank You to Phill for this useful post

1. rfairman

[rfairman Friend rfairmanJoin date: March 2008Posts: 11Downloads:0Uploads:0 Thanks: 6]

#405691

done done and done..
now to reduce the height of the menu just slightly, and make the divider go bottom to top (remove “center”?)

thanks phill!

<em>@phill luckhurst 258997 wrote:</em><blockquote>Let’s start by making the background black. Open mega.css and add the line in red below (about line 13)

.ja-megamenu {
background-color: black;
margin: 0;
padding: 0;

}

We also need to change the font colour so change megas.css line 1 to

.ja-megamenu a {
color: #ffffff;

}

For the white borders we could do that in css or simply change the image nav-sep.png to a white line.</blockquote>

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

#405746

<em>@rfairman 259030 wrote:</em><blockquote>done done and done..
now to reduce the height of the menu just slightly, and make the divider go bottom to top (remove “center”?)

thanks phill!</blockquote>

In Mega.css adjust the code in red below as required.

.ja-megamenu ul.level0 li.mega a.mega {
font-family: "DroidSerifRegular",Arial,sans-serif;
font-weight: normal;
padding: 15px;
text-transform: uppercase;

}

I think the below would look good.

.ja-megamenu ul.level0 li.mega a.mega {
font-family: "DroidSerifRegular",Arial,sans-serif;
font-weight: normal;
padding: 5px 15px;
text-transform: uppercase;

}

1 user says Thank You to Phill for this useful post

1. rfairman

[rfairman Friend rfairmanJoin date: March 2008Posts: 11Downloads:0Uploads:0 Thanks: 6]

#407096

Phil;
If I wanted to change the sub-menu colour – would I do that in the “Child” section?
Right now sub-menu items – like under the Help are not showing because its white on white.
I’ll probably want to change the colour to black, blue on mouseover.
Thanks again, you have been so much help!

[Author]

Posts