How to remove bullet on vertical menu

  • Resolved wildcatfamily

    (@wildcatfamily)


    6 months, 3 weeks ago

    Hi there,

    I have created a set of eight custom menus to display in a widget on my pages. WP Navigation Menu widget. But the top level of the menu shows a bullet next to it.

    Two questions:

    1. How can I remove the bullet ?
    2. How can I shade the menu option of the current page if shown in the menu (like it does in the main menu) ? For example in the above – if the widget is on the Tiger page, the Tiger menu option is shaded to indicate that is the page you are on.

    I have tried to insert a screenshot image of the menu here but it doesn’t seem to load. You should be able to see what I mean from the example page url I have sent.

    Many thanks.

    Regards, Mandy

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello @wildcatfamily

    Your first question is how do you remove the bullet. I think you mean the arrow after the list item. Try the following CSS and let us know if it works for you.

    .sf-menu>.sf-dropdown>a:after {
    display:none;
}

    As for the second item, I think your site already highlights the selected page in the menu. For example, below is a screenshot in which I am visited a page and it was highlighted as the active page in the submenu. The page was the Tiger (Panthera tigris) page, and the Tiger (Panthera tigris) submenu item was highlighted as the current page. Is this what you mean?

    Thread Starter wildcatfamily

    (@wildcatfamily)

    Hi Gilbert, no I am talking about custom menus not the main menu. Look further down to the right of the main image if you are on a desktop, or further below the main image on mobile.

    The custom menu starts with “Panthera Lineage ~ Panthera Genus & Neofelis Genus”. The first sub-item is “1. Snow Leopard” followed by 7 sub-items in total. There is a bullet marker to the left of the menu and no sub-item is highlighted.

    I tried to upload a screenshot image here but I get an error ” This image has an empty alt attribute’.

    Regards, Mandy

    Hello @wildcatfamily,

    Thanks for the additional information. Now I understand you referred to the menu in the sidebar. Here is some updated CSS. The CSS should remove the bullet at the menu’s start and change the current page item’s text and background colors. Please add it and let me know if it works.

    li.current-page-ancestor.current-menu-ancestor.current-menu-parent.current-page-parent.current_page_parent.current_page_ancestor.sf-dropdown {
    list-style: none;
}

li.current-menu-item.current_page_item a {
    color: white;
    background-color: red;
}
    • This reply was modified 6 months, 3 weeks ago by Gilbert Hernandez. Reason: updated CSS
    Thread Starter wildcatfamily

    (@wildcatfamily)

    Hi Gilbert, that worked! Thanks so much.

    Regards, Mandy

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to remove bullet on vertical menu’ is closed to new replies.