Dropdown arrow on navbar not showing

Question

Background:

• One of my duties is being the SCA for a sitecollection; so, permissions are not an issue.
• I am still new to SP and being an SCA.
• I just had SP Designer 2013 installed, and I am new to that as well.
• I am very much a novice with html, css, js, and jquery; but have used it within my site to create web parts like an expandable/collapsable accordion menu, tabbed web parts (hillbilly tabs), etc.
• I have publishing infrastructure activated.
• I mapped a network drive to the Mater Page Gallery.
• I created my own composed look (by creating a custom .spcolor file), and deployed it with success.
• The original seattle theme I used was “characters”.
• Lastly…now I want to switch from seattle to oslo…so, I have created my own custom.html, .master, .preview, and .css (from the oslo “sketch” theme). And yes, they have been published, checked-in, approved, etc, etc). And the custom.html, .master, and .preview are in the Master Page Gallery and the custom.css is in the Style Library.

Situation:

• I know my new custom.html and .css is working because:

  1. HTML: I changed my favicon.ico in the .html and can see it on the IE tab for that “Test Site”.
  2. CSS: I updated the SPM: CSSRegistration in the .html to my new custom.css and the colors I changed in the .css are displaying correctly.

• Now that I want to switch from seattle to oslo, I know that oslo will replace the global nav with the current nav. No biggy, because I can create my own links and drag a link under another one and have my dropdowns.

• So, I created a “Test Page” for my “Test Site” (that is in the custom oslo format).
• Then I created a new link in the navbar to the “Test Page” and dragged it under the “Site Contents” link, where it shows up when I hover over “Site Contents”.

The problem:

• Now that I have a dropdown, there should be a dropdown arrow next to “Site Contents” but it is not there.
• I know that oslo will show a dropdown arrow because I created a new subsite (Test Site 2) and changed the composed look to “sketch” (with all the pink) and created a “Test Page” for that subsite. Then I created a new link for the Test Page, dragged it under “Site Contents”, and the dropdown arrow appears.

Note:

• I have used F12 and SP Designer to search through the .html and .css files to find out where I can get my dropdown to appear, but no luck.
• Using F12 on my original site (seattle), I clicked on the DOM explorer and then clicked on the location where the dropdown arrow is and noticed something like “themedcss?ctag=198”. I assume that is the number for the sprite being referenced for the dropdown arrow??
• When I did the same thing for my custom site, I noticed “ctag=7”.
• Is there a place in the custom.html to reference/update the spcommon (or whatever it is) from my original seattle so I can have the same color sprites used in my custom site? Am I even asking the right question??
• Do I do this in the .css, .html, etc??
• I have tried all sorts of combos in the Master Page as well to include the alternate css option.
• I even tried creating a new composed look in the customized subsite using the .spcolor from the original seattle site. Nothing.
• I even updated the color of the header background to make sure the color was not the same as the dropdown arrow.

Bottomline:

• I want the dropdown arrow for my new custom site (oslo) to show up when I drag a link under another one.

I would provide the location to my site so you can poke around but it is located within a DoD domain, which is not accessible to the public.

It's the weekend and I am not at work, but if I need to provide some pics let me know.

Thanks!

Updated 06Aug18: changed "spcommon.png?ctag=198 to "themedcss?ctag=198"

Answer 1

A smaller down arrow than a right arrow is actually out-of-the-box display behavior.

You can increase the size using CSS with something like this:

.ms-core-listMenu-horizontalBox .static > .dynamic-children.additional-background {
  background-size: 9px 6px;
}

The .static > is important. That will stop the image resizing from being applied to the secondardy fly out box arrow (right arrow).

But since it is an image, the arrow will lose the crisp edges and look fuzzy on some displays. So I have to circle back to my original suggestion of hiding the default arrow image and then using an icon font or a custom image via CSS.

Answer 2

My first thoughts is that maybe your theme colored the header background to the same color as the arrow, or that the arrow image was recolored by the theme and it matches the header. Basically, maybe the arrow is still there but can't be seen since there are no color variations between arrow and background.

I think the fact that the arrow shows up using another theme further backs up the theory that the arrow image is there, just colored the same as the background.

To see the arrow image in the code, inspect your code and search for ms-navedit-flyoutArrow. That should get you here:

<span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children"><span class="menu-item-text">Google</span></span>

CSS that is being used by this HTML element adds the arrow image as a background to the SPAN.

You can fight the theme and possible recoloring of the arrow from the SharePoint CSS sprite, or you can just add your own custom CSS to hide the default SharePoint arrow and use your own arrow icon. You can use an image file or an icon font such as Font Awesome. If you are interested in the latter just let me know and I can provide a code snippet for you.

The Alternate CSS URL is added via Site Settings->Master Page.

I do not recommend modifying spcommon.png directly.

Answer 3

Thank you heather!

Here are some screen shots with the results:

With .static >

Without .static >

Answer 4

I was able to figure this out on my own and performed a workaround.

Short answer:

I opened my custom.css, the corev15.css, and the oslo-sketch-theme.css in Designer. I went to line #6946, which references .ms-core-listMenu-horizontalBox .dynamic-children.additional-background and found the following in all of them:

• background-image:url(menu-down.gif-68CC6A93.themedpng?ctag);

• Note: Keep in mind, my original seattle theme and the oslo-sketch theme both show the menu-down (dropdown) arrow with the above "themedpng?ctag" reference...but my custom-oslo theme does not.

I then went back to the original css referenced in the .html:

• /_layouts/15/1033/styles/Themable/oslo.css

And found the following:

/* [RecolorImage(themeColor:"BodyText",method:"Filling")] */ background-image:url("/_layouts/15/images/menu-down.gif?rev=23");

So I plugged that into my custom.css and now I can see my menu-down arrow. See image below. The only issue now is...the menu-down arrow is smaller than normal. You can see this by the size of the menu-right arrow, which actually uses the same type reference:

/* [RecolorImage(themeColor:"BodyText",method:"Filling")] */ background-image:url("/_layouts/15/images/menu-right.gif?rev=23");