Jump to content

Vertical Joomla Menu Does Not Want To Become Horizontal


JorisP
 Share

Recommended Posts

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;}

  • Like 1
Link to comment
Share on other sites

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...