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/css/ folder, updating the color...