Originally Posted by rokzmom Thanks, Allen--those changes seem to have gotten the bar spaced better on IE8, and looks relatively un-changed on FF and Chrome. I love the "top-border" solution for the overline! 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!!!

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:progidXImageTransform.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:



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

Thank you in advance.

Originally Posted by Allen 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:progidXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.apzphotography.com/photos/877194587_aiVz3-X3-O.png'); }

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 post, 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?

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!

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 .
• 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 .

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

Originally Posted by rokzmom 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!

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>

Originally Posted by grounded .......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 .......

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

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:

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:

</div><div id="my_banner"> </div>
<div id="my-customHeaderContainer">
<div id="my-customNavContainer">
<ul id="my-customNav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>

Then change your CSS box to this:

#my_banner 
{width: 750px;height: 150px;margin: 0 auto;
background: url(http://www.teewayne.com/Other/Background-pics/TeeWayneSmugmugLogo/903592584_MjQFq-O.jpg) no-repeat;}

#customHeaderContainer {display:none}

#my-customHeaderContainer 
{padding-top: 10px; margin: 0 auto; 
padding-left: 15px; padding-right: 15px; 
overflow: hidden !important; 
height: 20px; width: 750px;}

#my-customNavContainer {text-align:center}

#my-customNav 
{font-family: arial !important; 
font-size: 14px; color: #ffffff !important; 
list-style-type: none; padding:0;margin:0}

#my-customNav li{display:inline}

#my-customNav li a, 
#my-customNav li a:active, 
#my-customNav li a:visited, 
#my-customNav li a:link 
{font-family: arial !important; 
font-size: 14px; color: #ffffff !important; 
text-decoration: none !important}

#my-customNav li a:hover 
{font-family: arial !important;
font-size:14px;color:#3C1FCD !important;
text-decoration: none !important}

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

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?

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

Thanks again greatly!!

Originally Posted by TeeWayne 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?

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.

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

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:



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:

.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}

.galleries #bioBox {
display: none;
}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}

.galleries #slideshowBox {display: none;} 

#categoriesBox .boxTop { display: none; }
.loggedIn #categoriesBox {display: block;} 


#filmstrip #photos {display:none;}

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

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

      /* remove all the bullets, borders and padding from the default list styling */
.menu ul {
   padding:0;
   margin:0;
   list-style-type:none;
}

.menu ul ul {
   width:130px; 
}

      /* float the list to make it horizontal and a relative positon so that you can control the dropdown 

menu positon */
.menu li {
   float:left;
   text-align:center;
   width:auto; 
   position:relative;
   padding: 0;
}

      /* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   font-size:16pt;
   text-decoration:none; 
   color:black;
   background:none;
  border:none; 
  border-width:1px 1px 1px 1px; 
   font-family: Helvetica Neue UltraLight;
   width:auto;            /* Defines the main box dimensions. */
   height:25px;           /*How tall your cells are */
   line-height:25px;      /*Adjust this to vertically center your text in each cell. Should be about the 

same as height. */
   padding: 0 10px;
   min-width: 100px;
}

      /* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
    {width:130px; w\idth:130px;}

      /* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:yellow;}  /* if 3rd level exists */

      /* style the second level hover */
.menu ul ul a.drop:hover {background:red;}
.menu ul ul :hover > a.drop {background:red;}

      /* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:purple;}  /* not FF */

      /* style the third level hover */
.menu ul ul ul a:hover {background:yellow;}
.menu ul ul ul :hover > a {background:yellow;}     /* 3rd (w/o 4th) 4th hover */

      /* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
   visibility:hidden;
   position:absolute;
   height:0;
   top:25px;
   left:0; 
   width:130px;  /* Size of the daughter cells */
}

      /* another hack for IE5.5 */
* html .menu ul ul 
   {top:20px; t\op:21px;}   /* IE gap between main bar and the dropdown items */

      /* position the third level flyout menu */
.menu ul ul ul {
   left:120px; 
   top:0;
   width:160px;
   height:auto;
}

.menu ul ul ul li a {
   color:plain gray;
}

.menu ul ul ul li a:hover {
   color:plain gray;
}

      /* position the fourth level flyout menu */
.menu ul ul ul ul {
   left:130px; 
   top:0;
   width:130px;
   height: auto !important;
}

     /* 4th level non-hover */
.menu ul ul ul ul li a {
   color:plain gray;
   width:150px;
}

      /* style the table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:red;
   background:green;
   height:25px; 
   line-height:25px; 
   width:100px;
}

.menu ul ul :hover > a.drop  {background:purple;}   /* 2nd if 3rd level exists */

      /* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
   color:pink;              /* hover 2nd > 3rd & 4th */
   background:orange;        /* hover 3rd > 4th */
   height:25px; 
   line-height:25px; 
   width:110px;
}

      /* yet another hack for IE5.5 */
* html .menu ul ul a 
   {width:120px; w\idth:120px;}

      /* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
   color:purple;
   background:pink;
}

      /* main hover */
.menu :hover > a, .menu ul ul :hover > a {
   color:white;
   background:blue;
}

      /* make the 2nd level visible when hover on 1st level list OR link */
.menu ul :hover ul {visibility:visible;}
      /* keep the 3rd level hidden when you hover on 1st level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
      /* keep the 4th level hidden when you hover on 2nd level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
      /* make the 3rd level visible when you hover over 2nd level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
      /* make the 4th level visible when you hover over 3rd level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

<div><!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->

<div class="menu">
<ul>


<li><a class="drop" href="http://dbphotographics.smugmug.com/People" title="">people   <!-- no </a></li> on drop lines -->
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="http://dbphotographics.smugmug.com/People/Edit/12584752_g5cMY" title="">family</a></li>
        <li><a href="http://dbphotographics.smugmug.com/People/candids/12593325_MP9s3#904503200_cGfKy" title="">streetstyle</a></li> 
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="http://dbphotographics.smugmug.com/Places" title="">places
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul> 
        <li><a href="http://dbphotographics.smugmug.com/Places" title="">Europe</a></li>

        <li><a class="drop" href="#link" title="">Drop 2 
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
          <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul>
                        <li><a href="#link">Flyout 1 Lvl 4</a></li>
                        <li><a href="#link">Flyout 2 Lvl 4</a></li>
                    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>

            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>

    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="http://dbphotographics.smugmug.com/Things" title="">things</a></li>

<li><a href="#link" title="">INFO</a></li>

</ul>
</div>  <!-- closes menu -->
<!-- End Navbar Code --></div>

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.

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

/*==== Tighten Homepage ====*/
#header_wrapper, 
.homepage #breadcrumb 
{display:none;}
#userBio {padding:0;}
#homepage {padding-top:0;}

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 ?

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

.menu {
   z-index:99;
   margin: 0 auto 20px;  /* top R/L bottom */
   position:relative;    /* Make the container moveable */
   width:500px;          /* Main bar total width, minimize to center */
}

Then to change the hover, adjust this value here:

/* style the second level hover */
.menu ul ul a.drop:hover {background:red;}
.menu ul ul :hover > a.drop {background:red;}


 /* style the third level hover */
.menu ul ul ul a:hover {background:yellow;}
.menu ul ul ul :hover > a {background:yellow;}     /* 3rd (w/o 4th) 4th hover */


.menu ul ul ul li a:hover {
   color:plain gray;
}




.menu ul ul :hover > a.drop  {background:purple;}   /* 2nd if 3rd level exists */

/* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
   color:purple;
   background:pink;
}

      /* main hover */
.menu :hover > a, .menu ul ul :hover > a {
   color:white;
   background:blue;
}

Basically, anywhere you see this hook:

:hover

That affects a part of the hover in your menu

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?

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

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

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>

Originally Posted by J Allen 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.

Originally Posted by deveraux 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: Do I need to remove the easy Navbar for this to display properly? Tried in both FF and IE8. Thank you in advance.

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