The Newspack Themes support multiple locations for Custom Menus that you can add and edit. They are:

Primary Menu

The Primary Menu is the most prominent menu, appearing below the logo, or next to it when Short Header is checked under Customize > Header Settings.

Here is where the Primary Menu displays on desktop when Short Header is unchecked:

Here is where the Primary Menu displays on desktop when Short Header is checked:

Here is where the Primary Menu displays on desktop when Short Header is checked and Center Logo is checked:

And here is where the Primary Menu display in the mobile menu:

Secondary Menu

The Secondary Menu is displayed above the header; this section is only visible when the Secondary Menu is assigned; otherwise, the Social Menu will only appear in the footer.

Tertiary Menu

The Tertiary Menu is displayed inline with your site branding, and intended to highlight one-two important links — for example your site’s Donation or Subscription pages.

Here is the Tertiary Menu placement with the default header settings:

Here is where the Tertiary Menu displays on desktop when Short Header is checked:

And here is the Tertiary Menu placement in the mobile menu:

The Tertiary Menu include some styles in each of the child themes that will make a link bolder and more button-like when you add the CSS class menu-highlight.

To add the menu-highlight class to one of your links:

  1. Navigate to Customizer > Menus, and select the menu you’ve assigned to the Tertiary space. It will have the sub-label “(Currently set to: Tertiary Menu)”.
  2. Select the menu item you’d like to make stand out.
  3. Add menu-highlight to the CSS Classes field:
  1. If the CSS Classes field isn’t visible, you can turn it on by navigating back to the main Menus panel in the Customizer. Click on the cog icon to open additional settings, and check the checkbox next to CSS Classes to have it appear for all menu items:

How these links will be styled will depend on the theme you’re using. The main Newspack theme and Newspack Scott will both use the Primary Color as the link’s background. The rest of the themes add a border.

Adding more colors to the highlighted menu items

If you’d like to have more than one button highlighted in a menu, and have them use different colors or styles, you can do this by following the steps below. It involves copy-pasting and making small edits to some CSS — if you’d prefer we take care of it for you, please reach out to us in #newspack-help in Slack!

To make additional links use different styles:

  1. Navigate to Customizer > Menus, and select the menu you’ve assigned to the Tertiary space.
  2. Select the menu item you’d like to make stand out.
  3. Add menu-highlight and menu-highlight-2 to the CSS Classes field, separated by a space:

Each class will do a different job: the menu-highlight class will apply all of the default styles from the theme, including padding, font size, and font weight. The menu-highlight-2 class will let you customize this individual plugin further.

  1. Within the Customizer, navigate to the Additional CSS panel.
  2. Copy-paste this CSS into the CSS field:
.menu-highlight-2 a {
    background-color: #d33 !important;
    color: #fff !important;
}

The theme has some pretty specific CSS styling this button, so the !important will help override that without making the selector too complicated.

  1. Edit the CSS as needed. You can change the colors, add borders, and even add hover styles using the selector .menu-highlight-2 a.

If you’d like to add additional styles, you can repeat the top steps but with a menu-highlight-3 class instead of a menu-highlight-2 class.

Social Menu

The Social Links Menu will display in the footer area, and, when a Secondary Menu is activated, it will also appear in the header area.

Here is the Social Menu placement in the footer when there are no footer widgets:

And here is the Social Menu placement in the footer when there is at least one footer widget assigned:

Here is the Social Menu placement in the header when the Secondary Menu is assigned:

Here is the Social Menu placement in the header when Center Logo is checked under Customize > Header Settings.

The Social Menu will also display at the bottom of the mobile menu:

This menu allows you to add links to your publications’ different social menu accounts, and, rather than display text links to those services, it will display a service-specific icon for each link.

The following social media services are currently supported:

  • 500px
  • Amazon
  • Apple
  • Apple News
  • Bandcamp
  • Behance
  • Bluesky
  • Codepen
  • Deviant Art
  • Digg
  • Dribbble
  • Dropbox
  • Email
  • Etsy
  • Facebook
  • Flickr
  • Flipboard
  • Foursquare
  • Goodreads
  • Google
  • GitHub
  • Instagram
  • Issuu
  • Last.FM
  • LinkedIn
  • Mastodon
  • Meetup
  • Medium
  • MySpace
  • Nextdoor
  • Patreon
  • Pinterest
  • Pocket
  • Podigee
  • Post News
  • Reddit
  • RSS Feed
  • Skype
  • Slideshare
  • Snapchat
  • Soundcloud
  • Spotify
  • StumbleUpon
  • Telegram
  • Threads
  • TikTok
  • Tumblr
  • Twitch
  • Twitter/X (both the classic bird icon, using the twitter.com, and the X icon using the x.com)
  • Vimeo
  • VK
  • Wikipedia
  • Whatsapp
  • WordPress
  • Yelp
  • YouTube

If you add a link to a social media service that is not supported yet, it will display as a placeholder ‘link’ icon.

Highlight Menu

The Highlight Menu will display underneath the site’s header on desktop and tablet-sized screens. The purpose of this menu is to draw attention to specific stories and feature pieces. It does not display on mobile.

This menu will display all of the links on one line; when there are too many links to fit, they will drop out of sight. Because of this, it’s recommended to place the most important links first; links that should always be visible should be added one of the other menus.

The text displayed to the left of the menu is pulled from the name you give the menu in the Customizer:

When the Sticky Header is enabled, the Highlight Menu is hidden by default to avoid adding extra height to the header.

Support Home

Custom Menus

Theme Table of Contents