OnPoint Plugins

← Back to support

Help with the sidebar menu design customization

Resolved

Requested: 1 year and 2 months ago

Hello there,

I am looking to get this design like https://haas.berkeley.edu/about/ for my website https://cbaweb.ku.edu.kw.  I want this exact type of functionality and design for my website’s sidebar menu where it should change color upon hovering and I don’t want the bullet points. Kindly let me know how we can get started with this. 

Thanks

  1. Hi Digital,

    If you open your widget settings you’ll see a button which says “Click to show styles”. If you click the button you’ll see a section of setting which looks like this:

    Advanced Sidebar Menu – Widget Color Selections

    To accomplish these two adjustments you’ll want to set the following style settings:

    1. Bullet style = None.
    2. Use blocked styling = checked.
    3. Under the Child section
      1. Hover background = select the color you would like to display on hover.

    I also noticed your widget wrap has a little padding the left so you probably want to remove that with a little custom CSS.

    If you would like the top level parent page to display like the example site you may check the “Display highest level parent page” widget option.

    P.S. I’m using https://cbaweb.ku.edu.kw/welcome page on your site as a reference as I found the widget on it.

    Have a great weekend!

     

  2. Hi, thank you for the response. could you pls help me on how to increase the height for each li and how to remove the borders for the child pages?

    here is the reference for what I want http://prnt.sc/209d3ec

  3. Hi Digital,

    To remove the borders from the child pages you may uncheck the “Show borders” option. More information here.

    You may increase the height of each li by adding the following custom CSS.

    Have a great rest of your weekend!

     

  4. Hi thank you too much the height works, but I think I wasn’t clear in my last reply. I dont want borders for the child pages, but for the parent pages, they should be shown. Kindly let me know how to do this.

    Also, how do I save this settings for every time I use the widget. What im doing right now is I have saved the widget as global widget in elementor and then doing it. Is there a proper way of doing this.

    Thank you in advance

     

  5. Hi Digital,

    To remove borders from only the child pages you may use the following custom CSS.

    To remove borders from only the grandchild pages you may use the following custom CSS.

    As far as the proper way widget usage goes:

    Most often the sidebar menu is added to widget area shared by all or most pages on the site so it only needs to be setup once and is used on every related pages. In typical WordPress themes there is a sidebar widget area to add these types of menus to. In an Elementor based site widgets are handled differently as they may be managed by individual page or global widgets. I can’t say for sure what the best approach is as I’m not an Elementor expert, but based on what I understand, using a global widget is a good approach.

    Have a great day!

  6. Thank you so much for the clarification. I was working on the sidebar, could you tell me how do I remove the spacing at the bottom of every sidebar.

    Here is the screenshot of my issue: http://prnt.sc/20jw8yi

     

  7. Hi Digital,

    You may remove the spacing with the following custom CSS.

    Have a great night!

New Response

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