Make 1 Menu Item Pop-up By Different Background - Question | JoomShaper

Make 1 Menu Item Pop-up By Different Background

S

Seppe

SP Page Builder 1 month ago

Good morning Is it possible, through custom CSS for example, to make 1 menu item pop-up by using a different background color?

I know it used to work in plain html with some CSS-coding, but when I use the same code, it doesn't seem to work.

0
11 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 month ago #215640

If that menu item is the last one, indeed, you can use Custom CSS to make it more visible.

Example

.sp-megamenu-parent > li:last-child > a {background: yellow; padding: 0 15px}

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 month ago #215613

Hi there!

Thanks for reaching out.

Could you please share an example link of what you are trying to achieve? That will help me check, visualize, and guide you more precisely.

Best regards,

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 month ago #215625

to make 1 menu item pop-up by using a different background color?

Do you mean that on selected subpage there must be different background color or only menu item must have different bg color during "hover" ? Please explain. For me pop-up means only as popup window that appears.

0
S
Seppe
Accepted Answer
1 month ago #215636

Good morning Sorry, maybe in my head it was more clear. :)

I mean, if you have on a website a horizontal menu, with a blue background and white textcolor... that 1 of the menu-items (for example: "webshop") has a red background with white text. So it draws the attention of the visitor.

Like this, where "tab 3" is the "webshop": But it's not the "active" item in a menu.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 month ago #215644

It seems you are talking about tab addon of SP Page Builder. Or this is main menu from the template in the Header? Kindly let me know...

0
S
Seppe
Accepted Answer
1 month ago #215703

I just received the email with the massive upgrade of 55 templates.

If you take a look at the "justice" template.

There you see in the menu all the way on the right, the menu item "free consultation". That is what I am looking for.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 month ago #215720

There was a SPPB Module published on "menu" module position

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 month ago #215722

Hi,

Thanks for the details.

You can make use of the ability to adding custom class name in the mega menu item edit window to style the specific menu item differently. Please check the sample screenshots below:

https://share.cleanshot.com/Zl4v6YgD

https://share.cleanshot.com/XfqcSXcH

https://share.cleanshot.com/TMfdtSg0

Here is the sample code snippet where "testheadermenu" is the custom class name. So it will be the custom class name that you are gonna replace with your own preferance.

li.testheadermenu {

            background: red;
}

.sp-megamenu-parent>li.testheadermenu>a {

            color: #ffffff;
}

Hope this helps!

Best regards,

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 month ago #216436

Hi Seppe,

Did that help?

0
S
Seppe
Accepted Answer
1 month ago #216538

Good morning Sorry for my late reply Paul's answer did the job.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 month ago #216715

Good Morning Seppe!

Glad that you got the help:)

Have a nice day!

0