Is it possible to modify the menu design for a specific page?

Question

Is it possible to modify the menu design for a specific page?

Is there a way to customize the appearance of a menu on a specific page of your website?

My website's "Main Menu" has 6 menu items, and I'm currently using a menu module called "AS Superfish Menu". This module is set up to make the menu responsive by shrinking in size as you scroll down the page, with a transparent background. However, I would like to make the background NOT transparent on a single menu item called "History", while keeping it transparent on all the other items.

I attempted to add a custom class in the "Page Display" configuration for the "History" menu item, but it didn't have the desired effect.

If anyone has any suggestions or solutions, I would greatly appreciate it. Thank you!

html css joomla

Answer 1

Answer №1

If you have the ability to assign a class to the menu -

.menuClass{
 background: rgb(255, 255, 255);
}

If the desired style is not showing up, consider using !important in the style declaration, like so:

.menuClass{
 background: rgb(255, 255, 255) !important;
}

If assigning a class to the menu is not an option, you can try -

 .mainMenuClass li:nth-child(3) {
   background: rgb(255, 255, 255);
 }

In this case, :nth-child(3) pertains to the menu item labeled History, assuming it is within an <li> element. If not, target the appropriate child element.

For more precise advice, sharing the HTML code would be beneficial.

Answer 2

If you have the ability to assign a class to the menu -

.menuClass{
 background: rgb(255, 255, 255);
}

If the desired style is not showing up, consider using !important in the style declaration, like so:

.menuClass{
 background: rgb(255, 255, 255) !important;
}

If assigning a class to the menu is not an option, you can try -

 .mainMenuClass li:nth-child(3) {
   background: rgb(255, 255, 255);
 }

In this case, :nth-child(3) pertains to the menu item labeled History, assuming it is within an <li> element. If not, target the appropriate child element.

For more precise advice, sharing the HTML code would be beneficial.

Is it possible to modify the menu design for a specific page?

Answer №1

Similar questions

"Utilize the inline display property to keep elements hidden

Apply bold formatting to the HTML text only, leaving the EJS variable untouched beside it

Is there a way to hide an image once my scrollable div has reached a specific height?

A guide on extracting data from a Script element in an HTML file and saving it to a CSV file using Python Selenium

Add a variety of icons to every item in a list using HTML

CSS - Issue with aligning image captions

Visual Studio 2017 experiencing compatibility issues with Bootstrap

Code snippet that will emphasize the active page if there are multiple pages, such as highlighting page 2

Maximizing space efficiency in Bootstrap 5

What is preventing me from being able to import a React component from a file?

Guide to centering a button on an image using bootstrap 4

Is using window.postMessage(...) a viable option for facilitating cross domain file uploads?

Modify PHP script to extract the Document Object Model (DOM) from a specified URL

Ways to position the navigation menu alongside a search bar and a dropdown tab?

Display a text box upon clicking an item

What could be causing my title (titulo) to be misaligned? Why aren't justify and align functions fixing the issue?

Easy steps for aligning text with shiny html

Retrieving selected options from a jQuery mobile multiselect for database storage

displaying and activating element using jQuery

What is the best way to design versatile div containers that combine the float property with fluid dimensions?