Floating Menu Bar [#1466248]

Interesting --- With the normal Ubercart Cart Block in the header, all looks well and normal. However, when a customer adds an item for purchase, a larger cart block appears and the menu bar moves down, revealing white space. With the Cart Block removed from the header, the menu bar moves up, covering part of the logo. It appears that the menu bar is tracking the image of the cart block, rather than the logo. I have attached reference images...

Thoughts:
1) Should the expanded Cart Block cover the Menu bar?
2) Does a normal cart block not expand?
3) Are there alternatives I am unaware of?
4) HERE'S AN IDEA: What if I created a static link to the full cart in the header, and then had the far right button in the menu bar change background colors and show the number of items and purchase amount in the cart? In other words the last link in the menu bar becomes a MINIATURE CART. Would that work?

Thanks for all your help!!!

I am using Drupal 7.12 and ubercart 7.x-3.0. Pixture Reloaded 7.x-2.x-dev. My web address: https://www.arttreehouse.com/store/

Comment	File	Size	Author
#3	short-cart.jpg	185.5 KB	robertmaynord
#3	full-cart.jpg	167.5 KB	robertmaynord
	no-cart.jpg	199.5 KB	robertmaynord
	cart-with-product.jpg	183.47 KB	robertmaynord
	cart-no-product.jpg	193.28 KB	robertmaynord

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Jeff Burnz CreditAttribution: Jeff Burnz commented 3 March 2012 at 16:58

Set a height on the logo wrapper and use an image taller than 120px, your background image is too small to support your own requirements, or you can set a background color the same as the bottom end of the gradient (designer tip).

Comment #2

robertmaynord CreditAttribution: robertmaynord commented 3 March 2012 at 18:39

Thanks, Jeff, for the info! I'll implement your suggestions and write again about it....

Comment #3

robertmaynord CreditAttribution: robertmaynord commented 3 March 2012 at 21:39

File	Size
full-cart.jpg	167.5 KB
short-cart.jpg	185.5 KB

Here's the results:

I made the following changes...

1) Changed the .css logo wrapper to 151px - that's how far the cart pushes things down.
2) Enlarged my logo image to 121px, though in the end this was not the primary fix. I could have made it larger but I knew it was getting too large, aesthetically.
3) Expanded the background brown color to 151px to cover all the white area.
4) It now works. (full-cart.jpg)

However, the bottom line is: For my purposes, the cart pushes everything down too far when it is loaded. This is not a theme problem, but a cart-size problem. The enlarged header ends up taking too much "real estate" space. When the cart is not loaded, the color "leaks out" under the menu bar, and pinches the content below (short-cart.jpg).

At this point, my strategy is to place the actual UC cart on pages other than the front, where space isn't so critical. Perhaps I'll put it in the second sidebar on non-front pages. I still like my "mini-cart in the menu" idea :-)

Anyway, thanks for all your help! It's great!

I am enjoying working with the theme to improve the look of my web stuff as much as I possibly can...

Comment #4

Jeff Burnz CreditAttribution: Jeff Burnz commented 3 March 2012 at 23:24

The problems you are having because you are making hard coded assumptions about how things will look, truth is you can never really know this. What you can do is write CSS that is highly flexible and accounts for differences, however small or large, literally. For example hard coding the header height to 151px, seems reasonable, but do you know for sure its never going to break (I can tell it will, under certain conditions it will break). Better to follow the advice I gave earlier and set a background color and a min-height, that will be sustainable no matter how big the header grows.

I understand about the cart height issue, its hard to change because it uses tables, I could get funky with it and display: block things and float them around, but I open a can-o-worms with that one.

Comment #5

robertmaynord CreditAttribution: robertmaynord commented 4 March 2012 at 03:22

Jeff:

I appreciate your thoughts on the "hard coded assumptions", etc. So, in response, I have set up the header using a background color and min-height. I am also reworking my logo - making it larger - and hopefully it will look decent. At this point, however, I am unable to work at all because my ISP's server is down. Ha!

By the way, in the process of learning through this, I discovered a vector graphics program for Linux called Inkscape. It's really great for working on web graphics. Just FYI.

See you again soon...

Comment #6

robertmaynord CreditAttribution: robertmaynord commented 4 March 2012 at 16:08

Well, I have modified my page and have the new larger logo set on top. Everything appears to be working well (except within Internet Explorer 8, which shows no sidebars, and IE 7 which is a total mess) . It seems that I am, in part, adjusting to the new wide-page look of this theme. Every one of my competitors uses a frozen 960-wide fixed-width layout, presumably to accommodate for Internet Explorer. However, if I understand correctly this theme is more adjusted to the "future", to mobile devices such as tablets, etc. Sounds good to me - maybe it will be a "plus" for some of my customers.

Anyway, thanks for your help! Till next time.....