How to display drop down menu (top navigation)

up vote 1 down vote favorite

I am trying to display top navigation as drop down menu just like you see in theme "seattle". I created my own theme, then I went to "Design Manager" and then I went to "Snippets". I copied the top navigation snippet in my master page but it is showing all links as it is i.e. it is not showing in drop down format. I thought may be because I didn't use snippet from "seattle" so I copied seattle's snippet in my master page but same problem :( How do I show drop down like seattle so that I can modify it according to my needs? I will modify it using Firebug but first I need to display it which I am unable to to for the past many days now. EDIT1 I have opened preview and snippet of seattle theme I am just playing with values of StaticDisplayLevels and I notice that when I press "Update" button, it does change preview in "snippet" But when I go back to preview page (the left side tab in screenshot) and refresh page then I don't see any change. So it looks like besides pressing "Update" button I also need to do something else? Screenshots given below. Screenshot1

up vote 1 down vote accepted	Did you change any attributes inside SharePoint:AspMenu ? Try setting StaticDisplayLevels="3" and MaximumDynamicDisplayLevels="1" inside your generated HTML for the master. Or, in the Design manager, in snippet's settings, you could set the same settings according to the sceenshot:

up vote 0 down vote

If your menu is still not displaying in a drop-down, make sure the AdjustForShowStartingNode = true.

SharePoint 2013 How to add HTML Master Page & Css with Design Manager

SharePoint 2013 How to add HTML Master Page & Css with Design Manager

15:29 Admin

In SharePoint 2013 you can easily Use HTML Master page along with its CSS and Images for the look and feel of your sharepoint site. You do not need to work on SharePoint designer anymore.

The new tool is called Design Manager. Its actually not a tool or anything its a new fetaure added to Look and Feel in Site settings. The Design Manager assists in creating the master page from simple HTML, CSS files. The SharePoint designers or Admins only need to create these designs on an HTML editor or Notepad and Convert that into HTML, CSS and Images. Once these artifacts are ready, the design manager can process these to generate a master page.

Here are the Steps -


1.  Create the package (a simple folder) with a HTML layout, a CSS and Images that you need to use.
    
 

2.  Upload all the files to the Master Page gallery (Open your master page gallery in windows explorer and Copy the html, CSS and Images folder to the master page gallery)
    

3. Once done Go to the Site Settings page and Click on Design Manager (under the “Look & Feel”).
     

 

 4. Click on Edit MasterPageOr Import Master Pages ->  Click on “Convert an HTML file to SharePoint master page” link.
 

5. This will open up a dialog box for you to select a html file taht you added from the master page gallery.
  

6.Once you select a file, SharePoint will generate a master page for that design. At this point, the master page has been generated.

7. To customize the master page click on the “Conversion successful” link.


8. This will take you to a preview page.


9. Next add SharePoint Components to the master page using Snippets Manager.

Before we start with Snippets Manager just Open the Mater page gallery in Windows Epxlorer and Open the Master page HTML file taht you uploaded.

10. To Open Snippets Manager. Click on the Snippets link in the top right corner of the preview page.
  
11.  This will open up the snippets gallery page.


Let’s say you want to add the top navigation to your master page.
a.       Click the Top Navigation button in the ribbon.
b.      This will create the HTML snippet you need.
c.       Copy the snippet to the clipboard.

 12.       Switch to the html file that you have opened up in an editor and paste the html snippet wherever you want the top navigation to appear in your design.


13.  Save the html file.

14.  Refresh the Preview page in your browser and you will see that the master page was generated again and your changes are visible.

15. Navigate to the Master Page Gallery and approve and Publish the master page to start using it.


known issues

1) control mode does not set folder add prob.

2) After successful conversion of master page, apps are not visible SharePoint 2013

3)visio add apps problem in SharePoint 2013