Remove the tiny upwards-pointing arrow on dropdown menus

Hello David. Can you pass along your link and which theme you’re using? This should be a quick css fix.

Sure – you mean a website link?

The site is https://parnassus.co/ and I’m using the standard Cuztomizr Orange theme, plus of course some custom CSS for the modifications I’ve made. You can see on the menu on the top right, the right-hand item has a dropdown. When you hover over it and the dropdown opens, you can see above the dropdown the small glyph. It’s two grey lines, almost invisible.

Any luck? I haven’t been able to find the CSS that causes it, or an image either. I can just see it’s there…

I’m looking. Haven’t found it just yet.

Me either.

Thanks for your help, too, by the way ??

I think you may be referring to the .caret which is an inverted triangle which identifies that there is a dropdown menu below. See image

I’m seeing that .caret (Firefox), but wonder if you’re not?

No – it’s not the down-point caret indicating that a menu will drop down. It’s when a menu is already dropped down, two small gray lines forming an upwards-pointing caret on the top left of the drop-down menu, pointing back up to the main-menu item it dropped down from.

Here’s a screenshot: https://postimg.org/image/661trja5n/5a78f95c/

Even here it’s almost invisible, but you can see it touching the orange O.

Originally, these images had drop-shadows and rounded corners, and the arrow fit that visual look quite well. I’m removed the shadows and rounded corners, and so all that is left is the arrow.

This is what I’m using to make the menus more minimal, by the way:

/* Dropdown menus: square edges, not rounded */
.dropdown-menu {
  border-radius: 0;
  border-image: none;
  background-image: none;
}

Without that, ie with the default look, a screenshot looks like this: https://postimg.org/image/j3mkoq5nj/1c93c5c5/

and I think it’s easier to see.

Right-click on the menu item “open source”, and inspect-element.

Select the li tag containing that anchor element, and now click on the “hover” checkbox to trigger the hover style on the list element. This triggers the dropdown.

Now that you have the dropdown showing up and it won’t go away when you move your mouse, you can right-click on the little triangle and inspect it to see what’s going on. That shows you the dropdown unordered-list, with nothing super-obvious. Try opening that unordered-list element to see what’s inside.

Now that you have the dropdown showing up and it won’t go away when you move your mouse, you can right-click on the little triangle and inspect it to see what’s going on. That shows you the dropdown unordered-list, with nothing super-obvious. Try opening that unordered-list element to see what’s inside.

Now you can see that there’s a “::before” and “::after” node. You can click on either of them and you will see that the little triangle gets highlighted. So both of those are used to create the little upward-pointing caret. Probably one of them is solid white, positioned on top of a slightly-larger solid grey triangle, which creates the illusion of a thin border. So now that you have the css selectors that are targeting both of these, you just create two new matching css selectors and give them a property of “display: none” and they won’t show up anymore.

Let me know if you get that to work.

Cheers.

.navbar .nav > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu:after {
    display: none;
}

in your Custom CSS or child stylesheet.

Great – thankyou very much! I didn’t know about the before and after properties before – good to learn something too ??

Edit: I misunderstood this post, sorry about the bump.

@vintagedave Hi Dave, i like very much your navbar box, especially the menu items.
Do you have any suggestions for making the menu items responsive as yours? Mine, when I reduce the size of the window, doesn’t move to the left as your ??

It is unlikely that you will get a response from an 8 month old post, so as per the forum welcome, please open your own thread and include a link to your site.