MailBlade
MailBlade

Reputation: 339

Change menu style on a single page?

I'd like to know how you can change the appearance of a menu on a single page in your website?

Basically, I have 6 menu items in my "Main Menu". I'm using a menu module which came with my template package, "AS Superfish Menu" is what it is called.

When you scroll down the page, the menu reacts by reducing everything in size. It's a responsive menu. The background is transparent. Now, I just need it to NOT be transparent on one single menu item called "History". It must still be transparent on all the others.

I've tried adding a custom class to the "Page Display" in the Menu Item configuration for "History", but it did not work.

Any help would be appreciated.

Upvotes: 0

Views: 122

Answers (1)

Jithin Raj  P R
Jithin Raj P R

Reputation: 6797

In your case, if you can add class to the menu -

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

if the style is not appearing then try using !important in the style, eg:

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

In your case, if you can't add class to the menu then use -

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

Here the :nth-child(3) is the number of the menu History and am guessing it would be a <li> if it does not, then use the tag of the child menu.

If you provide HTML we can be more specified.

Upvotes: 2

Related Questions