0

NEW QUESTION:

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)

Improve this question
3
  • 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
    Commented Jul 31, 2014 at 17:02
  • If you are not using firebug for Firefox I highly recommend you do. It is a great tool.
    – Steven Lynn
    Commented Jul 31, 2014 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
    Commented Aug 3, 2014 at 6:35

3 Answers 3

Reset to default
3

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>
Improve this answer
3
  • 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
    Commented Jul 31, 2014 at 16:40
  • Nvm! I must've missed a /div. It works now. Thanks!
    – JasonC91
    Commented Jul 31, 2014 at 16:52
  • Do you know how I can change the color to a lighter gray?
    – JasonC91
    Commented Jul 31, 2014 at 16:56
1

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.

Improve this answer
5
  • Wouldn't this just get over written if he updated is magneto version?
    – Steven Lynn
    Commented Jul 31, 2014 at 1:34
  • Note the your_theme/your_package path. I linked to the base/default template for reference.
    – pspahn
    Commented Jul 31, 2014 at 3:30
  • I would like to know, if I were to update Magento would this change be permanent?
    – JasonC91
    Commented Jul 31, 2014 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
    Commented Jul 31, 2014 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
    Commented Jul 31, 2014 at 16:59
0

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.

Improve this answer
5
  • 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
    Commented Jul 30, 2014 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
    Commented Jul 31, 2014 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
    Commented Jul 31, 2014 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
    Commented Jul 31, 2014 at 13:17
  • Thanks, but I was looking to move the whole bar, not only the links!
    – JasonC91
    Commented Jul 31, 2014 at 16:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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