/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] apple style menu bar

Copy linkTweet thisAlerts:
Jan 17.2012

[url]http://www.apple.com/[/url]

Here’s my go at it… but the question i have is can i put my logo on top of the bar instead of inside the first bar. I want my logo in the same place as the apple logo except with a higher z-index so to speak so it hangs over a bit.

[url]http://greenfitco.com/tm/apple.html[/url]

any help on this would be greatly appreciated, as usual.

=)

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@SupplementauthorJan 18.2012 — Question about svg file, hopefully someone can help me.

http://images.apple....balnav_text.svg

If i add this link to the css the nav titles show up as this vector graphic.

Look at it here:

[CODE]/* TEXT */
#globalheader #globalnav li a span { display:block; width:100%; height:30px; margin:3px auto; background:url() no-repeat 50% 0; _background-image:url(); }
#globalheader.svg #globalnav li a span { background-image:url(http://images.apple.com/global/nav/images/globalnav_text.svg); }
#globalheader.decelerate #globalnav li a span,
#globalheader.ios3 #globalnav li a span { background-image:url(); }
#globalheader #globalnav li#gn-apple a span { background-position:50% 0; }
#globalheader #globalnav li#gn-store a span { background-position:50% -30px; }
#globalheader #globalnav li#gn-mac a span { background-position:50% -60px; }
#globalheader #globalnav li#gn-ipod a span { background-position:50% -90px; }
#globalheader #globalnav li#gn-iphone a span { background-position:50% -120px; }
#globalheader #globalnav li#gn-ipad a span { background-position:50% -150px; }
#globalheader #globalnav li#gn-itunes a span { background-position:50% -180px; }
#globalheader #globalnav li#gn-support a span { background-position:50% -210px; }
[/CODE]

If i take that svg file out and add my own nothing shows up. What's the process with saving svg files or have i completely lost the plot.

It works if i paste the apple link in but doesn't not work when i use my own file. =/


Here's my file:

http://www.greenfitc...m/tm/Navvv1.svg

It's obviously not rendering right.

any help would be appreciated. thanks
Copy linkTweet thisAlerts:
@SupplementauthorJan 18.2012 — Still need help on this last bit.
Copy linkTweet thisAlerts:
@SupplementauthorJan 18.2012 — ok, well now it's officially resolved and just in case anybody else runs into this problem.

You need to add the tags into an .htaccess file like so:

AddType image/svg+xml svg

AddType image/svg+xml svgz
×

Success!

Help @Supplement spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...