Alter the CSS class within the Wayfinder MODx menu based on the page template

I have a dropdown menu that was created using Wayfinder in MODx. My goal is to customize specific page links within the dropdown based on the template each page is using.

For example, if a page is using template "A", I want its link in the dropdown to be given the class A so that it can be styled accordingly.

How do you suggest accomplishing this?

Additionally, I would like to arrange the page links in the dropdown according to the templates of their respective pages.

Thank you!

Edit:

In essence, my objective is to personalize certain page links in the dropdown based on a template variable I have established. I have created a TV called [status] that allows users to select one of three radio options when editing a page.

So, for instance, if a page's [status] is set to "A", its link in the dropdown will receive the class A and can then be styled accordingly

cssmenunavigationmodxwayfinder

Answer №1

How to add a class to the body tag:

<body class="custom-[[*custom]]">

You can then reference it in your CSS like this:

.my_custom_menu {
    /* apply common styles here */
} 
.custom-design .my_custom_menu {
    /* specific style for custom design */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating external CSS files via the link tag in a web component

I'm attempting to incorporate Bulma from CDN within a custom web component, but it doesn't seem to be functioning properly. Here is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <title>hello</title& ...

javascriptcssweb-component

The Slick carousel code downloaded from their official website is malfunctioning

I found this code on slick's website, but it's not working for me. Can anyone spot what I might be missing? http://codepen.io/anon/pen/pyEddO <html> <head> <title>My Awesome New Website</title> <link rel="styles ...

jqueryhtmlcsscarouselslick.js

How can I create a smaller clickable zone inside a div element?

My task is quite intricate. To begin, I have a hidden wrapper div that fades in when the mouse hovers over it and fades out when the mouse moves away. The next step is to include an image div inside the wrapper div. This image div, larger than the wrapper ...

cssoverflow

Using the mouse scroll to activate the $anchorScroll effect in Angular instead of a click

I have been searching for a solution to my problem without any luck so far. Hopefully, someone here can provide guidance and help me find a solution. My goal is to replicate the behavior shown in the second example on the following page: https://docs.angu ...

htmlcssangularjsscrollanchor-scroll

What's the process for converting offsetX and offsetY pixel coordinates to percentages?

Currently, I am working on a project where I need the offsetX and offsetY coordinates to be displayed in percentage (%) format while hovering over a div element. By default, these coordinates are shown in pixels. Here is an example of the structure: < ...

javascripthtmlcssvue.js

Tips for distinguishing the beginning and ending points of wrapped text in the Firefox browser

Within my work, I am utilizing a contentEditable span where I aim to position an element with position: absolute on the same line as the cursor. However, issues arise when text wrapping occurs - causing abnormal behavior at the start and end of wrapped lin ...

javascripthtmlcss

Avoiding Ajax overload/server collapse in an Arduino/ESP8266 setting

I've recently been delving into Arduino programming to host an HTML/CSS/JavaScript webpage on an Adafruit HUZZAH ESP8266 breakout board. Please pardon any unconventional methods I may be using. My approach involves utilizing Ajax to update pressure g ...

javascriptcssajaxarduinoesp8266

Designing a webpage layout using Bootstrap 4 that includes a horizontal/inline form and two columns

Just when I felt confident in my understanding of bootstrap, it seems to be giving me trouble :( I am aiming to create a layout with 2 columns, each containing a question followed by a small text box for entering a number. Here is an example of the layou ...

htmlcsstwitter-bootstrapbootstrap-4

CSS media queries with precise inequality restrictions

Imagine the following scenario: @media only screen and (max-width: 600px) { nav { display: none; } } @media only screen and (min-width: 601px) { nav { display: block; } } This setup can lead to undefined behavior for a wid ...

htmlcssmedia-queries

Images for navigating forward and backward in a jQuery datepicker

I'm experimenting with setting custom images for the previous and next month buttons. I attempted to utilize the prevText / nextText options of the datepicker in order to include a span with my own CSS class definition. However, this resulted in the c ...

jquerycssjquery-uidatepicker

Trouble displaying a cloned HTML element

I used jQuery to create a copy of a div and positioned it on the page, but for some reason, it's not displaying. When I checked using F12 tools, all the properties such as top, left, height, and width seemed to be set correctly. <div id="divLine" ...

jqueryhtmlcss

What could be causing the bullet not to appear in Internet Explorer 6

It is visible in Firefox, but not in IE (specifically IE6). <style type="text/css"> li { list-style-type:disc; } </style> <div style="margin: 2px auto 15px; padding: 5px 0px; width: 480px; text-align: center;"> <ul style="margin: 0; ...

cssinternet-explorerhtml-lists

What is the best way to completely stretch 2 embedded div elements?

Is there a way to stretch two <div> elements to be 50% wide? Here is a jsFiddle with the solution. HTML <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> CSS di ...

htmlcss

Align images of varying sizes vertically within div containers, even when the image is larger than the div itself

I'm facing a challenge when it comes to aligning images vertically inside divs. The problem arises due to the following conditions: The images will have varying and unknown sizes. These images are larger than the divs they are contained in, requiri ...

javascriptjquerycssvertical-alignment

Leveraging ajax for showcasing page content in a floating div container

I am in need of creating a button on my page that, when clicked, will display a floating div above the page and load another internal page. I believe this can be achieved using Ajax, but I have no experience with it and don't know where to start. Her ...

javascriptcssajax

Create a div element that can be expanded on smaller devices

Is it possible to expand a div while hovering on a small or x-small device? I want to achieve something like this: https://i.sstatic.net/doJKa.png Currently, I can only hide the yellow div when the page is displayed on a small device. I am looking for a ...

javascriptcssresponsive-designbootstrap-4

Get rid of the Border on Bootstrap 5 Accordion Button

Upon inspecting the Bootstrap 5 accordion, I noticed an outline that I would like to remove. I believe the element responsible for this outline may be the button. Despite attempting to target all possible elements with the following code: .accordion-item, ...

csstwitter-bootstrapbootstrap-5

The Nivo slider's position is being adjusted

I've been trying to adjust the width of the Nivo slider on my blog. Right now, it's taking up the entire width of the page wrapper and I want to add some space on the left and right sides so that it's centered and lines up with the navigatio ...

css

Using jQuery .css({}) is not causing negative margin to function as expected

$('#thankYouMessage').css({"height": textHeight, "margin-top:": "-52px", "padding-left": "19px"}); The CSS property 'padding-left:' will be applied as expected, but the negative margin will not take effect. The 'margin-top:' ...

javascriptjquerycss

Combining Blazor with Bootstrap for seamless form validation

After gaining some experience with Razor, I decided to explore Blazor. However, I encountered a familiar challenge - integrating validation with Bootstrap. The issue lies in the mismatch between Blazor's validation result classes and those of Bootstra ...

cssvalidationbootstrap-4blazor