Customization Restaurant Demo

[gaga4]

Hello,

I’m customizing the Restaurant demo. I would like to change the color displaying on the left of the Navbar when I’m on the Menu. I can’t figure out where to set this parameters and had a look at the CSS and couldn’t find out. Thank you for your help.

Gaëlle

[mldarshana]

Hi Gaëlle,

Thanks for writing in! Try adding the following CSS rule into your X -> Theme Options -> CSS area and change the color value according to your preference.

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 8px 0 0 0 #336699;
}

Thanks!

[gaga4]

Thanks a lot,

The CSS is working fine. I would like to change as well the color of the footer background, the footer menu and social icons. Is there a CSS I could implement ? Thank you in advance.

Gaëlle

[thai]

Hi There,

Please also add this custom CSS:

footer.x-colophon.bottom {
    background: #f0f0f0;
}

.x-colophon.bottom .x-nav li a,
.x-colophon.bottom .x-social-global a {
    color: #000;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[gaga4]

Thanks a lot,

I’m actually learning to write CSS, it should halp a lot.

Gaëlle

[Prasant]

You are most welcome.