The Utility Menu shows links in your website header for customer account login, logout, and cart/checkout.

  • Visibility

    Toggles visibility of the Utility Menu.

    When visibility is set to hidden, developers can add the Utility Menu to a custom location in their theme manually using the shortcode [c7_utility_nav].
    Or in PHP echo do_shortcode('[c7_utility_nav]');.

  • Positioning

    Alignment positions the Utility Menu to the left or right.

    Padding adds spacing around the Utility Menu, useful for fine tuning the positioning. CSS padding values are valid, e.g. 10px; 1em; or 10px 5px 10px 5px.

  • Display

    Display options include: only icons, both icons and labels, and only labels.

  • Colors

    Color can be customized for links, links on hover.

    Link colors can be overridden on a per page basis. For example, pages with a full bleed hero image background may need white colored links to be visible.

  • Typography

    Typographic customization for utility menu text labels (not icons) includes the following options.

    Font family, e.g. Helvetica, ‘Times New Roman’, Verdana, or the name of a webfont already installed on the site such as ‘Nunito Sans’.

    Font size in pixels. Defaults to 14px.

    Font weight CSS value, e.g. normal, bold, 400, 700, etc.

    Letter spacing, also known as tracking, in pixels. Defaults to 0px;

    Text transform, e.g. uppercase, lowercase, capitalize.

    Font style, e.g. normal, italic, oblique.