Solved SP Page Builder

Make 1 menu item pop-up by different background

Asked by Seppe 9 months ago Last activity 9 months 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.

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

9 months ago

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}

9 more replies

Rashida Rahman Staff

9 months ago

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,

Paul Frankowski Senior Staff

9 months ago

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.

Seppe Asked this

9 months ago · edited

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.

Rashida Rahman Staff

9 months ago

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...

Seppe Asked this

9 months ago

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.

Paul Frankowski Senior Staff

9 months ago

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

Rashida Rahman Staff

9 months ago · edited

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,

Rashida Rahman Staff

9 months ago

Hi Seppe,

Did that help?

Seppe Asked this

9 months ago

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

Rashida Rahman Staff

9 months ago

Good Morning Seppe!

Glad that you got the help:)

Have a nice day!