Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Re-adjusting the left side Nav so its aligned with the breadcrumbs link
 
marwaadawy
Jr. Member
 
Total Posts:  3
Joined:  2012-11-19
 

Hi all sorry this may have been answered before but fr the love of God I cannot seem to be able to move the left navigation up so its aligned with the breadcrumbs links..

Any help would be greatly appreciated. I have tried changing the css files using margin-top, padding etc but its unmovable! On the home page when there are no breadcrumb links, its all aligned. But when you navigate to the other pages, I moved the breadcrumb links to the right using css and wanted to readjust the top for the left nav bar..please help need it ASAP!!

Thank you. Please see attached pic!!

 
Magento Community Magento Community
Magento Community
Magento Community
 
kmHelms
Sr. Member
 
Total Posts:  227
Joined:  2012-03-05
 

Hi Marwaadawy,
First off, thanks for the chuckle. I felt your frustration in your post. It looks like you are going to have to do some rearranging in your templates or your xml. This is happening because of the order/structure of the divs. Do you use the firebug addon with firefox? It will help alot to see what I\’m talking about, but I\’ll do my best to describe. Magento also has a \"template path hints\” feature built in that is quite helpful as well. I\’m attaching a diagram, hope it helps

Anyway, whats going on is your breadcrumbs div is actually taking up the full width, even though it doesn\’t look like it. Your css for your breadcrumbs div has a width set and a lot of margin (252px) added to the left side, which makes it look like it\’s moved over to the right, but it is still technically using the whole space.

Then, after your breadcrumbs div, you have a containing wrapper div (col-wrapper) which contains your left column and your actual content. When you are trying to move your left column up, its running into the other divs borders and can\’t go any farther. First, the col-wrapper is set to a width of 748. Your left column needs a total of 244 pixels to fit where you want it (set width plus padding), and your col-main is taking up 496 pixels of width with it\’s set width +padding + margin. The extra width on your col-main is the first thing pushing your left column down. If you take the margin off \"col-main\" it will move up a little, but still not where you want.

Next, because both your col-left and col-main are in a containing div (col-wrapper), so the left column is going up as high as the containing div allows, but then your containing div is running into your breadcrumb div and stops. One way to fix this is to remove the breadcrumbs column from it\’s current spot and insert it into \"col-main\"

Sorry for the novel. don\’t know how much you know about css so i may have over explained but there you have it. You can reply here if you still have trouble. I\’ll check back. smile GOOD LUCK!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Lyonscg
Sr. Member
 
Avatar
Total Posts:  173
Joined:  2009-11-13
Chicago IL
 

Kudos on the explanation kmHelms, super informative!

 
Magento Community Magento Community
Magento Community
Magento Community
 
marwaadawy
Jr. Member
 
Total Posts:  3
Joined:  2012-11-19
 

Hi KmHelms,

Firstly, Thank you soooo much for your detailed reply to my CSS dilemma, I broke down the reply in bite sized pieces and yes managed to insert the breadcrumbs under the col-main. I do use the firefox add ons for developers.

So as it currently stands, my breadcrumbs are looking a tad unclean as it is now inheriting styling that of the the main col. Please see the pic attached or revisit my site jilbabsrus.co.uk. It seems as though the <ul> is not inheriting any list styles and hence causing it to look like tht. How do i fix this please?

Secondly and mainly, now how do i push the left nav upwards please??!

Any help would be greatly appreciated. I am new to CSS and i am learning as i go.

Thank you!!!

 
Magento Community Magento Community
Magento Community
Magento Community
 
kmHelms
Sr. Member
 
Total Posts:  227
Joined:  2012-03-05
 

OK. it does look like you are on the right track. I’m assuming by “unclean” you are saying want your breadcrumbs to display on the same line. By default list items want to display each item on it’s own line, because it’s a list afterall. To override this, you are going to have to change line 301 in your css where you are working with list items contained in the breadcrumbs div. You have two choices. Add a property of display: inline; OR float: left;

.breadcrumbs li {
   color
#FFFFFF;
    
displayinline;
    
margin-right5px;
OR
.breadcrumbs li {
   color
#FFFFFF;
    
floatleft;
    
margin-right5px;
As for moving your left bar up, there’s a couple steps you need to do.
#1) Line 291 of your css you need to remove the 252px of left margin.  Replace it with 0.
Like i illustrated in my diagram, even though your content is only taking up a fraction of the entire width, when you add margins to something, it adds width to the element.
#2) Remove clear: both;
When using clear, you can have clear: left; clear: right; clear: both, Clear says “do not allow floated elements on the left side, the right side, or both sides, meaning force the next elements down.

I don’t think that will solve all your problems, but it’s a start. Let me know when you get that far and I’ll look again. I was playing with the css with my developer extension and something seems screwy, so I’d like to look again after those changes are made.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top