[Solved] Synchronizing a background w/ a list item

[modiophile]

I have a centered background .png image (#logo-fire) that I want to follow with a list item (#logo) on my menu when scaled.

It looks and works just fine at 1024px and above, but once I start scaling the window down, the background image (#logo-fire) and list item (#logo) start drifting apart. My idea was to have both of them in sync, that way the list item will always be clickable no matter the window size.

Is it possible for the background image to position itself as though its only 128px in width, but display at 1024px (w/ overflow:hidden) ?

http://codepen.io/anon/pen/oGguw

[Paulie_D]

Here, try picking this apart…I keep it linked for reference…it does some pretty cools things…I wish it were one of mine.

http://codepen.io/wolfcry911/pen/HyLdg

Breaking your image into two parts (rocket and fire) would be useful I feel….especially at lower screen sizes where you could just not use the fire portion of it.

[Paulie_D]

B) Break up the rocket (128px) + fire (1024px) and somehow get the two to move in sync? Throw a hot empty div on top of the 128px rocket and have the rocket + fire (1024px) as a background image that follows the empty div. Tried it without success.

If the rocket is always in the center of the page (barring any media queries) then the fire could be placed as a bg of the body and centered using background-position.

The two should then follow each other.

[Paulie_D]

How do I make the parent list item “SOLUTIONS” conform to the size of its nested children “PRODUCT DESIGN” and “CONSULTING”?

There is no selector that will let you style a parent based on a child.

I would style the parent and then see what needs to be done to the children to give them the same appearance.

I keep this around for reference…it’s not exactly what you are after but it might prove useful.

http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294

[Paulie_D]

Sorry…updated my post with example menu.

[Paulie_D]

Here’s a similar one with no set width on the list items but centered links.

I added padding to the anchor links in the top level list items but be aware that the sub menus will inherit whatever width you let the toplevel list items have.

I haven’t gone into it yet but I’m sure that could be tweaked.

http://codepen.io/Paulie-D/pen/01e9d55c13dd3770da9690f9f1eba8bf

[Author]

Posts