Extra styling for sidebar menu Resolved Requested: 2 years and 4 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 2 years and 4 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 2 years and 4 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 2 years and 4 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 2 years and 4 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 2 years and 4 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!
Hi Paul,
Adding the following custom CSS to your site will make the requested changes:
Let us know if we can help adjust things further.
Have a great weekend!
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.
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:
I’ve also accounted for your change in border color.
Have a great weekend!
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
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:
Have a great day!