Extra styling for sidebar menu

Resolved

Requested: 4 years and 11 months ago

I’d like to be able to style the menu such it’s like the one at

https://www.cardiomyopathy.org/treatment/treatment

i.e.

a) Line between each menu item

b) Background and side line on the currently selected parent and child.

OnPoint Plugins

4 years and 11 months ago

Hi Paul,

Adding the following custom CSS to your site will make the requested changes:

/** * Background and side line on the currently selected parent and child */ #advanced_sidebar_menu-2-wrap .child-sidebar-menu .current_page_item { border-left: 5px solid #b3193f; background: #eee; list-style: none !important; margin: 0 0 10px -15px !important; padding: 15px !important; } /** * A little extra space between the parent and the children. */ #advanced_sidebar_menu-2-wrap .child-sidebar-menu .current_page_item ul { margin-top: 10px; } /** * Line between each menu item */ #advanced_sidebar_menu-2-wrap .child-sidebar-menu > li { border-bottom: 1px solid #EEEEEE; padding: 15px 5px; list-style-position: inside !important; }

Let us know if we can help adjust things further.

Have a great weekend!
Paul Swindell

4 years and 11 months ago

Ah great thanks, although the Background and Left Border for the selected item and parent doesn’t include the whole block as it does on the example website I gave – it only highlights the selected item.
OnPoint Plugins

4 years and 11 months ago

Hi Paul,

Oh, I see. You want the block to be highlight when on a grandchild page as well.

This may be accomplished but adjusting the CSS like so:

/** * Background and side line on the currently selected parent and child */ #advanced_sidebar_menu-2-wrap .child-sidebar-menu > .current_page_parent, #advanced_sidebar_menu-2-wrap .child-sidebar-menu > .current_page_item { border-left: 5px solid #952783; background: #eee; list-style: none !important; margin: 0 0 10px -15px !important; padding: 15px !important; } /** * A little extra space between the parent and the children. */ #advanced_sidebar_menu-2-wrap .child-sidebar-menu > .current_page_parent ul, #advanced_sidebar_menu-2-wrap .child-sidebar-menu > .current_page_item ul { margin-top: 10px; } /** * Line between each menu item */ #advanced_sidebar_menu-2-wrap .child-sidebar-menu > li { border-bottom: 1px solid #eee; padding: 15px 5px; list-style-position: inside !important; }

I’ve also accounted for your change in border color.

Have a great weekend!
Paul Swindell

4 years and 10 months ago

Hi,

Thanks for this, it all looks great now, except for some that don’t seem to get the styling applied at all.

For example

Hearing – Sudden Cardiac Arrest UK

I’m guessing it’s because of the nesting level? (which is 1 further down than most of the others)

Cheers

Paul
OnPoint Plugins

4 years and 10 months ago

Hi Paul,

If you would like to expand your menu to additional levels, you may adjust the CSS to include any number of child levels:

/** * Background and side line on the currently selected parent and child */ #advanced_sidebar_menu-2-wrap .child-sidebar-menu > .current_page_ancestor, #advanced_sidebar_menu-2-wrap .child-sidebar-menu > .current_page_item { border-left: 5px solid #952783; background: #eee; list-style: none !important; margin: 0 0 10px -15px !important; padding: 15px !important; } /** * A little extra space between the parent and the children. */ #advanced_sidebar_menu-2-wrap .child-sidebar-menu > .current_page_ancestor ul, #advanced_sidebar_menu-2-wrap .child-sidebar-menu > .current_page_item ul { margin-top: 10px; } /** * Line between each menu item */ #advanced_sidebar_menu-2-wrap .child-sidebar-menu > li { border-bottom: 1px solid #eee; padding: 15px 5px; list-style-position: inside !important; }

Have a great day!

New Response Cancel reply

You must be logged in to respond. Only PRO members are allowed to respond to support requests.