Transparent custom menu?

[clearspark]

Hi, I’m looking to create a specific style of secondary menu that has 3 text lines and a transparent background colour.

I’ve attached and image of what I’m looking to do - it’s the chapter menu below the header.

Could you please advise whether this will need custom CSS or whether there is a plugin that might be able to do it without custom coding?

Any advice on the easiest way to accomplish this for a non-programmer guy would be great.

Thanks!

[ruenel]

Hello There,

Thanks for posting in! Regretfully, what you want to accomplish requires custom development. We also do not have any knowledge of any plugin that can regenerate similar result. It is best that you seek advise from a developer so that this can be develop accordingly.

Thank you for your understanding.

[clearspark]

As a follow up, I worked out how to do this with the ubermenu plugin which comes with X-themes.

Could you please advise how I can anchor the new menu which is placed in it’s own row, to the bottom of the section?

Also, could you please let me know the CSS to achieve the hover, active and background effects seen in the original sample image (https://imgur.com/a/ie4g6)? I can’t seem to make the active/hover backgrounds go fully transparent.

Currently using this:

.ubermenu.ubermenu-horizontal{
background:rgba(64,64,64,.8);
}

/* Top Level Items - Hover /
.ubermenu-skin-none .ubermenu-item-level-0:hover > .ubermenu-target,
.ubermenu-skin-none .ubermenu-item-level-0.ubermenu-active > .ubermenu-target {
background:rgba(64,64,64,0.8);
/ color: #ffffff;*/
}

Will send login and page path in a private msg.
Thanks!

[ruenel]

Hello Again,

Do you want something like this?

Please edit your page back in Cornerstone and remove the bottom padding in your section settings.

To change the hover and active background effects, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target:hover {
    background-color: red;
}

.ubermenu-main .ubermenu-current-menu-item > .ubermenu-target {
    background-color: blue;
}

Hope this helps. Please let us know how it goes.