Joomla Templates Club 406,261 posts

[Rodriguez Friend RodriguezJoin date: March 2006Posts: 3Downloads:0Uploads:2]

#120562

I’d like make more thin the main navigation. Can I do it?

Thanks

[instantinlaw Friend instantinlawJoin date: February 2007Posts: 1646Downloads:6Uploads:28 Thanks: 68 Thanked: 210 times in 62 posts]

#221302

Ok here is what you need to do.
If you are using the default menu (#1 Split Menu)

# Choose your prefer Menu Type
$ja_menutype = 1; // 1: Split Menu; 2: Son of Suckerfish Dropdown Menu; 3: Transmenu; 4: Script Dropline Menu;

Open ja-splitmenu.css and search for


#ja-splitmenu a {
float: left;
margin: 0;
padding: 8px 20px 7px;
display: block;
color: #484848;
background: url(../images/mainnav-sep.gif) no-repeat top right;
text-decoration: none;
}


And change to


#ja-splitmenu a {
float: left;
margin: 0;
padding: 2px 20px 2px;
display: block;
color: #484848;
background: url(../images/mainnav-sep.gif) no-repeat top right;
text-decoration: none;
}


Then open template_css.css and search for


span.ja-sitetool {
margin: 0;
padding: 8px 0 7px 23px;
display: block;
color: #F85703;
font-weight: bold;
text-align: center;
text-decoration: none;
cursor: pointer;
}


And change to


span.ja-sitetool {
margin: 0;
padding: 2px 0 2px 23px;
display: block;
color: #F85703;
font-weight: bold;
text-align: center;
text-decoration: none;
cursor: pointer;
}


Then in the same CSS file search for


#ja-usertoolswrap {
float: right;
width: 100px;
display: block;
background: url(../images/sitetool-bg1.gif) no-repeat top left;
position: relative;
z-index: 999;
}


And change to


#ja-usertoolswrap {
float: right;
width: 100px;
display: block;
position: relative;
z-index: 999;
background-repeat: no-repeat;
background-position: left top;
}


And in the same CSS file search for


#ja-usertoolswrap:hover, #ja-usertoolswrap.ja-toolswraphover {
background: url(../images/sitetool-bg2.gif) no-repeat top left #FFFFFF;
}


And change to


#ja-usertoolswrap:hover, #ja-usertoolswrap.ja-toolswraphover {
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: left top;
}


And you will have a nice thin menu.

Good luck!

[Author]

Posts