Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Center Frontend Categories
 
iMaster
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-25
 

Hello,
How can I center the categories shown on my frontend? Currently they are listed from left to right.

Thank you

 
Magento Community Magento Community
Magento Community
Magento Community
 
iMaster
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-25
 

Is there a way to change the font, of the Categories?

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

You’ll need to change the code in skin/frontend/default/default/css/menu.css

 
Magento Community Magento Community
Magento Community
Magento Community
 
iMaster
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-25
 

Hello,
Thank you for the reply.

Can you please explain which values I change in menu.css to have the categories centered. I am very new to editing website files especially .css files.

menu.css:

#nav { padding:0 20px; font-size:1.1em; z-index:999; }

/************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */
#nav li {
list-style:none;
position:relative;
text-align:left;
}
#nav li.over { z-index:99; }
#nav li.active { z-index:98; } /* to prevent the li separator from showing through on mouseover on li */
#nav a { line-height:1.3em; }
#nav a, #nav a:hover { display:block; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }

/************ 1ST LEVEL ***************/
#nav li { float:left; }
#nav li.active a { color:#d96708; }
#nav a { float:left; padding:5px 12px 6px 8px; color:#A7C6DD; font-weight:bold; }
#nav li.over a, #nav a:hover { color:#d96708; }

/************ 1ST LEVEL RESET ************/
#nav ul li, #nav ul li.active {
float:none;
margin:0;
padding-bottom:1px;
background:#ecf3f6 url(../images/nav_divider.gif) repeat-x 0 100%;
}
#nav ul li.over {background:#d5e4eb url(../images/nav_divider.gif) repeat-x 0 100%;}
#nav ul li.last { background:#ecf3f6; padding-bottom:0; }

#nav ul a, #nav ul a:hover {
float:none;
padding:0;
background:none;
}
#nav ul li a { font-weight:normal !important; }

/************ 2ND LEVEL ************/
#nav ul {
position: absolute;
width:15em;
top:25px;
left:-10000px;
border:1px solid #899ba5;
}

/* Show menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }

#nav ul li a { background:#ecf3f6; }
#nav ul li a:hover { background:#d5e4eb; }
#nav ul li a, #nav ul li a:hover { color:#2f2f2f !important; }
#nav ul span, #nav ul li.last li span { padding:3px 15px 4px 15px;}

/************ 3RD+ LEVEL ************/

#nav ul ul { top:5px; }

/*
#nav ul ul ul { left:-10000px; }
#nav li.over ul li.over ul ul { left:-10000px; }
#nav li.over ul li.over ul li.over ul { left:100px; }
*/

/* Fix for the IE bug */

#nav iframe {
position: absolute;
left: -1px;
top: 0;
z-index: -1;
background:transparent;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
.debug {border:1px solid red!important;}

Thank You

 
Magento Community Magento Community
Magento Community
Magento Community
 
iMaster
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-25
 

(bump) smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
iMaster
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-25
 

Come on people, I have spent hours messing with menu.css and it wont let me center the categories. I can change the color of the text, i can make the sub-menu hover to the left, but I cannot center the categories. Can someone please help me.

Thank you

 
Magento Community Magento Community
Magento Community
Magento Community
 
doctorlogos
Sr. Member
 
Avatar
Total Posts:  178
Joined:  2008-05-06
 

Hi iMaster, did you find a solution?

I´d like to know how to center the menu.

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Magazento
Sr. Member
 
Avatar
Total Posts:  155
Joined:  2010-01-08
Russia,Volgograd
 

Megamenu menu can do it
magento menu
- Menu does not use Nested navigation, all sub-categories are visible initially.
- Ability to add description/content directly in the menu section (description, pictures, flash, etc.)
- Create custom arbitrary menu items.
- Paste inside menu : widgets, static blocks, text, shapes, images, video and all kind of content you have
- Modify and customize each type of menu item. 
- Specify size from 1 to 5 columns;
- The alignment of the menu and content;
- The Office of nested sub-categories;
- All menu items categories are fully manageable from an administrative part.
- All menu items are fully manageable from an administrative part.
- The menu is original, with 2 completely different design, a minimalist red and strong blue.
- Design the menu is made in conformance standards of html and CSS3 CSS3 -
- Phtml and CSS code opened for editing.
- The totally usable menu can be set from MagentoConnect

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top