{"id":1216,"date":"2012-03-21T16:08:30","date_gmt":"2012-03-21T16:08:30","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2012\/03\/21\/create-horizontal-menu\/"},"modified":"2021-11-19T02:05:32","modified_gmt":"2021-11-19T07:05:32","slug":"create-horizontal-menu","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/","title":{"rendered":"Creating a Horizontal menu in Joomla 2.5"},"content":{"rendered":"

Joomla 2.5 has reached its end of life as for 12\/31\/2014. Please be advised this may be a security risk to your website. You can view more information about the end of life here<\/a>.<\/p>\n

<\/p>\n

In previous versions of Joomla, the ability to create both vertical and horizontal menus was built in. With newer versions of Joomla however, such as Joomla 2.5, menus by default are vertical and there is not an option to change them to list items horizontally. Using CSS, you can create a horizontal menu, and in this Joomla 2.5 tutorial we\u2019ll show you how to do this.<\/p>\n

To create a Horizontal menu in Joomla 2.5:<\/strong><\/p>\n

    \n
  1. Log into your joomla dashboard<\/a><\/li>\n
  2. In the top menu, hover over Extensions<\/strong> and click Template Manager<\/strong><\/li>\n
  3. Click the Templates<\/strong> tab, and then click the Details and Files<\/strong> link next to your template
    \"click-details-and-files\"<\/a>\n
    <\/div>\n<\/li>\n
  4. Under stylesheets<\/strong>, click the stylesheet for your template. If you have numerous stylesheets, find and click one similar to general.css<\/strong>
    \"click-the-style-sheet-to-edit\"<\/a>\n
    <\/div>\n<\/li>\n
  5. Scroll to the bottom of the file, insert the following code, and then click Save & Close<\/strong>\n

    .horizontal_menu li
    {
    display:inline;
    list-style-type:none;
    padding-right:4px;
    float:left;
    }<\/p>\n

  6. The next thing you will need to do is edit the module of the menu you would like to be horizontal<\/strong>. To do this, hover over Extensions<\/strong> in the top menu and click Module Manager<\/strong>. Then use the filter<\/strong> feature to find your menu and click on it.<\/li>\n
  7. Under the Advanced Options<\/strong>, next to Menu Class Suffix<\/strong> enter \u201d horizontal_menu\u201d. Be sure not to enter the quotes, but do include the space before the word horizontal_menu. Then click Save<\/strong>
    \"edit-menu-class-suffix\"<\/a>\n
    <\/div>\n<\/li>\n
  8. Visit your Joomla 2.5 site again, refresh the page, and you should now see your new horizontal menu<\/strong>! As this is a simple CSS change, this should work regardless of who you use to host your Joomla website.<\/a>

    \n\n\n\n\n
    Vertical Menu<\/th>\nHorizontal Menu<\/th>\n<\/tr>\n
    \"vertical_menu\"<\/a>\n
    <\/div>\n<\/td>\n
    		\"horizontal-menu\"<\/a>\n
    <\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    Joomla 2.5 has reached its end of life as for 12\/31\/2014. Please be advised this may be a security risk to your website. You can view more information about the end of life here. In previous versions of Joomla, the ability to create both vertical and horizontal menus was built in. With newer versions of Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4403,82],"tags":[2113],"class_list":["post-1216","post","type-post","status-publish","format-standard","hentry","category-joomla","category-joomla-2-5","tag-joomla-v2-5"],"acf":[],"yoast_head":"\nCreating a Horizontal menu in Joomla 2.5 | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Using css, you can easily create horizontal menus in Joomla 2.5\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Horizontal menu in Joomla 2.5 | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Using css, you can easily create horizontal menus in Joomla 2.5\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-21T16:08:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-19T07:05:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_joomla25_horizontal-menu_click-details-and-files.gif\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"Creating a Horizontal menu in Joomla 2.5\",\"datePublished\":\"2012-03-21T16:08:30+00:00\",\"dateModified\":\"2021-11-19T07:05:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/\"},\"wordCount\":312,\"commentCount\":14,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_joomla25_horizontal-menu_click-details-and-files.gif\",\"keywords\":[\"Joomla v2.5\"],\"articleSection\":[\"Joomla\",\"Joomla 2.5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/\",\"name\":\"Creating a Horizontal menu in Joomla 2.5 | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_joomla25_horizontal-menu_click-details-and-files.gif\",\"datePublished\":\"2012-03-21T16:08:30+00:00\",\"dateModified\":\"2021-11-19T07:05:32+00:00\",\"description\":\"Using css, you can easily create horizontal menus in Joomla 2.5\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_joomla25_horizontal-menu_click-details-and-files.gif\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_joomla25_horizontal-menu_click-details-and-files.gif\",\"width\":838,\"height\":542,\"caption\":\"click-details-and-files\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Horizontal menu in Joomla 2.5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating a Horizontal menu in Joomla 2.5 | InMotion Hosting","description":"Using css, you can easily create horizontal menus in Joomla 2.5","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/","og_locale":"en_US","og_type":"article","og_title":"Creating a Horizontal menu in Joomla 2.5 | InMotion Hosting","og_description":"Using css, you can easily create horizontal menus in Joomla 2.5","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2012-03-21T16:08:30+00:00","article_modified_time":"2021-11-19T07:05:32+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_joomla25_horizontal-menu_click-details-and-files.gif","type":"","width":"","height":""}],"author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"Creating a Horizontal menu in Joomla 2.5","datePublished":"2012-03-21T16:08:30+00:00","dateModified":"2021-11-19T07:05:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/"},"wordCount":312,"commentCount":14,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_joomla25_horizontal-menu_click-details-and-files.gif","keywords":["Joomla v2.5"],"articleSection":["Joomla","Joomla 2.5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/","name":"Creating a Horizontal menu in Joomla 2.5 | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_joomla25_horizontal-menu_click-details-and-files.gif","datePublished":"2012-03-21T16:08:30+00:00","dateModified":"2021-11-19T07:05:32+00:00","description":"Using css, you can easily create horizontal menus in Joomla 2.5","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_joomla25_horizontal-menu_click-details-and-files.gif","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_joomla25_horizontal-menu_click-details-and-files.gif","width":838,"height":542,"caption":"click-details-and-files"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/create-horizontal-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Creating a Horizontal menu in Joomla 2.5"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=1216"}],"version-history":[{"count":5,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1216\/revisions"}],"predecessor-version":[{"id":92258,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1216\/revisions\/92258"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=1216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=1216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=1216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}