• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

Joomla Menu Item Custom Class Configuration

Create Custom CSS Styling for Menu Items Joomla 1.7

August 31, 2011 by Pat Fortino

There are a many new features in Joomla 1.7 that are easy to overlook. For example, you can now assign a custom CSS class to any menu link. Why is this important? There are times when you want to create unique css styling for a specific menu link. In previous versions of Joomla, there was no way to assign a custom CSS class to an individual menu link. Now, with 1.7, you can.

To assign a custom CSS class to a Joomla menu link

  1. From the Joomla Admin menu, select Menus > Main Menu (or whatever menu you want to edit).
  2. Click the menu link to which you want to assign a custom CSS class.
  3. From the menu options on the right side of the page, click Link Type Options.Joomla Menu Item Custom Class Configuration
  4. In the Link CSS Stylefield, enter a CSS class nameIMPORTANT: Use only alpha numerical characters, hyphens, and underscores, but no spaces.
  5. Click Save & Closeto save your changes.Joomla adds the custom class to the menu link.Custom CSS Class in Joomla Menu Link
  6. Now you can use a CSS class to create custom formatting for the link you modified. For example, create a CSS class in your css stylesheet; make sure to use the exact same class name you used in the link:a.homestyle {color:#fff;font-size:11px;background:#666}

Comments are closed. If you have information to share, contact me here.

Previous Post: « Create Custom Menu Link CSS Class in Joomla 1.6 / 1.7
Next Post: Joomla Article Title in Read More Links: How to Turn On/Off, Truncate, Customize »

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top