ahhh, the drop down is finally working on my end, just need to get it on one line....thank you soooo much allan!!!!!!!

Did you see the last edit about the # sign?

yes, i added the # sign to all of the color hex codes.

ok, figured out how to get it all on one line! making progress!!!

now i just want to adjust one thing on the nav bar...for the "events" drop down on the porfolio tab, i would like that to appear with the rest of the group and then have a fly out that has the event titles. right now all i see is a yellow strip. i tried to fix it and totally messed up the entire bar.

also can anyone please tell me what the heck i did wrong?? for some reason i lose my nav bar when i go to the "world as i see it" page.

almost there!!

Thanks again!!

erika

Change your nav html to this. Found a missing </li> and extra </ul>, </li>
I'll look at CSS next.

Color tweaks and flyout widening.

Allen you are a GENIUS!!!!!!!!!! thank you soooo much!!!!:bow:barb

ONE LAST QUESTION....for tonight at least :wink

my breadcrumbs on the "world as i see it" and the nav bar have disappeared...i have no idea what i did wrong...i went through the gallery settings of that page and the others and they all seem to be the same...any clues?

~e :scratch

Under gallery settings make sure "custom" is set for appearance and "hide owner" is not checked.

You missed one of the CSS changes.

.menu ul ul ul li a:hover {color: white;}

thank you again!!! :bow i was wondering why only some of the hovers were working...knew it was something i missed...was looking but i guess my eyes were tired at that point...thanks for pointing me in the right direction!

this has been something that i have wanted to do for a long time!! and now i figured out why i was seeing the nav bar on two lines on my pc but not my mac...browser is OLDDDD!

Thanks again! :clap:clap:clap:clap:barb

~erika

i just asked someone else to take a look at the site and she also see's the nav on two lines, but when i look at it on my mac i see it on one. is there a code that we can slip in there to make sure everyone sees the nav on one line?

Increase the width in this until it stops wrapping. 530 > 540 > 550 > ....
Shouldn't take more then 10 or 20.

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 40px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:530px; /* Main bar total width, minimize to not wrap to two lines*/
}

Nav Bar Problems in IE6
 

I just noticed that the homepage for my website is not working correctly in IE6, and I think it may have to do with the CSS nav bar code. I am using the code from the tutorial that existed about two years ago. I copied the CSS code at the beginning of this thread and I am still having the same problems. The interesting thing is both versions of the code work very well in FF. Has anyone else run into this problem?

Here is a link to my website:

http://www.ewbphotography.com/

Eric

Might try this. Anywhere there is no drop end the line with </a></li>
Example below

Al you are a life saver. There were only two places in my code that needed correcting and it fixed the whole problem. I really appreciate the help.

I have a strange problem with my dropdown navbar. It's worked peftectly for the past little while (about a month) and I logged in this morning and all of a sudden things have gone weird. The entire navbar used to be on one line with the "galleries" section and flyouts on the left then guestbook then biography and there was never a huge black space at the top. I was not altering my advanced settings whatsoever and it worked fine last night. Can someone please help me?
link: http://www.sarahphotography.ca
Thanks so much, you guys are awesome!

Remove the extra two }'s
Then change the top margin of your nav from 1000px to something like
10px. Might need to increase your menu width to 380 to keep it from
wrapping.

So I recently attempted putting this onto a webpage and ran into a little difficulty, rather than getting the effective dropdown menu, I simply got a list of text in the format of;

I may have missed something while reading through the original post, but I have essentially copied over the code from the OP. I attempted making a few modifications where I thought would be fit but it pretty much burned the whole thing down, so I reverted. My code is as follows;

In the CSS:
In the HTML:
Any and all help is greatly appreciated, thank you very much!

Would love to help but need a link to your site.

http://www.kimadzichphotography.com

I didn't add the link because the bar is not there, because of the fact that it didn't work and just created a half page long of text, as stated in my full post above. So all that's there is a website without the dropdown nav menu, because the nav menu isn't working.

Put what you can in and also add this to your CSS to hide it from visitors.
Only you will see this "nav in progress" when logged in. When it's perfected
you can remove this CSS.

.notLoggedIn .menu {display: none;}

Anyone helping will use WebDev to temp disable that CSS so they can help with the nav.

My apologies for wasted time, but I've got it working perfectly. Thank you all very much for your assistance!

Looks good :thumb If you need any help fire back here.

I need some help!! I have been working on this for day and I still cannot seem to get it right. I am trying to make a nav bar. Here is what I have in the CSS.
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #000000;
background-color: #000000;
}
#navcontainer ul li a:hover {
color: #000000;
background-color: #369;

Here is what I have in the Custon Header

<div id="my_banner"> </div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="12688026">About Me</a></li>
<li><a href="http://road-explorer.smugmug.com/Photography">Galleries</a></li>
<li><a href="/gallery/13580084">Guestbook</a></li>
</ul>
</div>

I cannot get it to full display on my home page. What am I doing wrong? Here is the my web http://road-explorer.smugmug.com

Try this
That big gap your see above the nav is the blank banner because you haven't added a photo number.

AHHHHHHH HELP PLEASE ~ I have tried everything I can't center my dang navbar - FOR THE LOVE OF GOD (I tried three days before coming forth) But I'm a broken girl with an offcenetered nav bar =( I almost have it perrrfect/ AND TO THE LEFT =(
http://www.lizziefaye.com

Try this. Minimize the width until it doesn't wrap to two lines. The auto r/l in the
margin centers the width.

Did I ever tell you how much I ♥ You? Sooooooo much! THANK YOU THANK YOU!

Hi Allen,

I've added another category to my navbar, and having a problem with wrapping. I've changed the width as indicated below, but no matter the value, it still wraps on me. Tried in FF and IE8, still no luck.

Any suggestions?
Thank you in advance

I had to boost it to 880 to stop the wrap.

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 30px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:880px; /* Main bar total width, minimize to center */
}

but, change the min width first and the whole bar will be narrower and center at about 710.
btw, fix the top part of your html. I would also try to keep the indents, easier to understand and trouble shoot.

Thanks for the fix Allen, corrected the wrap. I'll play with the centering to see if I can get it right on my own, and if I have an issue I'll come back.

Thank you again!

Allen ,

I have used your code for the drop down menu bar . I would like to move the menu bar towards right ( my right) . Need some help with that . PLease refer to the screenshot for a detailed understanding .
MY website - mayukhphotography.com

Changes in red. Also remove the font size in first one.
No banner? If you add one the CSS will need some change.
Went thru and cleaned up your html. I would suggest not using titles
unless they say something different then what the button does. They
get in the way when hovering the menu. Leave blank like this. title=""
For directly linked unlisted galleries use a link like. /gallery/13571493_k8EDp
No reason to expose the full path.

Hi Allen,

I am really new to trying to structure my smugmug homepage a specific way. I've read your tutorial but with limited coding experience, I don't think I have absorbed things as easily as I should have. I have used Easy Customizer to build and add a centered Navbar on my homepage. It appears to work correctly except for the Galleries button. What I am trying to do is to get all my public galleries to show in a drop down menu bar from the Galleries button in the navbar. Users can then mouse to which gallery they want and click on it to open it up. I can get one category of galleries to open correctly, ie all my Travel galleries, but the only way I can get another category of galleries to open is to have a second Galleries button in the navbar, which is a little cumbersome. I've spent two days going through past forum posts trying to sort this out and frankly it is starting to turning brain to mush. I've lost count of the number of threads dealing with this very issue and am now going in circles.

I know I need to add CSS code in the full editor to get the navbar to function the way I want it to. Wondering if you might be able to point me in the right direction. Sorry if I appear a little dense, must be retirement.

Many thanks

Mark
Phaeton Place

Your nav "Galleries" is linking directly to your Travel category. If you want
a separate page to display the galleries/categories see this tutor and look
at "The Galleries Page" sections. Then the link in your navbar bar would be
changed to "/galleries".

Your have galleries toggle for your galleries/categories box. In the upper
right corner pick "categories" to display by category.

2 Nav Bar Questions
 

Hello,

I have tried a couple of things posted in this thread to solve my nav bar issues but they haven't worked. Here's what I'd like to do:

1. Position my nav bar up higher to the right of my logo

2. Make the background of the drop down boxes transparent so all you can see is the text.

3. Align all the text in the drop downs to the left

Thanks in advance for your help :-)
~Kelly

http://www.kellyjohnsonproducts.com

Hi allen , thanks for all your help :) .

Here i am back again looking for more help ... i have modified the website further since the time i posted the above post . Now the problem is although the menu has shifted to the right the flyouts are opening up and going beyond the margins .. Please check the screen shot for a better understaing .
And yes , i would be adding a logo banner later on which would be most probably be located at the extreme left ..opposite to the menubar.

My Website - www.mayukhphotography.com

Before we get to your other questions lets position the banner and nav first.

See if you like this. Makes the banner and nav relative to each other and
positioned both static in center on one line.

Remove the logo/banner from Easy Customizer. The banner will now be defined in CSS.

Add #my_banner and change the .menu like this in your CSS.
Remove the red from your header

Change the red

First, change your header nav html to this, fixes some errors.
See if this works better. Moves the nav in from the edge some. Flyouts pop out to the left.