Jump to content

Vertical Joomla Menu Does Not Want To Become Horizontal


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...