Originally Posted by Allen The 2nd info gallery is set to Smugmug style. Set it to journal (old) on the gallery settings page.

Hi Al,

Making a few changes to my navbar and come a little unstuck with a couple of things. The first one's probably a real simple fix but I just can't seem to figure it out: Somehow the last button on my main menu bar "Contact" has slipped down onto a second line, instead of where it used be situated at the end.

Second thing is: I needed to remove a menu in the Khao Kheow Open Zoo drop-down as well as a few flyouts, which seemed to work fine by simply working in the Custom Header panel; i.e. apparently no tweaks necessary in CSS.

I then wanted to change the title of the next menu along (which now reads "Infants & Young Animals" and no problems with that) and turn that from a <a href="#link" title=""> to a <a class="drop" href="#noclick" title=""> as I wish to make it a drop-down (possibly with some 1-stage flyouts as well) which I believe I did OK, but then realising I now need to amend the CSS I looked through all the code I had previously and I'm completely lost as to knowing what to do next.

Not sure if this helps you to help me with this, but here's the current HTML code I've changed:

<!-- 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 href="/" title="">Home</a></li>

<li class="navDot">&nbsp;•&nbsp;</li>
<li><a class="drop" href="" title="">Photo Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=”moveUL”>
<li><a class="drop" href="#noclick" title="">Birds
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Birds/Birds-Thailand-1/17365494_kHCMWX">Thailand</a></li>
<li><a href="/Birds/Birds-Malaysia/17349215_PNnfHn">Malaysia</a></li>
<li><a href="/Birds/Birds-South-Africa/19024720_gTHSjZ">South Africa</a></li>
<li><a href="/Birds/Birds-Madagascar/19179777_cZ2G7W">Madagascar</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#noclick" title="">Primates
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Animals/Primates-Thailand-1/17364378_gWVWg5">Thailand</a></li>
<li><a href="/Animals/Primates-Malaysia/17349321_N3MBK8">Malaysia</a></li>
<li><a href="/Animals/Primates-Madagascar/19180260_Grsf39">Madagascar</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/Animals/Felines-Predators/17349121_27H832" title="">Predators
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#link">Thailand</a></li>
<li><a href="#link">South Africa</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/Animals/Bears/17379134_L5QjQt" title="">Bears</a></li>
<li><a href="/Animals/Elephants/18369150_7FJPZz" title="">Elephants</a></li>
<li><a href="/Animals/Reptiles-1/17377609_ttjGfr" title="">Reptiles</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="navDot">&nbsp;•&nbsp;</li>
<li><a class="drop" href="#noclick" title="">Khao Kheow Open Zoo
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Zoos/Khao-Kheow-Open-Zoo/21336429_MNHPTS" title="">Introduction</a></li>
<li><a href="/Zoos/Animal-Welfare/21705018_WMRPXW" title="">Animal Welfare</a></li>
<li><a class="drop" href="#noclick" title="">Breeding Programmes</a></li>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#link">White-Handed Gibbon</a></li>
<li><a href="#link">Red-Shanked Douc Langur</a></li>
<li><a href="#link">White-Cheeked Gibbon</a></li>
<li><a href="#link">Siberian Tiger</a></li>
<li><a href="#link">Slender-Tailed Meerkat</a></li>
<li><a href="#link">Lion</a></li>
<li><a href="#link">Malayan Tapir</a></li>
<li><a href="#link">Clouded Leopard</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#noclick" title="">Special Attractions
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Zoos/es-ta-te/21731074_Vtb4K2">Es-ta-te Camping Resort</a></li>
<li><a href="#link">Flight of the Gibbons</a></li>
<li><a href="#link">Journey to the Jungle</a></li>
<li><a href="#link">African Savanna</a></li>
<li><a href="#link">After Dark</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#link" title="">Getting to Khao Kheow</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="navDot">&nbsp;•&nbsp;</li>
<li><a href="#link" title="">Infants & Young Animals</a></li>
<li class="navDot">&nbsp;•&nbsp;</li>
<li><a href="/gallery/17499170_p8SM9b" title="">About</a></li>
<li class="navDot">&nbsp;•&nbsp;</li>
<li><a href="/" onclick="return false;" class="customContactButton">Contact </a></li>
</ul>
</div> <!-- closes menu -->
<div style="clear: both;"></div>
<!-- End Navbar Code -->

Thanks in advance Al!

Originally Posted by Lemur Lover Hi Al, Making a few changes to my navbar and come a little unstuck with a couple of things. The first one's probably a real simple fix but I just can't seem to figure it out: Somehow the last button on my main menu bar "Contact" has slipped down onto a second line, instead of where it used be situated at the end. Second thing is: I needed to remove a menu in the Khao Kheow Open Zoo drop-down as well as a few flyouts, which seemed to work fine by simply working in the Custom Header panel; i.e. apparently no tweaks necessary in CSS. I then wanted to change the title of the next menu along (which now reads "Infants & Young Animals" and no problems with that) and turn that from a <a href="#link" title=""> to a <a class="drop" href="#noclick" title=""> as I wish to make it a drop-down (possibly with some 1-stage flyouts as well) which I believe I did OK, but then realising I now need to amend the CSS I looked through all the code I had previously and I'm completely lost as to knowing what to do next. Not sure if this helps you to help me with this, but here's the current HTML code I've changed: ... Thanks in advance Al!

It all looks fine to me. What's the problem?

Total width needs to be increased so all the main buttons fit on one line. 760PX works for Firefox.
It might need to be a few more pixels for IE.

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

Originally Posted by Allen The 2nd info gallery is set to Smugmug style. Set it to journal (old) on the gallery settings page.

Originally Posted by Allen It all looks fine to me. What's the problem? Total width needs to be increased so all the main buttons fit on one line. 760PX works for Firefox. It might need to be a few more pixels for IE. /* style the outer div to give it width */ .menu { z-index:99; position:relative; /* Make the container moveable */ margin: 0 auto 30px; /* top R/L bottom */ width:760px; /* Main bar total width, minimize to center and not wrap to two lines*/ }

Thanks for the fix on the first part Al, I get to that. Although I should perhaps say that before I changed some on my code in the Custom Header the "Contact" button fit right on the end. I'm also using a wide screen iMac and the original Easy Cusomizer navibar I've used until now, with a lot more menu buttons, also fits fine along just the one line.

Anyhow, as to part two, while the HTML I pasted into my last post above should indeed be correct, the issue I'm having is with amending the CSS code so that it brings the new drop-down into play under the "Infants & Young Animals" button. Here's how my current CSS code looks:

.navDot {
font-size: 15pt;
color: #3A6948;
line-height: 22px;
}

/* 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;
position:relative; /* Make the container moveable */
margin: 0 auto 30px; /* top R/L bottom */
width:700px; /* Main bar total width, minimize to not wrap to two lines*/
}

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

/* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {
float:left; /* float right will reverse the main buttons */
text-align:center;
width:auto;
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
text-decoration:none; /* none, overline, underline */
color:#3A6948;
background: rgba(22, 22, 22, .90);
/* border:1px solid black; */ /* optional */
/* border-width:1px 1px 1px 1px; */ /* optional */
font-size:11pt;
font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:20px; /* How tall your cells are */
line-height:20px; /* vertical text alignment in cell */
padding: 0 4px; /* top/bottom R/L */
min-width: 40px; /* set to smallest text and use R/L padding above to space out */
}

/* main hover */
.menu a:hover, .menu :hover > a {
color:#1AC96B;
background: rgba(22, 22, 22, .90);
}

/* 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 table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}



/* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */

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


/* 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:170px; /* Size of the daughter cells */
}

.menu ul .moveUL {left: -30px;} /* drop under Photo Galleries */

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

/* style the second level hover */
.menu ul ul a.drop:hover {background: rgba(22, 22, 22, .90);}
.menu ul ul :hover > a.drop {background: rgba(22, 22, 22, .90);}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#3A6948;
background: rgba(22, 22, 22, .90);
height:auto;
line-height:20px;
width:170px;
}

.menu ul ul :hover > a.drop {background: rgba(22, 22, 22, .90);} /* 2nd if 3rd level exists */

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

/* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
color:#1AC96B;
background: rgba(22, 22, 22, .90);
}



/* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */

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

.menu ul ul ul li a {color:#3A6948;}
.menu ul ul ul li a:hover {color:#1AC96B;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background: rgba(22, 22, 22, .90);} /* not FF */

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

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:#3A6948; /* hover 2nd > 3rd & 4th */
background: rgba(22, 22, 22, .90); /* hover 3rd > 4th */
height:20px;
line-height:20px;
width:200px;
text-align: left;
}


/* ***** LEVEL 4 ***** LEVEL 4 ***** LEVEL 4 ***** */

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

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

/* style the fourth level hover */
.menu ul ul ul ul a:hover {background: rgba(22, 22, 22, .90);}
.menu ul ul ul ul :hover > a {background: rgba(22, 22, 22, .90);}


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

/* End Navbar Code */

Originally Posted by Lemur Lover Thanks for the fix on the first part Al, I get to that. Although I should perhaps say that before I changed some on my code in the Custom Header the "Contact" button fit right on the end. I'm also using a wide screen iMac and the original Easy Cusomizer navibar I've used until now, with a lot more menu buttons, also fits fine along just the one line. Anyhow, as to part two, while the HTML I pasted into my last post above should indeed be correct, the issue I'm having is with amending the CSS code so that it brings the new drop-down into play under the "Infants & Young Animals" button. Here's how my current CSS code looks: ...

No need to post code, those that can help see it on your site with web tools.

Replace this line one line in your header

<li><a href="#link" title="">Infants &amp; Young Animals</a></li>

with this

<li><a class="drop" href="#link" title="">Infants &amp; Young Animals
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul> 
        <li><a href="#link">Future Use</a></li>  
        <li><a href="#link">Future Use</a></li>
        <li><a href="#link">Future Use</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

hey allen, would this tutorial work for my site and the navbar i have at the bottom of my page?

Originally Posted by dondada hey allen, would this tutorial work for my site and the navbar i have at the bottom of my page?

Not sure, it would probably take quite a bit of work adapting it.

Originally Posted by Allen Not sure, it would probably take quite a bit of work adapting it.

where should i start other than from scratch?

Originally Posted by dondada where should i start other than from scratch?

Starting from scratch and working with WebDev I inserted new nav html between the red.

<div id="phoenix-footer" align="center">

<div class="menu">
<ul>
<li><a href="/"> Home </a></li>
<li><a href="/gallery/"> Portfolio
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="#link" title="">Drop 1 Lvl 2</a></li>
        <li><a href="#link" title="">Drop 2 Lvl 2</a></li> 
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/"> Blog </a></li>
<li><a href="/Clients"> Clients </a></li>
<li><a href="/Other/Contact/22375611_V9DhsJ/"> About / Contact </a></li>
</ul>
</div>


<div id="phoenix-nav">
...

Added this CSS. Also for this experiment I temporary increased the footer height to 200px so both navs would be visible.

/* 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 {
   float:left;
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 20px;  /* top R/L bottom */
   width:900px;          /* Main bar total width, minimize to not wrap to two lines*/
}

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

      /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {
   float:left;          /* float right will reverse the main buttons */
   text-align:center;
   width:auto; 
   position:relative;
   padding: 0;
}

      /* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   text-decoration:none;  /* none, overline, underline */
   color:white;
   background:rgba(255, 255, 255, .0001);
   font-family:'Shadows Into Light',  'Century Gothic', Tahoma, sans-serif;
   font-size:22px;
   width:auto;         /* Defines the main box dimensions. */
   height:20px;        /* How tall your cells are */
   line-height:20px;   /* vertical text alignment in cell */ 
   padding: 0 29px;    /* top/bottom R/L */
   min-width: 60px;    /* set to smallest text and use R/L padding above to space out */
}

      /* main hover */
.menu a:hover, .menu :hover > a {
   color:black;
   background:rgba(255, 255, 255, .0001);
}

      /* 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 table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}



      /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */

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


      /* 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:-50px;       /* move drop vertically */
   left:0;         /* move drop horizontally   */
   width:120px;    /* Size of the daughter cells */
}

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

      /* style the second level hover */
.menu ul ul a.drop:hover {background:rgba(255, 255, 255, .0001);}
.menu ul ul :hover > a.drop {background:rgba(255, 255, 255, .0001);}

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:rgba(255, 255, 255, .0001);
   height:20px; 
   line-height:20px; 
   width:120px;
   text-align:left;
}

.menu ul ul :hover > a.drop  {background:rgba(255, 255, 255, .0001);}   /* 2nd if 3rd level exists */

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

      /* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
   color:#5B7181;
   background:rgba(255, 255, 255, .0001);
}

      /* make the 2nd level visible when hover on 1st level */
.menu ul :hover ul {visibility:visible;}

/* End Navbar Code */

In this screen shot the new nav is above your current nav and the mouse is hovering on Portfolio showing the drop ... err rise.

Originally Posted by dondada where should i start other than from scratch?

See this thread for your question about putting it at the top.
http://www.dgrin.com/showthread.php?t=218653

Hello,

I've discovered that part of my menu doesn't work on an iPhone. What have I done wrong?

Please, does anyone know why Images at www.patrikwinge.com doesn't work?

Thanks,

Patrik

Originally Posted by Patrik Hello, I've discovered that part of my menu doesn't work on an iPhone. What have I done wrong? Please, does anyone know why Images at www.patrikwinge.com doesn't work? Thanks, Patrik

About the only thing I can suggest is try the CSS in the first post.

Thank's Allen. That's the code I've been using. It works on my computer, but not on iPhone. I can't see what's wrong.

Hi, I've managed to get so far following your instructions. However, I want my navibar to look like the one i created using the easy customiser with the drop-down bit appearing when you hover over the main title. How do I do this? I'm a novice when it comes to HTML. Can you help?

Originally Posted by jacqsallott Hi, I've managed to get so far following your instructions. However, I want my navibar to look like the one i created using the easy customiser with the drop-down bit appearing when you hover over the main title. How do I do this? I'm a novice when it comes to HTML. Can you help?

Got a link to your site?

Hi there...I hope I am posting this correctly. I have read the thread until I can barely see over the last week, and probably missed where this was addressed, if it is even possible.

I like my regular nav bar and I am looking to just add the coding to make it a drop nav bar. Is there a simple way to do this without starting from scratch? I have figured out how to add the drop links, but cannot seem to figure out what to add to my existing CSS to change it from the regular navbar that I got right here on DGrin to a drop down. Or is that even possible?

If it helps, here is my current CSS for the simple nav bar, from Ivar's simple nav bar tutorial:


#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: #9e9e9e;
background-color: transparent;
font-family: 'Handlee', cursive; courier, tahoma, helvetica, georgia, Handwriting-Dakota, chalkboard, myriad pro, Comic Sans MS, tahoma, arial, sans-serif;
font-size: 12pt;
}

#navcontainer ul li a:hover {
color: #ba517d;
background-color: TRANSPARENT;
}

Thanks Allen for a great tutorial, was stuck on it for days but found your easy walkthrough http://www.digitalgrin.com/showthrea...168571&page=95
Anyways my drop down Nav menu is pretty much complete- its pretty basic. I have a few problems.
1. how do I put dividers in-between the different menus?
2. When trying out my flashy new drop down nav menu in safari (there maybe other problem browsers I dont know) I get problems when moving over to my flyout... the background colour is white and so is the text- you just see white until i scroll over it it turns red. When viewing on firefox there is no problems the text is black and highlights red.
I hope this isnt too confusing as its early morning here and ive been trying to get this menu sorted for agggges!

here is a link to my site. http://lukekarmali.smugmug.com/ http://lukekarmali.smugmug.com/

Originally Posted by LUKEK Thanks Allen for a great tutorial, was stuck on it for days but found your easy walkthrough http://www.digitalgrin.com/showthrea...168571&page=95 Anyways my drop down Nav menu is pretty much complete- its pretty basic. I have a few problems. 1. how do I put dividers in-between the different menus? ... here is a link to my site. http://lukekarmali.smugmug.com/ http://lukekarmali.smugmug.com/

Try this, assuming you mean the drop and flyout.

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:black;
   background:white;
   height:auto; 
   line-height:20px; 
   width:150px;
   border: 1px solid red;
   border-width:1px 0 0 0;
}

Originally Posted by LUKEK 2. When trying out my flashy new drop down nav menu in safari (there maybe other problem browsers I dont know) I get problems when moving over to my flyout... the background colour is white and so is the text- you just see white until i scroll over it it turns red. When viewing on firefox there is no problems the text is black and highlights red.

This will make the flyout colors same as the drop.

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

Originally Posted by LUKEK ...

Remove the red or exta < at the top of your header html.

&lt;
<div class="menu">


Add the red to the end.

<li><a href="/" onclick="return false;" class="customContactButton">Contact Me</a>
</li></ul>
</div>
<div style="clear: both;"></div>

Or replace the whole header with this. Cleaned up some links and switched to relative links.

<div class="menu">
<ul>
   <li><a href="/">Homepage</a></li>
   <li><a href="/Photography">All Photography</a></li>
   <li><a class="drop" href="#noclick">Galleries
        <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href="/gallery/22420395_XjDVDF">South East Asia</a></li>
            <li><a class="drop" href="#noclick">India
                <!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                    <li><a href="/gallery/22411462_Msm6jK">People &amp; Places</a></li>
                    <li><a href="/gallery/22697299_6GS237">Temples,Mosques &amp; Places of Interest</a></li>
                    <li><a href="/gallery/22696945_XMr5Xz">Ladakh</a></li>
                    <li><a href="/gallery/22696784_pmfRPZ">India's Fishermen</a></li>
                    <li><a href="/gallery/22420447_Zk2qXn">Dhobi Wallahs</a></li>
                </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="/gallery/22420382_pGcDxM">Nepal</a></li>
            <li><a href="/gallery/22420427_FcxfJG">Landscapes Dorset &amp; NZ</a></li>
            <li><a href="/gallery/22696907_nRtpTN">Other</a></li>
            <li><a href="Other1">Corporate Work </a></li>
        </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="https://vimeo.com/karmali/videos">Video</a></li>
   <li><a href="/gallery/22438380_NrKPPf">Info</a></li>
   <li><a href="/gallery/22738723_hG4g9B">Guestbook</a></li>
   <li><a href="/" onclick="return false;" class="customContactButton">Contact Me</a></li>
</ul>
</div>
<div style="clear: both;"></div>

Originally Posted by LUKEK ...

Check your galleries, some are not showing your customizations. Make sure for each the under "gallery
settings" that "custom" is checked for appearance and "hide owner" is not checked.