Solution to two **merging** backgrounds.

The Item management is part of a dropdown menu and the Author is part of a heading list. But since both have the same black background, it looks like Item management and Author are part of the same menu. I want to make them look distinct. I want the user to see Item Management as part of drop down menu and Author as part of the heading list.

Basically I don't want the two backgrounds to merge. Any help or idea is much appreciated.

  • You can try lighter shade of same color.. – NB4 Jan 4 '17 at 9:06
  • I can't change the colors. Don't have the permission to do so. Can you suggest an alternative? – Anan Srivastava Jan 4 '17 at 9:52

Option 1: It is same color. With opacity of 95% and box-shadow for below bar.enter image description here

Option 2: Just box-shadow of light grey color.

enter image description here


You could do a few things:

  1. Make the dropdown or the headling list background a different color
  2. Add a different colored border around the dropdown
  3. Add a light-colored drop shadow to the dropdown (Material design)

I would personally change the background color to a slightly lighter shade of the same color and add a drop shadow for visual depth. You basically need some sort of distinguishing barrier (like a border or a drop shadow or both).

Other than that, the differing the typefaces (as you have) is a good idea. Unless you are willing to redesign your page or make the dropdown shorter, I see no other simple solutions.

  • Thank you for your suggestions. The thing is that I am bounded by the design theme. I am not at liberty to change colors. Can you please delineate a little bit more on your 3rd point? – Anan Srivastava Jan 4 '17 at 9:27

As you are not in control of the colors and border-color (this would probably be the best option if you could enter there), changing the shadow (which you already have) color to a lighter might look weird (but test it it might be a good idea) and to a darker will not be noted; I can only suggest to use some kind of light layout to cover the page when the menu expands:

enter image description here

Other way to think about this solution is that the page opacity went a bit lower, excluding the header or menu.


If you can't change background color of your menu then try some different font type for it. Try to separate main menu item and dropdown menu items lists. Do change with font style. Apply different dropdown effect while user click on main menu item. Hope it helps...


If you are bound to keep the same colors and styling than the simplest option would be to increase the height of your dropdown till the bottom of the header, that will hide the header label.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.