Customizing your Magento store's header
As it stands, your current theme looks incomplete at the moment. You can begin to address this by:
- Adding CSS to customize the header elements of your theme
- Altering your theme's
header.phtml
file to customize the HTML used by Magento
Providing CSS for Magento's navigation dropdowns
Most of the styling for Magento's drop-down navigation can be done within CSS. Firstly, you can remove the bullet points and other styling associated with the <ul>
elements by adding the following CSS:
.links li, #nav li, .breadcrumbs li { display: inline; list-style: none; } ul.links, .links li, .breadcrumbs ul, #nav ul { margin: 0; padding: 0; }
Our next task is to restore your Magento theme's CSS for drop-down navigation . This can be done by reusing the CSS applied to #nav
from the styles.css
file in the /skin/frontend/default/default/css/
folder and copying this into your new theme's styles.css
file in the /skin/frontend/default/default...