Off-canvas menu - how to Change the background and font color

ecuopha

Hi,
Could you please guide me how to change the off-canvas backround and font color of the JA Brickstore template ?
I am creating the custom.css file under the /css folder but only can change the background only.

Thank you very much.

ecuopha

I have created the custom.css file under the templates folder with below code:
.t3-off-canvas {
background: #000000;
color: #ffffff;
}

however, only the background of the off-canvas menu change to white, the text is still white, not change to black as in the color value.
Thanks.

pavit

Hi ecuopha

Try with this

.t3-off-canvas {
	background:#yourcolor;
}

.t3-off-canvas .t3-off-canvas-body .nav > .active > a, .t3-off-canvas .t3-off-canvas-body .nav > .active > span, .t3-off-canvas .t3-off-canvas-body .nav > .current > a, .t3-off-canvas .t3-off-canvas-body .nav > .current > span {
	color:#yourcolor;
}
.t3-off-canvas .t3-off-canvas-body .nav > li > a, .t3-off-canvas .t3-off-canvas-body .nav > li > span {
color:#yourcolor;
}
.t3-off-canvas .t3-off-canvas-body .module-title span {
	color:#yourcolor;
}

ecuopha

pavit
Hi Pavit,
Thanks for the respond, I have updated the custom.css., however, only the backround color changed,
Please help to take a look at my site with the updated custom.css.

http://54.206.65.47/

Thanks and best regards,
Andy

pavit

ecuopha

You can edit your first post and add to it a super user account to your back end, we will have a look at your custom.css

ecuopha

pavit

Hi Pavit,
Done

pavit

ecuopha

It seems off-canvas was unpublished , could you please enable it again and disable css optimization from your backend general ?

ecuopha

pavit
Hi Pavit,
Off-canvas was published from begining, and I just disable the optimise CSS.
Please help to take a look,
Thanks and regards,
Andy

Ninja

ecuopha
Hi
Add this code in custom.css file as well to change the menu item color to black


.t3-off-canvas .t3-off-canvas-body .nav > li > a, .t3-off-canvas .t3-off-canvas-body .nav > li > span {
color:#000000;
}

Regards

ecuopha

Ninja
Hi,
I have added your code to the custom.css but it still does not work.
And could you please also help to change the background and text color of both black circles in the attached image.
Thanks and best regards,
Cuong

Ninja

ecuopha
Hi
Kindly clear browser cache to see the new changes on site
http://prntscr.com/piy9wn
add this code for logo bg color and sidebar button bg


.t3-off-canvas .t3-off-canvas-header .logo .logo-image {    background: #fff;}
body.header-vertical .t3-header {
    background: #000000;
    color: #858181;}

ecuopha

Ninja
Hi Pankaj,
Thank you very much for the response.
I have cleared the browser cache, and now the level 1 of menu is changed to black, but the second level is still white.
And also the logo background is still black.
Thank you very much for your support.
Best regards,
Andy

Ninja

ecuopha
Hi
Here is code for submenu color

.t3-off-canvas .t3-off-canvas-body .dropdown-menu li span {
    color: #ffffff;}

For logo bg use this

body.header-vertical .logo-image {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #000000;}

ecuopha

Ninja
Hi Pankaj,
The dropdown text now 1 line is with black and 1 line is still white. e.g: under the SHOP I have 2 sub menus: All categories (white), and My Account (black). It is supposed to be all black.

And also the next dropdown level ( e.g. the level under the All Categories is all white as well. Can you help to change it to black.
Thanks and regards,
Andy

Ninja

ecuopha
Hi
for submenu use this code

.t3-off-canvas .t3-off-canvas-body .dropdown-menu li a, .t3-off-canvas .t3-off-canvas-body .dropdown-menu li span {
    
color:#000000;
}

ecuopha

Ninja
Thank you so much Joomlart experts.
It works completely for my site now.
Best regards,
Andy.