Remove Dropdown Arrows from Navigation Menu

  • Unknown's avatar
    msmobear · Member ·

    Hi all, can I get some CSS help please?

    I’m trying to remove the pesky down arrows in the navigation bar (using Button 2 theme) that appear due to existence of a submenu. I have searched through Google and YouTube, and every code that I’ve seen recommended simply doesn’t remove them. While I like my website’s overall look, these arrows are grating on my last nerve. The site is: https://mollybarks.com/

    I appreciate any help!
    Molly

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    helper-heroponriki · Member ·

    Hello!

    Thanks for reaching out! We aren’t able to offer direct support for writing or editing CSS, but I can get you pointed in the right direction.

    It looks like these CSS selectors are controlling that particular element.

    .main-navigation li.menu-item-has-children>a:before, .main-navigation li.page_item_has_children>a:before

    Also, this appears to be what creates that arrow in that CSS selector:

    display: inline-block;
    content: "203A";
    transform: rotate(90deg);

    I believe you would only need to target the display in the custom CSS for those selectors to use none instead of inline-block. Give it a try and let us know how that goes!

  • Unknown's avatar
    msmobear · Member ·

    Hi,

    Thank you for your response. Unfortunately, this didn’t work.

    I tried the first piece of CSS you suggested on its own and nothing happened. I added the second piece of code you added “display: none;” after the first bit of code, but nothing happened. I then tried the second bit of code you added on its own and nothing happened. Do the { and } need to be included as well? I often see those somewhere in CSS coding.

  • Unknown's avatar
    msmobear · Member ·

    Updated, I adjusted the code to what’s below and that removed the arrow! Added spaces after > and put in { } and it went poof. I appreciate the help!

    .main-navigation li.menu-item-has-children> a:before, .main-navigation li.page_item_has_children> a:before {
    display: none;
    }

  • Unknown's avatar
    helper-heroponriki · Member ·

    Yep! Looks like you got it – the full CSS would need those curly braces between the selector and the CSS code. Great work!

    Enjoy the rest of your day! :)

  • The topic ‘Remove Dropdown Arrows from Navigation Menu’ is closed to new replies.