Configuring menu decoration on Serenity template

Issue

Votes

Undo

bibbp
Commercial Templates
Tuesday, 15 January 2019
Subscribe via email

Hi Ciaran,

I have a client who wants an image (a roof) to appear over each top line menu items, but not over sub-menu items. They want the roof to stay in place if that menu item is active.
I have a process that works but it requires manual creation of CSS for every new menu item, supposing the menu item is .item-136 and the sub menu item is .item-137, then I have the following CSS:

.item-136.active {
background-image: url("https://independentliving.scottsproject.org.uk/images/web/Roof.png"

;
background-repeat: no-repeat;
background-position: 50% 0%;
}
.item-136 a:hover {
background-image: url("https://independentliving.scottsproject.org.uk/images/web/Roof.png"

;
background-repeat: no-repeat;
background-position: 50% 0%;
}
.item-137 a:hover {
background-image: none;
}

I am sure if I put a class ("roof"

on the Link Class of just the top menu item, then I can't understand why the following does not work: the hover piece works but not the active.

.roof.active {
background-image: url("https://independentliving.scottsproject.org.uk/images/web/Roof.png"

;
background-repeat: no-repeat;
background-position: 50% 0%;
}
.roof:hover {
background-image: url("https://independentliving.scottsproject.org.uk/images/web/Roof.png"

;
background-repeat: no-repeat;
background-position: 50% 0%;
}

Any help would be greatly appreciated

Kind regards

Peter

Responses (5)

ciaran

Accepted Answer Pending Moderation

Votes

Undo

Hi Peter

To select only the active parent menu items and the hover of the parent items, you can use the following CSS selector...

.hornav > ul > li.active a,

.hornav > ul > li a:hover, {

    ...

}

Ciaran

more than a month ago
Commercial Templates
# 1

bibbp

Accepted Answer Pending Moderation

Votes

Undo

Ciaran,

For your readers I also added:

.hornav > ul > li > ul > li.active a,
.hornav > ul > li > ul > li a:hover {
background-image: none;
}

to remove the image from the submenu items.

Thank you very much!

Peter

more than a month ago
Commercial Templates
# 2

bibbp

Accepted Answer Pending Moderation

Votes

Undo

Apologies Ciaran, minor glitch..

If you go to https://www.scottsproject.org.uk/ and select submenu item About Us under the top menu item About Us, then if you place the cursor back over the top level menu item (About Us) then the images appear in the submenu items underneath...these should all be invisible.

Again, any help would be much appreciated!

Peter

more than a month ago
Commercial Templates
# 3

ciaran

Accepted Answer Pending Moderation

Votes

Undo

Hi Peter

To amend replace the following...

.hornav > ul > li.active a, .hornav > ul > li a:hover {

    background-image: url("https://dayservices.scottsproject.org.uk/images/web/Roof.png");

    background-repeat: no-repeat;

    background-position: 50% 0%;

}

With...

.hornav > ul > li.active > a, .hornav > ul > li a:hover {

    background-image: url("https://dayservices.scottsproject.org.uk/images/web/Roof.png");

    background-repeat: no-repeat;

    background-position: 50% 0%;

}

Ciaran

more than a month ago
Commercial Templates
# 4

bibbp

Accepted Answer Pending Moderation

Votes

Undo

Perfect, thanks as always

Peter

more than a month ago
Commercial Templates
# 5

Page :
1

There are no replies made for this post yet.
Be one of the first to reply to this post!

Please login to post a reply

You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here. Register Here »

Forgot Password?

Configuring menu decoration on Serenity template

Site Links

Recommended

Join Our Newsletter