Dropdown Navbar help thread
 

Edit: After all the questions in this big thread I hopefully created some simplified html instructions.
See post #1169 Adding Drop/flyouts Simplified
http://www.dgrin.com/showthread.php?...44#post1634244

Please post all new questions on dropdown menus/navbar in this thread. If you are seeking an answer
to something in the old thread, post here and provide a link to the old post.

After years of playing/revising/editing the various versions of CSS I've found that this version
seems to be the easiest to work with. You can just slam this html and CSS in and have a starting
point for your navbar. I've color coded the CSS for text and backgrounds with different colors to make
it easier to find the code.

Here's an expanded view
http://www.photosbyat.com/photos/879..._RwprE-L-1.jpg

HTML that goes in the "advanced site-wide customization" Custom Header (optional) box. (not head tag).
Replace each #link with your link.
CSS

While you are working on your new dropdown navbar add this to your CSS
and only you will see it when logged in. It will allow you to get it perfect
before going public. Leave the old nav in for your visitors for now.

Code:

---

      /* temporary hide new nav when not logged in */
.notLoggedIn .menu {display: none;}
.loggedIn #customNavContainer {display: none;} /* ECZ added nav */
.loggedIn #navcontainer {display: none;} /* other added nav */
      /* end temp CSS */

---

TROUBLE SHOOTING

The vast majority of problems are because of errors in the html. Check your
html as below. If this structure is not followed your nav might look ok in
Firefox but IE nav will be messed. Ref. this page.

Notice how every <li> & <ul> has a closing </li> & </ul>. Use a pure text
editor like notepad and spaces for indents to keep everything straight.
Also EVERY </ul> that closes a drop should look like this: </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
The last one before the closing div does not.
All list lines must include a href, if you don't want it clickable use a # in the link.

<li><a class="drop" href="#">xx
<li><a class="drop" href="#nopick">xx
<li><a class="drop" href="#anytext">xx

Full links need the http <a href="http://....
You can't just use <a href="www....
Only relative links start with / not full links. To get a relative link the front end is left off.

<li><a href="http://nickname.smugmug.com/Family/Kids/Joey/12345657_vdyRh">
<li><a href="http://me.mydomian.com/Family/Kids/Joey/12345657_vdyRh">

like this

<li><a href="/Family/Kids/Joey/12345657_vdyRh">
<li><a href="/"> A single slash is used for home link.
<li><a href="/galleries">
<li><a href="/popular">

An unlisted gallery (or any gallery) can be shown like this.

<li><a href="/gallery/12345657_vdyRh">

Notice it hides the cat, sub-cat and nicename in the link which is not
needed for unlisted gallery links.

Drop button doesn't change color on hover. I just noticed if a NiceName link is used, and the
sub-cat is a niceName and has a dash (-) in it, the hover doesn't work. Change the dash
to an underline and the button hover works.

Also noticed on some sites that if the niceName link is used sometimes the gallery name
needs to be removed for hover to work in the drops.

Another note: IE browsers sometimes do not like backgrounds set to "none" in the drops
and the mouse is lost trying to get down to the next text. Instead of using

background: none;

Use this instead

background: rgba(22, 22, 22, .0001);

It applies a background to each and sets the transparency to almost nothing. That way IE
senses a background and you don't lose the mouse between each button text.

Perfect timing, this has most of the info I need to the stuff I am wanting to do. Thanks!

Simple Nav Bar and Header Help (Positioning)
 

Hello Allen,

Looks like you are the expert with Nav bar and Headers. I've got my basic Header and Nav Bar centered, however I am wanting to change this a bit.

1. I would like to move my Nav Bar all the way to the right and I would like my Header to be all the way on the left. I would like them to be on the same line. I am a little confused on how to do this. (similar to Andy's MoonRiver)

I can tweek the colors and stuff later. If I could just get the position right.

Feel free to check my HTML and CSS.

Thank you much!

www.joeepleyphotography.com

Looks like you got it there. I'd make a couple changes though.
Don't know where the #wrapNav comes from or where it's used, I'd remove that rule.
Also remove that extra _filter part in red. Add the margins to the #navcontainer rule.
In your header move the banner below the nav so negative margins won't be needed.

<div id="navcontainer">
...
...
</div>
<div id="my_banner"> </div>

Thank you Allen.

I did continue to work on it after I posted my question. After several hours of searching through the forums, I did finally get it looking somewhat like I wanted.

I found you! :wink

Here's the last message I left you: http://www.dgrin.com/showthread.php?t=42747&page=54 #1071

Also, I've played around with banner size and width of the navbar so that it fits everything on the same line - hopefully on all computer monitors. I noticed that it was overlapping on some monitors.

Do you think my banner is too small now?

My navbar spacing looks fine on my computer, but on our older laptop, the navbar looks really spaced apart. I couldn't find the code to make the spaces between the buttons just a tad smaller.

Muchas Gracias!

What do you mean by really spaced out? I don't see that or not understanding what you're seeing.

The 4th level flyout is not showing on top on 3rd level in your blog.
See if adding z-index to this fixes it.

/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;z-index:300;}

:ivar Nothing worked. I worked on it for hours. Trying to delete code from css/html and nothing worked. It always said I was missing some html closing code (not sure if it was /ul, /li or /a). Finally, today I had a thought - just delete the 4th level info from css and change html code from no pick for portraits & events to link to my site. It worked. I still have all html info for other portraits and events galleries, they're just not being "seen". I know it's a lot of excess that doesn't need to be there. But I give up and I'm ok with it!:ivar Thanks for all your help and patience Allen over the past week.

Hello Guys,

I am trying increase the length of my menus at my site. www.owuphotos.com I have included my code below. Any one able to help me out so I can extend the length the menu stays up would be great.
Thanks!!!

:scratch More main button? You'll have to be more specific. btw, no need to
post your code, those that can help can see it on your site.

Ok well if you go to my site. Hover over the gallery. Then go and hover over any of the second level gallery, usually I just look at animals. Finally when moving to the third level of the menu, it disappears to quickly. It can be difficult to click on one of the galleries. I am curious if there is a way to increase the time that the menu appears with out having to over over it. Looking over the CSS I think it is somewhere around the code menu ul li;hover ul li, but other then that I am not entirely sure :( I have played around with it, but have not been able to get my desired result.

Adjust the lefts is these two to get rid of the gap. 100px in the 1st one works for Firefox.
FF = Firefox
FO = flyout

Sweet!!! that did the trick. Thank you so much.:clap

Hi Allen,

I'm using a different drop down nav bar (that I copied from my blog template) but have run into a problem i can't fix. I've isolated the code that is causing the problem, but do not know how to change it. (website: http://eehyndman.smugmug.com blog: http://eehyndman.blogspot.com)

This part of the code:
.nav ul {
position:absolute;
top:-999em;
background-position: bottom;
background-repeat: no-repeat;
}
.nav li {
float:right;
position:relative;
}

It causes the smugmug buttons (style, share, upload, buy, etc) to not work in my galleries. Either when logged in, or when logged out. I get a text list of a few items, but not the whole menu. If I remove the code, my nav bar goes crazy.

[IMG]file:///C:/Users/Emily/AppData/Local/Temp/moz-screenshot.png[/IMG][IMG]file:///C:/Users/Emily/AppData/Local/Temp/moz-screenshot-1.png[/IMG]On an unrelated nav bar note, I can't seem to get rid of the "highlight" on Home on my nav bar, even when I move to another section. (About, Portfolio, Blog).

Thank you in advance!
Emily

Smugmug already uses the class name "nav" so will have to change
yours to something different in html and CSS. Like maybe "mynav" or
"navcontainer".

Thanks Allen, I changed it to "mynav" and it worked perfectly! :clap
Do you know why the "home" button on my navbar is always "on" (even if I'm on my "portfolio" page?

Thanks again!

Nope, sorry have no idea, maybe someone else will chime in.

I'm so excited that I'm in the home stretch of designing my website! This forum and all the customization stickies have been invaluable. But I've reached a point where I'm stuck/stumped. Most of my issues pertain primarily to the navbar, so I'm posting those question(s) here.

1. When I look at my page in FF or Chrome or Safari, everything appears as I intend it. However, when I check it in IE8, the spacing on the navbar seems to get a little wonky and the last item on the bar gets moved underneath the first item (the gaps between items is much wider in IE8 than the other browsers). I think it's the padding for each cell? It looks like things are generally displayed a bit larger in IE? But if I change the cell padding, it messes up how the bar appears in the other three browsers. How do I effect a change that will only apply to IE? Is this the way I should proceed, or is there another, more effective way to get the bar to be formatted correctly regardless of browser?

2. I'm not sure if this is even possible, but I'd like to change my hover behavior so that the top list item is overlined, and changes color when hovering over that item, however, when hovering over lower level items within the list, I'd like the overline to remain above the top level item, but the color of the top level to revert to the regular menu color. I guess what I'm going for is that only the item over which the cursor is actually hovering would change color. Is this possible? And if so, how do I do it? I've tried a variety of tweaks, but none of them give the effect I've described.

3. For some reason, if there is a space in the lower level words (for instance: "about me"), they are being put into two lines. At first I assumed this was due to column-width issues, but if I put a long single word as the title, there is no problem. I've poured through the CSS and can't find a reason for this. And what really confuses me is that I can use a two-word phrase on the top level.

Thank you in advance for any help/insight you can provide!

This will get you started. See if other browsers behave. Got the
overline but still looking at changing main color when hovering drops.
Think I highlighted changes in red, not sure if I got them all.

Thanks, Allen--those changes seem to have gotten the bar spaced better on IE8, and looks relatively un-changed on FF and Chrome. :clap
I love the "top-border" solution for the overline! :thumb Text-decoration wasn't working for me for some reason, and that gives the general look I'm going for. Would love to get the top level to change back to the red, but if that doesn't work, I'll just set it up to not change color at all on the top level, just the lower levels.

One additional thing, though: When I reduce the size of my browser window (regardless of browser I'm using), the navbar gets shifted below my banner. Aesthetically, it's not too bad, but it causes the drop down menu lists to fall into the slideshow pictures which I don't really like. Is there a way to link these two elements (banner and navbar) so that the navbar doesn't shift?

Thank you again for your help!!!:bow

If you don't want the nav popping below the banner when browser is
narrowed move the banner div below the nav in the header.

<!-- End Navbar Code -->
<div id="my_banner"> </div>

.. and remove the float: left; from this.

#my_banner {
width: 400px;
height: 216px;
margin: 10px 0px 0px 50px;
float:left;
background: url(http://www.apzphotography.com/photos...aiVz3-X3-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.apzphotography.com/photos/877194587_aiVz3-X3-O.png');
}

I've been slowly updating my site, mostly using the Easy Customization. I'm looking to replace the easy NavBar with the drop down listed in this thread. I copied your CSS and HTML into two different notepad documents, and changed the relative links to reflect what is on my pages. When that didn't work, I slowly changed bits and pieces to see if I could find where I went wrong, but to no avail. So I copied and pasted your exact code, and it still will not work. Here is what I am getting when I put in the HTML (this image is my links) and the CSS:

http://reicherstudios.smugmug.com/ph...85_bMyHB-L.jpg

Do I need to remove the easy Navbar for this to display properly? Tried in both FF and IE8.

Thank you in advance.

Thanks again for the suggestions, Allen. Okay, I made those changes, but now if the browser size is reduced, the navbar slides onto the banner. Is there a way that I can force these two elements to stay stationary relative to each other regardless of the size of the browser window?

Also, after doing some more IE8 testing (stupid, stupid buggy browser), I have discovered that the dropdown lists are not "clickable" from any page other than the home page. For example: I begin on the homepage and navigate to one of the pages from the navbar. Now when I hover over the navbar, the dropdown lists will display while hovering over the top level, but as soon as I move my cursor below the top level the lower levels disappear.

Thank you!!!!!

OK - this is my first :scratchpost, so bare with me. I used the info in this link:
http://dgrin.smugmug.com/gallery/1932803

and was able to upload my custom banner. However, when I did this, my Nav Bar now appears ABOVE the banner, in lieu of below the banner? This is the coding I used:

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://www.teewayne.com/Other/Backgr...84_MjQFq-O.jpg) no-repeat;
}
<div id="my_banner"> </div>


Can someone help me figure out what I did wrong?:dunno

Thanks

Hi Tee,

I'm definitely no expert, but I think you need to move the <div id="my_banner"> </div> so that it is above the <div id="customNavContainer">..........</div>.

Hope that helps!

thanks. When I look in the CSS input box, the code
<div id="my_banner"> </div>
is not there. It is in the Custom Header entry box.

Should I move it or copy it to the CSS box. Or move the CSS code to the Custom Header box?

Thanks again for replying so quickly!!

The <div id="my_banner"> </div> should be in the Custom Header entry box. When I look at the coding on your website, it looks like you have all the coding for the navbar entered in the Custom Header entry box before you have the statement: <div id="my_banner"> </div>. I *think* you should be able to just cut and paste <div id="my_banner"> </div> so that it is the first line in the Custom Header entry box.

I'm still muddling through all of this myself, but remember having a similar issue when I first got started!

Frustrated....
 

I've bee following along this thread and the old thread and some tutorials in an attempt to create a custom navbar for the site I'm trying to get off the ground.
I was able to find help when I got stuck but now I'm completely lost, so I replaced my work and started again.
Here's what I'm hitting my head into:

• I can't get the font style (mistral) and size to show in FF. It works in IE8 :bash.
• I can't figure out how to change the background colors to "none" without it conflicting with my slideshow images and making the flyouts collapse.
• When I try to reduce the space between the dropdowns and flyouts (transparent background, white letters) the text overlaps in FF but, again, it works fine in IE for me :deadhorse.

I'm trying to get a grip on this but it's giving me migraines having to keep starting over.

One more thing. How does one produce navbar buttons that look like SM's "upload", "tools", "buy", etc buttons, with the pleasant gradient, arrows, icons, and behavior? That's eventually what I'd like to have.

Thanks for any help you can provide.

www.chasgt-photography.com

I tried both ways - putting all of the code in the CSS section and then all of the code in the Custom Header. Neither worked, so for now, I put it back to the way I had it earlier. In the CSS section:

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://www.teewayne.com/Other/Backgr...84_MjQFq-O.jpg) no-repeat;
}
In the Custom Header
<div id="my_banner"> </div>

Sigh...

I figured out my font problem for FF. I screwed around with my fonts a while back to try to solve a problem with little black diamonds showing up where symbols should be....

At least I can stop chasing that particular tail now :scratch

Looks like your using the easy customizer for your navbar, and the advanced for your banner....the best thing to do is just use one or the other....but try this....it will get you to using the advanced editor for your navigation......




Change your custom header box to this:


Then change your CSS box to this:

Wow! That worked. Thank you SOOOO much. I am taking this step by step and learning as I go. :bow

May I ask you just a few more questions?

1. I want to make my Bio a link on my Nav Bar. I have read that you link to your bio like it is a single picture. How do I do that? Do I create a single jpg that has basically what I have in my Bio section? :scratch

2. Then, based upon your code, how do I add additional Nav Bar options?

Thanks again greatly!!:barb

You will need to create a gallery for your bio, then link that gallery to your navbar.

The simplest gallery for this purpose would be locked into the style Journal (Old), with a single photo and your bio text in the caption for that photo.

Another option is an HMTL-only gallery. See Allen's tutorial at http://allen-steve.smugmug.com/gallery/3819841.

--- Denise

Hey guys/gals. So I've copied and pasted the HTML and CSS code for the drop down menu and it works. What I'd like to do is customize it a bit more though, and tweak my page somewhat. Not really sure of where to start though, since the ideas I have are always changing. :scratch

The main thing(s) I want to change right now are:

1. Placing the drop down menu on the bottom instead of the top (or ON the exact bottom of the slideshow photo is fine)

2. I'd like there to be no background color on the menu items. I like transparency better. I only want a hover over color change (to the font directly) for each level and fly out menu. Or perhaps I might like a slight hover background, but something like semi transparent gradient, nothing obtrusive.

3. Since I'd like the menu to be on the bottom, I need the gallery lists and fly out items to drop UP, obviously.

4. As it stands the drop down menu is not centered. I may wind up changing the position all together (left side or right side, who knows) but I'd love to know if there's a simple way to change what side of the screen it's on (such as my request to move it to the bottom), and how I can tweak it even further by moving it a few pixels either to the left or right, whatever it need be to either suit my fancy or simply center it etc..


I'm sure to have more questions, but I'd like to start from there.

Cheers.

Doug

Edit: Here is an example of what I'm looking for: http://www.cssplay.co.uk/menus/cssplay-pullover.html

More Nav Bar craziness
 

Hey ya,

I am back. I am not being greedy and trying to hog very ones time, but I am trying to implement buttons into css. I know I can have images with css, but having trouble finding any guidance around smugmug to do this. Any tutorials out there you suggest for me to refrence when I am tinkering with my code? I believe the best method is just to <a href img="blah" > Button</span></a> and then I think the command for css is btn.(name of button) or something along those lines. I am researching google, looking for tutorials. So yes if you know any good tutorials that I can refrence, I would really appreciate it.

Thank you all!!!

I too, have another question. I thought that if I put the custom header code in the footer section that what I wanted would work, and in part, it has. But what has happened afterward, is that the "Smugmug Pro" header banner has managed to make its way to the top of every page as seen here:

http://dbphotographics.smugmug.com/p...4_TLoco-X3.jpg

I've checked the customizer and have made sure that the option which would enable such a thing is off, so I'm not sure of why it's appearing?

Also, I changed the font for my navbar menu to ' Helvetica Neue UltraLight' and although I realize that not every computer out there may have this font installed, I'm puzzled as to why the font appears normal in Opera but not in my Firefox browser ? (which is my default) I do my editing in FF but view the progress in Opera. Both are the latest version. (also see in screenshot)

And can someone please tell me which part of the CSS I have to tinker with in order to modify or delete the cell colors when I hover over the navbar menu items ?

Here's the code in my css and html if that helps:

To remove the SM Pro header add this to your CSS box:



First, to center your nav up change this value here:




Then to change the hover, adjust this value here:


Basically, anywhere you see this hook:

That affects a part of the hover in your menu

See if you can follow this tutorial, if you have any problems, start your own thread and someone here will help you get the hang of things:


http://allen-steve.smugmug.com/gallery/3819841



To add more links in your navbar, just add another line to your navbar html in your custom header box, for example, here I've added three more links to your nav-bar:



<div id="my_banner"> </div>
<div id="my-customHeaderContainer">
<div id="my-customNavContainer">
<ul id="my-customNav">
<li><a href="/">Home</a></li>
<li><a href="linkurl#">About</a></li>
<li><a href="linkurl#">Info</a></li>
<li><a href="linkurl#">Guestbook</a></li>
</ul>
</div>
</div>

OK - thanks. I can see the new item on my Nav Bar. And I have linked it to a picture. However, I thought that all I neded to do to add the text was to choose Journal (OLD) and add a comment on that linked picture, and the text would show up with the linked picture.

I know-I Know, my IQ is dropping my the minute.

Just got back from a 3 day birding trip, you still having a problem? Got a link to your site?