Joomla Templates Club 406,261 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#157443

I am using the kc_cufon plugin (http://www.keashly.net/typography/kc…nt-replacement) for my main navigation menu items – which works perfectly. I’m using the mega-menu and, unfortunately, the cufon seems to be affecting my sub-navigation items upon mouse hover/rollover – which is an unwanted effect. I want the sub items (within the drop-down) to be Arial font.

The Main Navigation menu is across the top (i.e. Guitars-Drums-Keyboards, etc.). Note the sub-navigation items when you rollover with your mouse – the font changes to the “League Gothic” font I specified for the main navigation items.

Here is the CSS for the top level nav items . . .


#ja-mainnav ul.level0 li a {
display: block;
text-decoration: none;
font-size: 30px;
color: #000;
font-weight: 200;
padding-top: 16px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
height: 28px;
text-transform: uppercase;
}

#ja-mainnav ul.level0 li a:hover,
#ja-mainnav ul.level0 li a:active,
#ja-mainnav ul.level0 li a:focus
#ja-mainnav ul.level0 li:hover a,
#ja-mainnav ul.level0 li.sfhover a,
#ja-mainnav ul.level0 li.havechildsfhover a,
#ja-mainnav ul.level0 li.havechild-activesfhover a {
color: #00F;
}

#ja-mainnav ul.level0 li.havechild:hover a,
#ja-mainnav ul.level0 li.havechild:focus a,
#ja-mainnav ul.level0 li.havechild:active a {
}

#ja-mainnav ul.level0 li a.active,
#ja-mainnav ul.level0 li a.active:hover,
#ja-mainnav ul.level0 li a.active:active,
#ja-mainnav ul.level0 li a.active:focus {
}

ul.level0 li.mega li.mega {
text-align: left;
float: none !important;
}

and here is the CSS for the font for the subvav items . . .


#ja-mainnav ul.level0 li ul li {
background: url(../../images/menu-bg.gif) repeat-x left bottom;
border-bottom-width: 1px;
border-right-style: none;
border-bottom-style: none;
border-bottom-color: #E7E7E7;
}

#ja-mainnav ul.level0 li ul li.group {
background-image: none;
border: 0px;
padding-bottom: 1px;
}

/* Category Sub Items --- */
#ja-mainnav ul.level0 li ul a {
border-right: none;
margin: 0;
height: auto;
line-height: normal !important;
background: none !important;
text-transform: none;
font-weight: normal;
font-size: 11px;
white-space: nowrap;
color: #333 !important;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
}

#ja-mainnav ul.level0 li.havesubchild,
#ja-mainnav ul.level0 li.havesubchild-active {
background: url(../../images/menu-bg.gif) repeat-x left bottom;
}

#ja-mainnav ul.level0 li ul a:hover,
#ja-mainnav ul.level0 li ul a:active,
#ja-mainnav ul.level0 li ul a:focus,
#ja-mainnav ul.level0 ul li.over,
#ja-mainnav ul.level0 ul li.sfhover,
#ja-mainnav ul.level0 ul li.havesubchildsfhover,
#ja-mainnav ul.level0 ul li.havesubchild-activesfhover {
color: #54992F !important;
}
/* Styling ---*/
ul.level1 li.mega a.mega {
background: none;
border: 0;
font-weight: normal;
padding: 0px;
}

ul.level1 li.mega a.mega span.menu-title {
background: none;
padding: 0;
font-size: 110%;
color: #000;
}

ul.level1 li.haschild {
background: url(../../images/arrow.png) no-repeat 95% center;
padding: 0;
}

I have tried to specify the font for the sub-nav items using the cufon plugin and utilizing the relative css classes – but it does not seem to work.

Any thoughts on how to overcome this issue so that the sub-nav items display with the Arial font I want them to?

:((

[Hayden A Friend Hayden AJoin date: April 2010Posts: 282Downloads:0Uploads:20 Thanked: 54 times in 53 posts]

#366842

Dear
you open file /templates/ja_zeolite_ii/css/menu/mega.css find line
#ja-mainnav ul.level0 li ul a {
border-right: none;
margin: 0;
height: auto;
line-height: normal !important;
background: none !important;
text-transform: none;
font-weight: normal;
font-size: 11px;
white-space: nowrap;
color: #333 !important;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
}and delete font-family: Arial, Helvetica, sans-serif;

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#367080

Thanks for the response … but I’m thinking, perhaps, you misunderstand what I’m trying to accomplish.
I want the sub nav items to be in Arial font – not to change to League Gothic upon mouseover.

In other words, I want the two areas/sections to be independent of one another (for font purposes)

I’m thinking, perhaps, that the “#ja-mainnav” designation is linking level0 and level1 (assuming “level0″controls the main nav items and “level1” controls the subnav items) – thereby causing the unwanted mouseover effect. So, what I’m wondering is if there’s some kind of code fix or modification I can use to “unlink” the font relationship between level0 and level1, while still maintaining the mega menu functionality.

Grasping at straws ?? :((

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#367811

I went a different route with this, and it works great —> http://www.joomlart.com/forums/topic/how-to-use-fontface-for-alternative-fonts/

ISSUE RESOLVED

😀

[Author]

Posts