Help with Horizontal Navigation Bar with Drop Down Menu 3 pages: 1 2 [3]
OLPamPam
Posted: Tuesday, March 27, 2012 5:04:47 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 7/5/2009
Posts: 301
Location: North Bay
You're welcome. I hope it works out for you.
borianag
Posted: Friday, May 11, 2012 6:27:24 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 8/22/2007
Posts: 503
Location: Sofia
Thank you so much Pam! Your post was very helpful to me.
OLPamPam
Posted: Thursday, May 24, 2012 4:40:57 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 7/5/2009
Posts: 301
Location: North Bay
You're welcome.
craftycorner
Posted: Monday, May 28, 2012 6:33:00 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 6/27/2009
Posts: 697
Location: Boca Raton
OLPamPam wrote:
You're welcome.


thanks for the lovely comment that you posted in my store. I wil have to give this little update a try, thanks for posting this, i really want to do a little more updating & i think this may do the trick... Grin
OLPamPam
Posted: Tuesday, May 29, 2012 10:55:52 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 7/5/2009
Posts: 301
Location: North Bay
I hope it works out for you. It would look great where you have your links at the top. You can keep the same css code that you have now, so you keep your original look. It looks really good.
My5k262
Posted: Monday, June 04, 2012 4:47:59 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 8/2/2011
Posts: 60
FYI ...

There is an IE7 (and earlier) bug that causes the navigation in this thread to open behind the main page of your store in those browsers.
(Info on the bug here, if interested: http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/ )

To fix it:
1) Add an ID to your main navigation table:
Code:
<table align="center" width="900" cellpadding="0" cellspacing="0" id="horizontalNav">


2) Add the following to your styles:
Code:
#mainShell #horizontalNav {
    position: relative;
    z-index: 2;
}
#mainShell #main {
    position: relative;
}


3) That'll do it. You can remove the two "z-index:9000" references from the existing styles because it turns out they weren't doing much in this case anyway.

So far, I haven't find any unintended side effects. Hope this works for all.
OLPamPam
Posted: Saturday, June 09, 2012 4:25:24 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 7/5/2009
Posts: 301
Location: North Bay
Oh thank you so much, My5k262. I've been trying to figure that one out for awhile.

I'll test it out and add it to the original post.
My5k262
Posted: Sunday, June 10, 2012 12:14:30 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 8/2/2011
Posts: 60
Happy to help!
Shelby Allison
Posted: Wednesday, August 15, 2012 8:53:59 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 1/25/2012
Posts: 12
Thanks for the code! I tried it and it worked great. I'd like to make a background image for my navigation bar. Any idea how I can do that?

http://www.zazzle.com/origamiprints
OLPamPam
Posted: Monday, August 20, 2012 4:16:48 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 7/5/2009
Posts: 301
Location: North Bay
I'm assuming that you would add some code to your css to the #menu section.

http://www.w3schools.com/css/css_background.asp">w3Schools
-this site has the best information. It's so helpful.

Anyways, you would add a code like this to the #menu section (I think that's the right section), in which the 'bgdesert.jpg' part is hosted on another site, such as picasa or photobucket

background-image:url('bgdesert.jpg');

and you would need it to be the right size. You may wish to add a code like

background-repeat:no-repeat;

if you find it necessary.

Or if you have a seamless pattern, then allow it to repeat.

Anyways, you will have to try it out to see if it works, but I believe this is the right way to do it.
InvitationsByChrissy
Posted: Wednesday, September 19, 2012 9:46:28 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 6/25/2008
Posts: 2
Location: Mount Joy
can't wait to play with this. thanks so much!!!
InvitationsByChrissy
Posted: Wednesday, September 19, 2012 1:36:04 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 6/25/2008
Posts: 2
Location: Mount Joy
worked amazing for me! you can see it here...

http://www.zazzle.com/invitationsbychrissy*
OLPamPam
Posted: Wednesday, September 26, 2012 6:06:12 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 7/5/2009
Posts: 301
Location: North Bay
Really nice store Chrissy, you have some great designs.

I was just going to mention, that it might be a good idea to keep the text all in uppercase on your menu when you hover over it. I just find it a little bit distracting when it changes to lowercase because everything shifts.

Great job on the look of the menu. I love the double border on the top and bottom of your menu. Looks really classy.
RenImasa
Posted: Sunday, October 07, 2012 12:40:33 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 6/5/2008
Posts: 246
Hello Pam,

thank you so much for the codes; you're awesome!

I tried them out yesterday and they worked well; I am still tinkering with it to get "the look" I want.
tashatzazzle
Posted: Tuesday, January 08, 2013 5:07:44 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 5/24/2010
Posts: 1,988
Pam, thank you thank you thank you for this!! Love Smile
raindwops
Posted: Saturday, January 19, 2013 10:40:50 AM

Groups: Member

Joined: 8/4/2012
Posts: 172
Hi Pam,

Thank you so much for the code. It works great for my store.
I was googling for this horizontal menu and found this thread.
You're a lifesaver! Thanks again.


..
http://www.zazzle.com/raindwops
Users browsing this topic
Guest


Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.
Print this topic
RSS Feed
Normal
Threaded