Originally Posted by chandswu I'm guessing this has already been covered somewhere, but I can't find it. I added the drop down navbar code for my site and the menus are working great. Except. When the drop down hits a photo or other element on the page, the menu is pushed behind the other element. i.e. you can't see the parts of the menu that are in the same place as the photo. You can see it here: http://www.bradkehrphotography.com/ with the Portfolio tab. There should be three more drop down elements in that menu. How do I get them be seen? Thanks. (I've seen this happen on Chrome and IE Explorer. I don't know about Firefox and Safari.)

Nevermind, I think I got it. Had to do with z-index values on the slideshow overriding the navbar.

Having some trouble with centering the nav bar. Just started working with this drop down nav bar.
Any info on how to center would be great. I have tried several things, but no luck.

Mike

Originally Posted by Couldbe Having some trouble with centering the nav bar. Just started working with this drop down nav bar. Any info on how to center would be great. I have tried several things, but no luck. Mike

The auto R/L margin centers the width, 200 is close for now until you add more buttons.

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

Originally Posted by Allen The auto R/L margin centers the width, 200 is close for now until you add more buttons. /* style the outer div to give it width */ .menu { z-index:99; position:relative; /* Make the container moveable */ margin: 0 auto 20px; /* top R/L bottom */ width:200px; /* Main bar total width, minimize to not wrap to two lines*/ }

Will adjust accordingly as I add more buttons. . Thanks for your help. You make it look so easy!!
Mike

Hello,
I tried to add two additional category headings and they appeared on two staggered lines below the original menu.
Can someone please show me how to adjust my settings to allow them to be on the same line as the others.

Design Note: I am fine with raising the logo (can make it smaller) so the menu categories run under the logo.

Originally Posted by Paris Hello, I tried to add two additional category headings and they appeared on two staggered lines below the original menu. Can someone please show me how to adjust my settings to allow them to be on the same line as the others. Design Note: I am fine with raising the logo (can make it smaller) so the menu categories run under the logo.

See if this fixes it.

Replace your whole header with this. Fixes a bunch of errors.

<div id="my_banner"></div>
<div class="menu">
<ul>
<li><a href="/" title="">HOME</a></li>
<li><a href="/NEW-UNTITLED-PROJECT/21027034_GXm3x">PORTRAIT PROJECT</a></li>
<li><a href="/PORTRAITS/14638527_Qmgpv3">STUDIO PORTRAITS</a></li>
<li><a href="/INTERESTINGPEOPLE/15182219_MPdDdJ">INTERESTING PEOPLE</a></li>
<li><a href="/LANDSCAPE/15313653_d8bRMC">PLACES</a></li>
<li><a href="/OUTSIDE THE BOX/21163068_r4Rhs9">OUTSIDE THE BOX</a></li>
<li><a href="/gallery/15352911_xiEMU">CONTACT ME</a></li>
</ul>
</div>  <!-- closes menu -->
<!-- End Navbar Code -->
<div style="clear: both;"></div>

Change the red in your CSS

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

Originally Posted by Allen See if this fixes it. Replace your whole header with this. Fixes a bunch of errors. <div id="my_banner"></div> <div class="menu"> <ul> <li><a href="/" title="">HOME</a></li> <li><a href="/NEW-UNTITLED-PROJECT/21027034_GXm3x">PORTRAIT PROJECT</a></li> <li><a href="/PORTRAITS/14638527_Qmgpv3">STUDIO PORTRAITS</a></li> <li><a href="/INTERESTINGPEOPLE/15182219_MPdDdJ">INTERESTING PEOPLE</a></li> <li><a href="/LANDSCAPE/15313653_d8bRMC">PLACES</a></li> <li><a href="/OUTSIDE THE BOX/21163068_r4Rhs9">OUTSIDE THE BOX</a></li> <li><a href="/gallery/15352911_xiEMU">CONTACT ME</a></li> </ul> </div> <!-- closes menu --> <!-- End Navbar Code --> <div style="clear: both;"></div> Change the red in your CSS /* style the outer div to give it width */ .menu { left: 150px; top: -10px; z-index:99; margin: 0 auto 20px; /* top R/L bottom */ position:relative; /* Make the container moveable */ width: 900px; /* Main bar total width, minimize to center */ }

Fixed and great - thanks!

Dear Allen or anyone,

After a whole day I can't see where I'm going wrong. I've deleted and started twice, still no joy.

I think there is a bit of code I need for the drops and eventually the flyouts to go over the bio slideshow and go underneath each other.
Also, where on earth do I change the code to center the navbar?

I'm @ www.grahamgarner.co

Manythanks

G

Originally Posted by GrahamGarner Dear Allen or anyone, After a whole day I can't see where I'm going wrong. I've deleted and started twice, still no joy. I think there is a bit of code I need for the drops and eventually the flyouts to go over the bio slideshow and go underneath each other. Also, where on earth do I change the code to center the navbar? I'm @ www.grahamgarner.co Manythanks G

Add the missing closing } and if it all works.

.menu a:hover, .menu :hover > a {
  color:white;
  background:black;
}
     /* a hack so that IE5.5 faulty box model is corrected */

Hi Allen

Many thanks for putting me right.

I'm not sure what I'm doing wrong in the this part of the code? It works in IE, when the cursor lands on the 3rd tier and goes pink but, for Firefox and safari I think it's defaulting to black?

This is the code in level 3
}

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

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

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

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

Also, (if possible) is there a bit of code to make the wording in level 2 justify left in line with the nav wording? the boxes are fine.
ie the nav line
Exhibitions and Commissions
Exhibitions (the 2nd tier)

I hope you have time to have a look, thank you for your time so far

G

Originally Posted by GrahamGarner Hi Allen Many thanks for putting me right. I'm not sure what I'm doing wrong in the this part of the code? It works in IE, when the cursor lands on the 3rd tier and goes pink but, for Firefox and safari I think it's defaulting to black? This is the code in level 3 } .menu ul ul ul li a {color:gray;} .menu ul ul ul li a:hover {color:black;} /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited {background:yellow;} /* not FF */ /* style the third level hover */ .menu ul ul ul a:hover {background:red;} .menu ul ul ul :hover > a {background:pink;} /* 3rd (w/o 4th) 4th hover */ /* style the third level links */ .menu ul ul ul a, .menu ul ul ul a:visited { color:gray; /* hover 2nd > 3rd & 4th */ background:black; /* hover 3rd > 4th */ height:20px; line-height:20px; width:150px; } Also, (if possible) is there a bit of code to make the wording in level 2 justify left in line with the nav wording? the boxes are fine. ie the nav line Exhibitions and Commissions Exhibitions (the 2nd tier) I hope you have time to have a look, thank you for your time so far G

Try these changes and we'll go from there. BTW, the main width needs to be increased so it doesn't
wrap to two lines.

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

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:black;
   height:20px; 
   line-height:20px; 
   width:150px;
   text-align:left;
}

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

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

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

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

Originally Posted by Allen Try these changes and we'll go from there. BTW, the main width needs to be increased so it doesn't wrap to two lines. .menu { z-index:99; position:relative; /* Make the container moveable */ margin: 0 auto 20px; /* top R/L bottom */ width:1050px; /* Main bar total width, minimize to not wrap to two lines*/ } /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color:white; background:black; height:20px; line-height:20px; width:150px; text-align:left; } /* position the third level flyout menu */ .menu ul ul ul { left:170px; top:0; width:150px; height:auto; } .menu ul ul ul li a {color:white;} .menu ul ul ul li a:hover {color:white} /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited {background:black;} /* not FF */ /* style the third level hover */ .menu ul ul ul a:hover {background:gray;} .menu ul ul ul :hover > a {background:gray;} /* 3rd (w/o 4th) 4th hover */

Hi Allen

Many thanks for the code.

What I would like the colors to be when you
hover on Exhibitions the 3rd level will appear Background Black and Wording colour grey
When you hover on the 3rd tier ie Blackall Studios background goes grey and the wording black.

At present Safari is

background black wording grey (which is fine) on the 3rd tier Black, white

On Firefox & IE

Black, white then grey, white

Any ideas?

Lastly, is there a part of your code some where which changes the width of the drop boxes? I want them to be the same size but, as large as the longest word plus a little padding on the right the same as now on the left.

I hope this makes sense?

Many thanks

Originally Posted by GrahamGarner Hi Allen Many thanks for the code. What I would like the colors to be when you hover on Exhibitions the 3rd level will appear Background Black and Wording colour grey When you hover on the 3rd tier ie Blackall Studios background goes grey and the wording black. At present Safari is background black wording grey (which is fine) on the 3rd tier Black, white On Firefox & IE Black, white then grey, white Any ideas? Lastly, is there a part of your code some where which changes the width of the drop boxes? I want them to be the same size but, as large as the longest word plus a little padding on the right the same as now on the left. I hope this makes sense? Many thanks

This will give visitors the slight indication of main button hover.

.menu a:hover, .menu :hover > a {
  color:#888;
  background:white;
}

This will set the width of the drop boxes. Keep each the same. In the 2nd rule below if you change the height to "auto" the text will wrap to two lines if the width is too small for its text. All the drops will be the width set here. The longest word/name is under the Client Galleries drop.

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

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:black;
   height:20px; 
   line-height:20px; 
   width:150px;
   text-align:left;
}

If you want the drops for the different mains to be a different widths, that can be done but would
require adding class names to the <ul> in the html so the CSS could format each.

When adjusting the drop width the next level has to be moved over to touch the new drop width.

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

Clean up about page. Add to CSS

.gallery_24557930 .slideshowButton,
.gallery_24557930 #albumNav_bottom,
.gallery_24557930 #albumNav_top {display:none;}

Allen,
I have tried multiple suggestions from the posts above to center the new drop down nav bar (trying to tweak it to the center and up and to make it quit hiding behind the photos). I think I have some extra code in there preventing me from achieving my goal.... I almost got it.
Is there a way to embed it into my banner? What I really want to do is replace the bottom portion of my banner with the navigation bar (the engagements-weddings-blablabla portion) with something functional.

Here is the site... http://www.garrywilliamsphotography.com/

Originally Posted by Allen This will give visitors the slight indication of main button hover. .menu a:hover, .menu :hover > a { color:#888; background:white; } This will set the width of the drop boxes. Keep each the same. In the 2nd rule below if you change the height to "auto" the text will wrap to two lines if the width is too small for its text. All the drops will be the width set here. The longest word/name is under the Client Galleries drop. /* hide the sub levels and give them a position absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; height:0; top:20px; /* move drop vertically */ left:0; /* move drop horizontally */ width:150px; /* Size of the daughter cells */ } /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color:white; background:black; height:20px; line-height:20px; width:150px; text-align:left; } If you want the drops for the different mains to be a different widths, that can be done but would require adding class names to the <ul> in the html so the CSS could format each. When adjusting the drop width the next level has to be moved over to touch the new drop width. /* position the third level flyout menu */ .menu ul ul ul { left:170px; top:0; width:150px; height:auto; } Clean up about page. Add to CSS .gallery_24557930 .slideshowButton, .gallery_24557930 #albumNav_bottom, .gallery_24557930 #albumNav_top {display:none;}

Many thanks Allen it appears to be playing ball

Originally Posted by twors Allen, I have tried multiple suggestions from the posts above to center the new drop down nav bar (trying to tweak it to the center and up and to make it quit hiding behind the photos). I think I have some extra code in there preventing me from achieving my goal.... I almost got it. Is there a way to embed it into my banner? What I really want to do is replace the bottom portion of my banner with the navigation bar (the engagements-weddings-blablabla portion) with something functional. Here is the site... http://www.garrywilliamsphotography.com/

Fix the CSS comment tags and the menu will center. Then come back and ask the questions about what you still want.

/************........***************************/

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */

Originally Posted by Allen Fix the CSS comment tags and the menu will center. Then come back and ask the questions about what you still want. /************........***************************/ /* CSS Dropdown Nav Bar */ /* Original code by Stu Nicholls of */

4+ hours... for a slash..... Thank You, you are a true hero!

To continue...
1. Is there a way to embed my Navbar into my banner? I want to replace the bottom portion of my banner with the navigation bar (the engagements-weddings-blablabla portion out--navbar in.... ((I have already removed the blablabla... in a new banner located here; http://www.garrywilliamsphotography....-46K74Bj-L.png)) I Ultimately I would like to be able to move the banner and Nav bar as a unit should I decide it is necessary.

2. I would like to do a cleanup of all my code. I plan to migrate the current slide show to jfriends stretchy slideshow and load a splash image and want to start with just what I need in case that goes south. Could you please look it over and tell me what code is not needed and can be removed?

3. Lastly. and honestly I haven't done any searches yet, but I need to put some documents in the "INFO" nav drop downs-- Artist statement- artist bio and guarantee. Is it possible to put word or pdf documents on my site. I dont remember seeing any on others' sites.

Thanks again!!!

To continue... 1. Some people using IE7 or IE8 are having difficulties navigating to the northern lights and below under "galleries", and pets and below under "Clients". The menu disappears, did I miss a fix for this? Firefox and safari seem to work fine. ... Thanks again!!!

Allen- Anybody???

To continue... 1. Some people using IE7 or IE8 are having difficulties navigating to the northern lights and below under "galleries", and pets and below under "Clients". The menu disappears, did I miss a fix for this? Firefox and safari seem to work fine. ... Thanks again!!!

Originally Posted by twors Allen- Anybody???

This might be the problem as with no .menu background the mouse is sometimes lost when slid down.

Some browsers do not like a background set to "none". Go down through the .menu CSS and change
all the backgrounds to this. It applies a very transparent background that's not visible.

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

Originally Posted by Allen This might be the problem as with no .menu background the mouse is sometimes lost when slid down. Some browsers do not like a background set to "none". Go down through the .menu CSS and change all the backgrounds to this. It applies a very transparent background that's not visible. background: rgba(255, 255, 255, .0001);

Thanks Allen I will give that a try.