|
Group: Awaiting Activation
Last Active: Mon 10 Jun 2013
Posts: 0,
Visits: 31
|
Hi, I notice right now the main category menu is across the top. How do i change it to look similar to this site where its along the side...
http://www.mtmc.co.uk/
I know this can be somehow done through the backend, just not to sure on what to do.
Also is there also an option to NOT have it show up on the home page?
|
|
Group: Administrators
Last Active: Tue 10 Sep 2024
Posts: 807,
Visits: 2,748
|
This is down to CSS.
To get the menu down the site, need to modify the CSS so the items layout vertically. It's the same type of menu within kartris. This is the CSS from Kartris 1.4, where the CSS menu at default was vertical, kind of like this one:
www.wholesalemx.com
/*
========================================================================
-- css fold-style
========================================================================
*/
#categorymenu .cssfoldout
{
display: block;
margin: 2px 0 5px 0;
}
#categorymenu .cssfoldout,
#categorymenu .cssfoldout a
{
}
#categorymenu .cssfoldout ul.KartrisMenu
{
position: relative;
}
#categorymenu .cssfoldout ul
{
padding: 0;
border: 0;
margin: 0;
}
#categorymenu .cssfoldout ul ul:hover
{
background-color: #444;
}
#categorymenu .cssfoldout ul.KartrisMenu,
#categorymenu .cssfoldout ul.KartrisMenu ul
{
top: 0px;
z-index: 3;
}
#categorymenu .cssfoldout ul.KartrisMenu ul
{
position: absolute;
left: 159px;
top: 0px;
visibility: hidden;
border-right: solid 2px #000;
border-bottom: solid 2px #000;
background-color: #444;
width: 159px;
margin: 0 0 0 -1px;
}
#categorymenu .cssfoldout ul.KartrisMenu li
{
position: relative;
list-style: none;
float: none;
margin: 0;
width: 159px;
}
#categorymenu .cssfoldout ul.KartrisMenu li a,
#categorymenu .cssfoldout ul.KartrisMenu li span
{
display: block;
text-decoration: none;
padding: 2px 11px 2px 10px;
font-weight: normal;
}
#categorymenu .cssfoldout ul:hover li a,
#categorymenu .cssfoldout ul:hover li span
{
font-weight: normal;
}
#categorymenu .cssfoldout ul.KartrisMenu li:hover,
#categorymenu .cssfoldout ul.KartrisMenu li.KartrisMenu-Hover
{
background-color: #444;
color: #fff;
}
#categorymenu .cssfoldout ul.KartrisMenu li:hover a
{
background-color: #444;
color: #fff;
}
#categorymenu .cssfoldout ul.KartrisMenu li:hover a:hover
{
background-color: #444;
color: #fff;
}
/* 2nd tier */
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul ul,
#categorymenu .cssfoldout ul.KartrisMenu li.KartrisMenu-Hover ul ul
{
visibility: hidden;
}
#categorymenu .cssfoldout ul.KartrisMenu ul li
{
float: left;
}
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li a,
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li span
{
display: block;
color: #999;
background-color: #444;
border-left: dotted 1px #999;
}
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover a,
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover span
{
background-color: #444;
color: #fff;
}
/* 3rd tier */
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul ul ul,
#categorymenu .cssfoldout ul.KartrisMenu li.KartrisMenu-Hover ul ul ul
{
visibility: hidden;
margin-left: -1px;
}
#categorymenu .cssfoldout ul.KartrisMenu li ul ul li
{
float: left;
}
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul a,
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul span
{
display: block;
color: #999;
background-color: #444;
border-left: dotted 1px #999;
}
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover a,
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover span
{
background-color: #444;
color: #fff;
}
/* 4th tier */
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul ul ul ul,
#categorymenu .cssfoldout ul.KartrisMenu li.KartrisMenu-Hover ul ul ul ul
{
visibility: hidden;
}
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul a,
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul span
{
display: block;
}
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul li:hover a,
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul li:hover span
{
}
/* 5th tier */
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul ul ul ul ul,
#categorymenu .cssfoldout ul.KartrisMenu li.KartrisMenu-Hover ul ul ul ul ul
{
visibility: hidden;
}
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul li:hover ul a,
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul li:hover ul span
{
display: block;
}
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul li:hover ul li:hover a,
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul li:hover ul li:hover span
{
}
/* Add more rules here if your menus have more than three (3) tiers */
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li li:hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li li li:hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li li li li:hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li li li li li:hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li.KartrisMenu-Hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li li.KartrisMenu-Hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li li li.KartrisMenu-Hover ul
#categorymenu .cssfoldout ul.KartrisMenu li li li li.KartrisMenu-Hover ul
#categorymenu .cssfoldout ul.KartrisMenu li li li li li.KartrisMenu-Hover ul
{
visibility: visible;
}
#categorymenu .cssfoldout .KartrisMenu-Vertical ul.KartrisMenu li
{
width: 170px;
}
--
If my post solves your issue, can you 'Mark as Answer' so it's easier for other users to find in future.
If you would like to be informed of new features, new releases, developments and occasional special bonuses, please sign up to our mailing list: http://bit.ly/19sKMZb
|