Joomla Templates Club 406,261 posts

[An LeFevre Friend An LeFevreJoin date: September 2014Posts: 48Downloads:57Uploads:2 Thanks: 8]

#187993

Hello.

I’m using Mitius template for a client and have changed the color of the mainnav megamenu…specifically, .navbar-inner to reflect my design. It looks good when viewing on regular desktop, but when I go to view it on iPhone or iPad, the navbar color remains the original.

What specific CSS is overriding my changes as dictated from custom.css? What is pages and code is controlling this? And, once identified, can I just specify it in custom.css so that all my customizations do not get updated when I need to update the template?

Thanks!
An 🙂

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#495000

All customization for css, you can put it into /templates/ja_template_name/css/custom.css file. This file will not be overridden when you upgrade template.

About changing background color on mega menu:


.t3-megamenu .mega-nav .mega-group > span,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > span {
background: #333;
color: #fff;
font-size: 14px;
font-family: 'novecento_wide_lightbold', sans-serif;
font-weight: normal;
margin-bottom: 15px;
padding: 8px 10px;
line-height: 1;
}
.t3-megamenu .mega-nav .mega-group > span:hover,
.t3-megamenu .mega-nav .mega-group > span:active,
.t3-megamenu .mega-nav .mega-group > span:focus,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > span:hover,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > span:active,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > span:focus {
background: #333;
color: #fff;
}
.t3-megamenu .mega-nav .mega-group a.mega-group-title,
.t3-megamenu .mega-nav .mega-group > .mega-group-title,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title,
.t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title {
background: #333;
color: #fff;
font-size: 14px;
font-family: 'novecento_wide_lightbold', sans-serif;
font-weight: normal;
padding: 8px 10px;
line-height: 1;
text-shadow: none;
display: inline-block;
}
.t3-megamenu .mega-nav .mega-group a.mega-group-title:hover,
.t3-megamenu .mega-nav .mega-group > .mega-group-title:hover,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title:hover,
.t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title:hover {
background: #333;
color: #fff;
}


1 user says Thank You to Ninja Lead for this useful post

1. edd

[Author]

Posts