How to add a Cart Icon to header?


Hello everyone I'm wondering how to move the Quick Access Bar from Below the catalog to I'm assuming I need to edit code? Please help! Thank you so much. NEXT QUESTIONS: -How can I make the bar a lighter gray? -How do I fix the bar to the top of the website? (If I scroll down I can still see it)

  • To change the color you can edit your style.css. Line 1728 to be specific. You should see the following. .header-container .quick-access-container { background: none repeat scroll 0 0 #e6e6e6; Change #e6e6e6 to what ever color you please. – Steven Lynn Jul 31 '14 at 17:02
  • If you are not using firebug for Firefox I highly recommend you do. It is a great tool. – Steven Lynn Jul 31 '14 at 17:05
  • Hey thanks a lot for your help. I've decided to try and make a top-bar instead. Could you please give some direction? magento.stackexchange.com/questions/31069/… (Looking to create the same top-bar/header as Walmart.com) – JasonC91 Aug 3 '14 at 6:35

go to the header template (located at your_package/yourtheme/template/page/html/header.phtml)

move the part

<div class="quick-access-container">...</div>

to the top of the code:

<div class="header-top">...</div>
  • thank you. When I did this it changed the whole header to gray? I'd like it to stay as a GRAY BAR.[link](www.statis-online.com/statisonline) – JasonC91 Jul 31 '14 at 16:40
  • Nvm! I must've missed a /div. It works now. Thanks! – JasonC91 Jul 31 '14 at 16:52
  • Do you know how I can change the color to a lighter gray? – JasonC91 Jul 31 '14 at 16:56

The "Magento way" to do something like this will vary depending on your site. You could edit the CSS as suggested - that's a simple band-aid fix that changes where the element is displayed, but not where it is. I would argue that if you wanted to use CSS to position the bottom of your webpage at the top (or somewhere else for that matter), why not just put it there instead of relying on smoke and mirrors?

What happens when the next guy comes along and tries to change the position of something else and not only wastes time realizing it was done with CSS but also now has to either shoe-horn his own changes into a negative margin or rewrite the previous changes making the previous effort a waste of time.

Learning how to use Magento's layout system will allow you to change placement of various page components more accurately and more predictably (especially for the next guy that works on the site). While it may depend on how your site is designed, finding the file: app/design/frontend/[your_theme/your_package/page/html/header.phtml (link to default file) will likely leave you with simply changing the position of:

<?php echo $this->getChildHtml('topMenu') ?>

You can likely just move that line in your template file to be the last line.

  • Wouldn't this just get over written if he updated is magneto version? – Steven Lynn Jul 31 '14 at 1:34
  • Note the your_theme/your_package path. I linked to the base/default template for reference. – pspahn Jul 31 '14 at 3:30
  • I would like to know, if I were to update Magento would this change be permanent? – JasonC91 Jul 31 '14 at 16:54
  • This change will be dependent on your theme. Upgrading magento would not effect it, but if you updated your theme it would. – Steven Lynn Jul 31 '14 at 16:55
  • Sweet. Thank you, do you know how I can change the color to a lighter gray? And to Fix the bar at the top of the website? – JasonC91 Jul 31 '14 at 16:59

enter image description hereOpen your theme's style.css file and search for the following.

.header-container .quick-access .links {
    float: right;
    font-size: 13px;
    margin-top: 7px;
    text-align: right;
}**strong text** 

Firebug says that is line 1739.

edit margin-top to -75

.header-container .quick-access .links {
    float: right;
    font-size: 13px;
    margin-top: -75px;
    text-align: right;
}**strong text** 

Save and clear cache.

  • Seeing as this should be Magento specific, simply giving a negative margin in CSS to alter layout (when Magento has a method specifically for this) seems like a poor way to do this. – pspahn Jul 30 '14 at 22:15
  • This is not magneto specific. This is clearly theme related. This method is the simplest way. That css block is dedicated to the quick access navigation bar. Changing it has no effect on any other element making you answer irrelevant. – Steven Lynn Jul 31 '14 at 1:30
  • Looking at your fix, you are only moving the links, not the entire bar. Second, while it may be the "simplest" way to move something, can you imagine working on a site where methods such as this are used constantly? What semantic value does the HTML hold if you just position everything arbitrarily with CSS? While negative margins aren't always what you would consider a "hack", in this case I think it is and it ultimately has nothing to do with Magento it just so happens to be that the question is asking about a Magento site. The answer would apply to a site built with PrestaShop as well. – pspahn Jul 31 '14 at 3:40
  • The purpose of css is the style your website. Changing css is quite easy, especially when using a tool like firebug. No this is not a hack. It is a solution just like yours. It has just as much to do with magento as the header.phtml file. Both are theme relative. Saying the stlye.css sheet has nothing to do with magento is just silly. This question boils down to a theme change. – Steven Lynn Jul 31 '14 at 13:17
  • Thanks, but I was looking to move the whole bar, not only the links! – JasonC91 Jul 31 '14 at 16:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.