I wish I could word it better. I hope the attached snapshot will make more sense. No matter how small or large the description is the down arrow always in between the title.

Is there anyway to fix this? I am not having this issue with other site collections.



  • Hi Maria, I was able to reproduce your issue using Chrome's developer tools. I have posted a solution for your issue below. Please feel free to ask me any questions. – Haroun A. Dec 27 '13 at 18:33

You can resolve this by modifying the CSS file. Use, developer tools and "inspect element" >> Hover over your dropdown arrow and click on it if you can. I used chrome and I was easily able to identify it and view the CSS for it.

Mine appeared to be in my COREV4.CSS under ".menu-horizontal a.dynamic-children span.additional-background, .menu-horizontal span.dynamic-children span.additional-background"

I played around with the padding that I bolded below and I was able to move the arrow by increasing the padding.

.menu-horizontal a.dynamic-children span.additional-background, .menu-horizontal span.dynamic-children span.additional-background {
padding-right: 10px;
background-image: url(/_layouts/images/menu-down.gif);
background-repeat: no-repeat;
background-position: right center;

Ensure, that you have some padding there and play around with it.I also tried changing my padding to **padding-right: inherit**;and it gave me a nice amount of padding.

This will resolve your issue. I hope my instructions are clear. If not please feel free to ask me any questions.

| improve this answer | |
  • Thank you Rounn. That did the trick. I put padding: 5 15px and that worked for me. – Maria Burton Dec 27 '13 at 20:28

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.