Extra styling for sidebar menu

Resolved

Requested: 4 years and 1 month 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 1 month 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 1 month 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 1 month 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 1 month 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 1 month 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.