Want to create this kind of navigation

Hello,

I want to know if it's possible to create this kind of navigation -> http://www.welotec.com/en/

past to red, green, and other with contents menu, etc

Best regards,
Ludovic

yes, just target the color-changing areas, with CSS, to change based on the current page.

for example, Assign page 'products' css class 'productspage', also assign your section headings a css class 'headings'

Code:

---

.productspage .topmenu,
.productspage .headings{
background-color: #0F7EB7
}

---

This ensures that when the products page is the current page, that your top menu background and headings background is #0F7EB7 color (the blue color seen on your example website)

Thank you for your reply.

In fact, my interest is not on the top menu but on the central page menu with the pictures.

Thank you for your help.

Ludovic

Quote:

---

Originally Posted by lshrvm

Thank you for your reply.
In fact, my interest is not on the top menu but on the central page menu with the pictures.

---

Just use the same example, except target the specific element you are wanting to effect with the color change.

Quote:

---

Originally Posted by mechaflash

Code:

---

.productspage .topmenu,
.productspage .headings{
background-color: #0F7EB7
}

---

---

So you would just change .topmenu and .headings to whatever element's class you want to target.

Just confirming mechaflash's answer. I've done such a thing with many more colors on Contao. Just add classnames to the page. These class names (for example home and contact) end up in the body class. That means you can style anything on the entire page based on that.

Code:

---

/* default = blue */
h1 {
  font-size: 16px;
  font-weight: bold;
  color: blue;
}

#header {
  height: 150px;
  background-color: blue;
}

/* home = red */
.home h1 {
  color: red;
}

.home #header {
  background-color: red;
}

/* contact = yellow */
.contact h1 {
  color: yellow;
}

.contact #header {
  background-color: yellow;
}

---