Hide SharePoint List View Column Header Menu using CSS

In this post, we will learn How to hide SharePoint List View Column Header Menu using CSS?

You might also like to read Show and Hide Columns in SharePoint List Forms Using PowerShell

---

How to Hide SharePoint List View Column Header Menu?

In some cases, you may need to SharePoint List View Column Header Menu for print purpose, in this case, you can use CSS to hide the filter and sort menu in All Items Page in SharePoint List by doing the following:

Steps

• Open your List > Click on the Setting gear > Select Edit Page.

• Click on Add Web Part > add Script Editor Web Part

• Add the following CSS code.

<style>
th .ms-core-menu-box, .ms-positionRelative
{
    display:none !important;
}
</style>

• Save your page.
• Test your list view by clicking on the column header where the filter and sort menu option should be now removed from all items page in SharePoint list.

---

How to Hide SharePoint List View Column Header Menu for a specific column?

If you need to hide open menu for a specific column header in list view, you should do the following:

Steps

• Open your List > Click on the Setting gear > Select Edit Page.

• Click on Add Web Part > add Script Editor Web Part

• Add the following CSS code.

div[displayname*="Title"] ~ .ms-core-menu-box,div[displayname*="Title"] ~ .ms-positionRelative
{
   display:none !important;
}

At “displayname”, change the Title with your own column name

---

Applies To

• SharePoint 2016.
• SharePoint 2013.
• SharePoint 2010.

See Also

• Add horizontal line in SharePoint NewForm page
• Show and Hide columns based on choice selection in SharePoint 2016