Joomla Templates Club 406,261 posts

[janjak Friend janjakJoin date: July 2012Posts: 95Downloads:53Uploads:37 Thanks: 22 Thanked: 4 times in 1 posts]

#196096

Hello !

How can I change the background color from off-canvas menu on http://www.eac-aime.com ?

The mega menu is fine, I want only change the background color from the zone showed on attachment.

I have tried several tips in this forum, no one is working….

Thanks for help !

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#528006

You can try add following css rule into this file: /templates/ja_argo/css/custom.css

@media (max-width: 767px){

.off-canvas #off-canvas-nav {
background: red;
}

.off-canvas #off-canvas-nav .t3-mainnav .nav-collapse {
background: red;
}

.t3-mainnav .nav-collapse .nav > .nav-home > a:focus,
.t3-mainnav .nav-collapse .nav > .nav-home > a:hover,
.t3-mainnav .nav-collapse .nav > .active.nav-home > a,
.t3-mainnav .nav-collapse .nav > .active.nav-home > a:hover,
.t3-mainnav .nav-collapse .nav > .active.nav-home > a:focus {
background: blue;
}

.t3-mainnav .nav-collapse .nav > li.dropdown.open > a.dropdown-toggle,
.t3-mainnav .nav-collapse .nav > li.dropdown.active > a.dropdown-toggle {
background: blue;
}

.t3-mainnav .nav-collapse .nav > li > a,
.t3-mainnav .nav-collapse .dropdown-menu a {
background: red;
}

.t3-mainnav .nav-collapse .dropdown-menu {
background: red;
}
}


The background color should look like this: http://prntscr.com/33xb3z

You can change to your desired color then.

[janjak Friend janjakJoin date: July 2012Posts: 95Downloads:53Uploads:37 Thanks: 22 Thanked: 4 times in 1 posts]

#528012

Hello !

Thank for answering !

I had tried this… but it’s changing all the menu colors, I don’t want to change the top mega menu colors…

May be what I’m asking for is not possible in this template ?

Regards

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#528018

Could you send me screenshots to illustrate how you want to achieve?

[janjak Friend janjakJoin date: July 2012Posts: 95Downloads:53Uploads:37 Thanks: 22 Thanked: 4 times in 1 posts]

#528047

Oh, excuse me, the first attachement was lost….

On capture1, in blue, the area I want to change.
On capture2 the mega menu from the site.

I think It would be really nice to have the off-canvas menu background and link colors as on mega-menu in capture2… if possible…

Regards,

---

Attachments:

1. 
2. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#528193

#1: So you can just change the red color as suggested above to the color at your choice.

#2: Do you mean that you want to change the background of the sub menu in dropdown? If so, you can open this file: /templates/ja_template/css/custom.css and add rule below:


.t3-megamenu .mega > .mega-dropdown-menu {
background-color: /*your color goes here*/;
}


[janjak Friend janjakJoin date: July 2012Posts: 95Downloads:53Uploads:37 Thanks: 22 Thanked: 4 times in 1 posts]

#528335

Hello !

Work in progress !
As you can see on the screenshot, there is an other step before the dropdown menu will displaying like the mega menu (capture2 in my precedent post)…

Regards

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#528402

HI Janjak,

If you want to have dropdown menu like this: http://prntscr.com/34rdwt

You can add this css rule into /templates/ja_argo/css/custom.css file

@media (max-width: 767px){
.t3-mainnav .nav-collapse .dropdown-menu {
background-color: #FFFFFF
}
}


Best,

[janjak Friend janjakJoin date: July 2012Posts: 95Downloads:53Uploads:37 Thanks: 22 Thanked: 4 times in 1 posts]

#528471

Hello !

Always in progress…

I don’t really want to have a menu like this : http://prntscr.com/34rdwt

What I need is a submenu with a white background, as I show in a precedent screenshot “capture2”.
I attached it again…

Thanks and have a nice week-end !

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#528893

You can try adding this css rule inside above block code:


@media (max-width: 767px){
.t3-mainnav .nav-collapse .dropdown-menu {
background-color: #FFFFFF
}
.t3-mainnav .nav-collapse .nav > li > a:after,
.t3-mainnav .nav-collapse .dropdown-menu a,
.t3-mainnav .nav-collapse .dropdown-menu a:hover {
background-color: #FFFFFF !important;
}
}


2 users say Thank You to Saguaros for this useful post

1. wingly
2. janjak

[janjak Friend janjakJoin date: July 2012Posts: 95Downloads:53Uploads:37 Thanks: 22 Thanked: 4 times in 1 posts]

#529170

Exactly what I want !
Thank you !

[Author]

Posts