O'Reilly logo

Learning Magento Theme Development by Richard Carter

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required