JorisP Posted September 21, 2011 Share Posted September 21, 2011 Hi,I am new to Joomla, and just getting started with html and css code.I have been reading for over a day now about how to change a vertical menu to a horizontal menu. I have used the css code "display:inline;" and removed the "display:block;" according to the instructions that I found on the web, but it didn't work.Joomla version 1.5.23Template: joomla 18 http://www.joomspirit.com/vmchk/free-joomla-1.5-templates/template-joomspirit_18.htmlwebsite: http://www.mvseahorse.nl (I want to make the menu at the top horizontal)As far as I can see the css code that has to be changed is in the moomenuh.css file, and the first code in this file I have pasted below.I know this question has been raised many times before, but like I said, I got stuck. I appreciate your help.Joris#main_menu {clear:both;display:block;height:28px;position:relative;z-index:100;list-style: none;margin:0;padding:0;text-align : left;/** change **/}#main_menu .moduletable{margin:0;}#main_menu li{margin:0;padding:0;height:28px;float:right;position:relative;list-style : none;/** change **/margin-top:-1px;padding-top:14px;}#main_menu li a, #main_menu li span.separator {display:block;float : none !important;float : left;position:relative;z-index:1000;text-decoration:none;/** change **/color: #eee;line-height:28px;text-transform: capitalize;letter-spacing: -0.5px;font-weight: normal;font-size:105%;padding:0px 18px;}#main_menu li li a, #main_menu li li span.separator{/** change **/color:#eee;float:none;font-size:100%;line-height: 13px;letter-spacing: 0;font-weight:normal;padding: 6px 2px 6px 5px;text-transform:none;margin: 2px 4px 0px 4px;border: 1px solid #666;background-color: #333;}#main_menu li.parent {}#main_menu li.parent li{}#main_menu li li.parent{}#main_menu li ul {display:block;width: 160px;position:absolute;z-index:99;left: -999em;clear:left;/** change **/margin-left:0;margin-top:0;padding: 6px 0 4px 0;background-image:none;}#main_menu li ul ul {margin: -29px 0 0 158px;/** change **/padding-top:0;background-image:none;}#main_menu li li {width: 158px;height:auto;padding:0;} Link to comment Share on other sites More sharing options...
dsonesuk Posted September 21, 2011 Share Posted September 21, 2011 That template already shows a horizontal menu? usually you would have to enable the horizontal (usually called top) menu module in the Module Manager, then assign articles to the top or horizontal menu in Menu Manager. Different menus have specific id or class references, and the css should already be set to produce this specific menu. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 21, 2011 Share Posted September 21, 2011 It looks as though, you have been creating a new menu in menu manager for every article that will place it in top menu module position (5 menus, when there should be only one, top menu), when you should be creating a menu item, that points to an article in top menu. Link to comment Share on other sites More sharing options...
JorisP Posted September 21, 2011 Author Share Posted September 21, 2011 The module positions for this template can be seen in this manual, I tried another version of the same template, didn't help. Checked the setup of the menu modules and they are exactly configured like the manual shows. Still they remain vertical. Removing "display:block;" and writing "display:inline;" lines in the code doesn't make a differenca whatsoever, so I guess the problem is not in the moomenuh.css file but somewhere else. Link to comment Share on other sites More sharing options...
JorisP Posted September 21, 2011 Author Share Posted September 21, 2011 Very nice! Removed the menu's and added menu items to the home menu, that works! Thanks dsonesuk! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.