Does anyone know if we can make custom drop navbars?

ko04 · August 10, 2013

I'm curious has anyone figured out how to make a custom drop down navbar. I am curious because currently I like my nav bar and would really like to keep it (see it here www.k-ophotography.com). I figured out how to add it using a HTML and CSS box but it doesn't intergrad at all with the new SM. I'm thinking maybe if I added it then did a login only for my main navbar but that seems kind of a round about way to do this. In the old Sm Allen had a very good tutorial for this so I'm wondering if there is going to be the same thing for the new or is just not possible now I don't know. Anyways thanks for any info

Ko

Allen · August 11, 2013

ko04 wrote: »

I'm curious has anyone figured out how to make a custom drop down navbar. I am curious because currently I like my nav bar and would really like to keep it (see it here www.k-ophotography.com). I figured out how to add it using a HTML and CSS box but it doesn't intergrad at all with the new SM. I'm thinking maybe if I added it then did a login only for my main navbar but that seems kind of a round about way to do this. In the old Sm Allen had a very good tutorial for this so I'm wondering if there is going to be the same thing for the new or is just not possible now I don't know. Anyways thanks for any info

Ko

Just did a quick test. Added html box to "just this page" and pasted in the two tabs of the box the
html and CSS from the first post of the dropdown thread. I clean up the html some. CSS no change
except for main menu width. Have no idea what different browsers will do with it , FF here.

<div class="menu">
<ul>

<li><a href="/" title="">Home</a></li>

<li><a class="drop" href="#link" title="">Main 2</a>
    <ul>
        <li><a href="#link" title="">Drop 1 Lvl 2</a></li>
        <li><a href="#link" title="">Drop 2 Lvl 2</a></li> 
    </ul>
</li>

<li><a class="drop" href="#link" title="">Main 3</a>
    <ul> 
        <li><a href="#link" title="">Drop 1 Lvl 2</a></li>

        <li><a class="drop" href="#link" title="">Drop 2 Lvl 2</a>
            <ul>
                <li><a href="#link">Flyout 1 Lvl 3</a></li>
                <li><a href="#link">Flyout 2 Lvl 3</a></li>   
            </ul>
        </li>
        <li><a class="drop" href="#link" title="">Drop 3 Lvl 2</a>
            <ul>
                <li><a href="#link">Flyout 1 Lvl 3</a></li>

                <li><a class="drop" href="#link" title="">Flyout 2 Lvl 3</a>
                     <ul>
                        <li><a href="#link">Flyout 1 Lvl 4</a></li>
                        <li><a href="#link">Flyout 2 Lvl 4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

<li><a href="#link" title="">Main 4</a></li>

<li><a href="#link" title="">Main 5</a></li>

</ul>
</div>

Hikin' Mike · August 12, 2013

I'm using a custom nav bar to replicate my Wordpress site. I put the navigation code in my header box and deleted the navigation bar.

ko04 · August 12, 2013

Hikin' Mike wrote: »

I'm using a custom nav bar to replicate my Wordpress site. I put the navigation code in my header box and deleted the navigation bar.

I tired adding my custom navbar using the HTML and CSS block but it like I was saying doesnt intergraded very well...I'm having a hard time trying explain it but using the templet navbar I can click on the links and customize my site through that navbar. Though putting in my own navbar those links don't allow that same integration. Does that make since. Mike your site looks really good as always by the way

AceCo55 · August 13, 2013

I built a three level custom menu using the "Add Link" tools in New Smugmug. I haven't customised the colours/buttons as yet.

hp_girl · August 13, 2013

custom headers - HELP

Hikin' Mike wrote: »

I'm using a custom nav bar to replicate my Wordpress site. I put the navigation code in my header box and deleted the navigation bar.

What is the "header box" and how did you delete the navigation bar? I had a custom head tag and header in the old SM and now I can't figure out how to move the code to the new SM. I tried adding an HTML block, but it won't accept my head tag code. Where do I put head tag code?

Hikin' Mike · August 13, 2013

hp_girl wrote: »

What is the "header box" and how did you delete the navigation bar? I had a custom head tag and header in the old SM and now I can't figure out how to move the code to the new SM. I tried adding an HTML block, but it won't accept my head tag code. Where do I put head tag code?

I guess it wasn't a Header box. I just used a HTML box on the top of the page, where the Logo is, or in my case it used to be (I removed it). There is no head tag on the new SmugMug site.

Hikin' Mike · August 13, 2013

ko04 wrote: »

I tired adding my custom navbar using the HTML and CSS block but it like I was saying doesnt intergraded very well...I'm having a hard time trying explain it but using the templet navbar I can click on the links and customize my site through that navbar. Though putting in my own navbar those links don't allow that same integration. Does that make since. Mike your site looks really good as always by the way

Thanks for the compliment, Keith.

If you're using a HTML box for your navigation, then yes it doesn't have the same effect as the standard Nav Bar Box. I couldn't used the standard nav box and make my site look like I wanted, so I used a HTML box for my header, navigation and one for the footer.

ko04 · August 13, 2013

Hikin' Mike wrote: »

Thanks for the compliment, Keith.

If you're using a HTML box for your navigation, then yes it doesn't have the same effect as the standard Nav Bar Box. I couldn't used the standard nav box and make my site look like I wanted, so I used a HTML box for my header, navigation and one for the footer.

No problem, I understand what you mean I am trying to match my website exactly how I have it now and by doing a HTML box it allows that. I like your idea of putting a nav in my footer too so I still have SM's navbar intergraded. Question though I copied my old code for my navbar into a HTML/CSS box and when I am in edit mode it looks fine though when I get out of it and "publish" what I have it is broken do you or anyone in here happen to know whats going on there? This might be an issue I have to bring up with Smugmug but we all know they are extremely busy.

Hikin' Mike · August 13, 2013

ko04 wrote: »

No problem, I understand what you mean I am trying to match my website exactly how I have it now and by doing a HTML box it allows that. I like your idea of putting a nav in my footer too so I still have SM's navbar intergraded. Question though I copied my old code for my navbar into a HTML/CSS box and when I am in edit mode it looks fine though when I get out of it and "publish" what I have it is broken do you or anyone in here happen to know whats going on there? This might be an issue I have to bring up with Smugmug but we all know they are extremely busy.

I don't know if this what you're talking about, but I posted this about 15 minutes ago: http://www.dgrin.com/showpost.php?p=1896481&postcount=4

ko04 · August 13, 2013

Hikin' Mike wrote: »

Thanks for the compliment, Keith.

If you're using a HTML box for your navigation, then yes it doesn't have the same effect as the standard Nav Bar Box. I couldn't used the standard nav box and make my site look like I wanted, so I used a HTML box for my header, navigation and one for the footer.

Hikin' Mike wrote: »

I don't know if this what you're talking about, but I posted this about 15 minutes ago: http://www.dgrin.com/showpost.php?p=1896481&postcount=4

It sounds the same but I don't see anything wrong with my code in the new SM like that post does. Maybe I should just contact SM about it.

Hikin' Mike · August 13, 2013

ko04 wrote: »

It sounds the same but I don't see anything wrong with my code in the new SM like that post does. Maybe I should just contact SM about it.

Your code is probably fine, especially if you copied it from your old site. It's a bug on the new SM.

ko04 · August 13, 2013

yeah I just emailed Smugmug about it told them I wasn't the only one with the problem we will see what happens

ko04 · August 13, 2013

Well Smugmug set me back here saying advance customization is "is out of my league. Honestly, we have made it possible for you to create a dropdown nav bar through the content blocks." Which I sort of understand but at the same time I feel that if it is truly a bug on SM's end it should be fixed the fact that it looks fine in edit mode then not fine in published mode doesn't sound anything like a customization problem but rather a bug though I could be completely wrong on this since I am very much a beginner when it comes to coding and all this stuff. Maybe someone from Smugmug that is familiar with advance customization can shine some light on this matter in this form.

Hikin' Mike · August 13, 2013

Not sure if I can help, but why don't you post your nav code and I'll take a look.

ko04 · August 14, 2013

ko04 wrote: »

yeah I just emailed Smugmug about it told them I wasn't the only one with the problem we will see what happens

Hikin' Mike wrote: »

Not sure if I can help, but why don't you post your nav code and I'll take a look.

Hikin' Mike · August 14, 2013

ko04 wrote: »

Always thankful for your wiliness to help. So here is my nav bar html code Let me know if you want the CSS too just a heads up on the CSS I am using a website that generates the CSS for me.

I need the CSS too.

southeasternphotography · August 14, 2013

Dropdown Nav Bar - Honestly
[QUOTE=Honestly, we have made it possible for you to create a dropdown nav bar through the content blocks." [/QUOTE]

Well, I have built my basic Menu line and looked all around that area and I do not find, honestly, where or how to do it! That quote was part of a SmugMug response. Perhaps someone "not SmugMug" can explain the where and how. Still in Preview, not live mode.

I customized the heck out of my legacy site, so I think I have the smarts for this

ko04 · August 14, 2013

Hikin' Mike wrote: »

I need the CSS too.

Mike thanks for you help on this matter, I should have just gave you it in the first place oh well. So here it is again keep in mind that I used a generator to create this so that might be while its very complicated looking.

/* Pure CSS3 Multi Level Drop Down Navigation Menu */


#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  margin: 0px auto 75px;
  width: 720px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}

Hikin' Mike · August 14, 2013

I just sent you a PM.

Andi Nicole · August 16, 2013

Hikin' Mike wrote: »

I just sent you a PM.

Hey - Did the PM have valuable information??

I am having the same exact issues where I've copied and paste the html/css from my legacy into the NSM and it looks perfect in the edit portion and once you hit DONE it goes all crazy.

Hikin' Mike · August 16, 2013

Andi Nicole wrote: »

Hey - Did the PM have valuable information??

I am having the same exact issues where I've copied and paste the html/css from my legacy into the NSM and it looks perfect in the edit portion and once you hit DONE it goes all crazy.

The only valuable info in the PM was a link to my test page showing him that the code works, at least on my page. I will say that the only way to find out if your site is displaying correctly is to be logged OUT. I noticed I have a few "issues" on my footer when I'm logged in, but it goes away when I'm logged out.

Andi Nicole · August 16, 2013

Hikin' Mike wrote: »

The only valuable info in the PM was a link to my test page showing him that the code works, at least on my page. I will say that the only way to find out if your site is displaying correctly is to be logged OUT. I noticed I have a few "issues" on my footer when I'm logged in, but it goes away when I'm logged out.

oh interesting!

aschendel · August 16, 2013

I think the HTML in post 16 isn't valid. You've got LI's without closing tags, etc. etc. etc. I'd clean that up and see if it helps. The new SM HTML editor is pretty sensitive.

Andy

Hikin' Mike · August 16, 2013

aschendel wrote: »

I think the HTML in post 16 isn't valid. You've got LI's without closing tags, etc. etc. etc. I'd clean that up and see if it helps. The new SM HTML editor is pretty sensitive.

Andy

I didn't notice it, but it does work on my testing page.

aschendel · August 16, 2013

Alright, i tried it too, both on a Page and on the top of my Entire Site (with an HTML block above my Menu content block) and yeah, the posted HTML and works just fine in IE9, FF, and Chrome on Win7

ko04, what kinds of things are you seeing?

Andy

Andi Nicole · August 16, 2013

Do you think you could look at my codes? These are what I copied and paste from my legacy site.........

CSS

 
/* CSS Dropdown Nav Bar */
 /* Original code by Stu Nicholls of */
 /* [URL]http://www.cssplay.co.uk/[/URL] */
 /* Edited for content, formatting and some elements */
 /* Please help support CSSPlay at: */
 /* [URL]http://www.cssplay.co.uk/support.html[/URL] */
 /* CSS Section */
       /* style the outer div to give it width */
 .menu {
    float:right;
    z-index:99;
    position:relative;    /* Make the container moveable */
    margin-top: 130px;    /* Move menu up and down */
    width:560px;          /* Main bar total width, minimize to not wrap to two lines*/
    color:green;          /* dot color */
    line-height: 24px;    /* move dot up and down */
    font-size: 16px;      /* dot size */
 }
       /* 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:black;
    background:rgba(22, 22, 22, .0001);
    border:none;         /* optional */
    border-width:1px 1px 1px 1px;   /* optional */
    font-size:12pt;
    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 10px;    /* 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:white;
    background:rgba(22, 22, 22, .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:20px;       /* move drop vertically */
    left:0;         /* move drop horizontally   */
    width:150px;    /* Size of the daughter cells */
 }
       /* 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 second level links */
 .menu ul ul a, .menu ul ul a:visited {
    color:black;
    background:rgba(22, 22, 22, .0001);
    height:20px;
    line-height:20px;
    width:150px;
    text-align: left;
 }
 .menu ul ul :hover > a.drop  {background:purple;}   /* 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:white;
    background:rgba(22, 22, 22, .0001);;
 }
 
       /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */
       /* position the third level flyout menu */
 .menu ul ul ul {
    left:150px;
    top:0;
    width:150px;
    height:auto;
 }
 .menu ul ul ul li a {color:purple;}
 .menu ul ul ul li a:hover {color:green;}
       /* 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 */
       /* style the third level links */
 .menu ul ul ul a, .menu ul ul ul a:visited {
    color:black;              /* hover 2nd > 3rd & 4th */
    background:rgba(22, 22, 22, .0001);       /* hover 3rd > 4th */
    height:20px;
    line-height:20px;
    width:150px;
 }
 
       /* ***** 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:black;
    width:150px;
 }
       /* style the fourth level hover */
 .menu ul ul ul ul a:hover {background:white;}
 .menu ul ul ul ul :hover > a {background:white;}
 
       /* 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 */

HTML

<!-- Original code by Stu Nicholls of -->
 <!-- [URL]http://www.cssplay.co.uk/[/URL] -->
 <!-- Edited for content, formatting, and some elements -->
 <!-- Please help support CSSPlay at: -->
 <!-- [URL]http://www.cssplay.co.uk/support.html[/URL] -->
 <div class="menu">
 <ul>
 <li><a href="/" title="">Home</a></li>
 <li>•</li>
 <li><a class="drop" href="#link" title="">Portfolio
     <!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
         <li><a href="/Portfolio/Portraits" title="">Portraits</a></li>
         <li><a href="/Portfolio/Babies-Bellies" title="">Babies & Bellies</a></li>
         <li><a href="/Portfolio/Seniors" title="">Seniors</a></li>
     </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li>•</li>
 <li><a class="drop" href="#link" title="">Services<!-- no /a><font color="green" size="6">.</font></li>
     <!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
         <li><a href="/Info/Portraits-Services" title="">Portraits</a></li>
         <li><a href="/Info/Babies-Bellies-Services" title="">Babies & Bellies</a></li>
         <li><a href="/Info/Senior-Services" title="">Seniors</a></li>
         <li><a href="/FineArt" title="">Fine Arts</a></li>
     </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li>•</li>
 <li><a class="drop" href="#link" title="">Connect<!-- no /a><font color="green" size="6">.</font></li>
     <!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
         <li><a href="/InfoAboutMe/About-Me" title="">About</a></li>
         <li><a href="[URL]https://www.facebook.com/pages/ANPhotographyStudio/504768042880350[/URL]" title="">Facebook</a></li>
         <li><a href="/" onclick="return false;" class="customContactButton">Contact</a></li>
         <li><a href="/gallery/5911462_csL5H" title="">GuestBook</a></li>
     </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li>•</li>
 <li><a href="/Clients">Client Login</a></li>
 </ul>
 </div>  <!-- closes menu -->
 
 <div id="my_banner">
 <a href="/">
 <img src="/img/spacer.gif" alt="" border="0" height="146" width="400">
 </a>
 </div>
 
 </div> <!-- closes my_header -->
 
 <div style="clear: both;"></div>
 <!-- End Navbar Code -->

The link below is what it looks like while I'm working in the code box....exactly how I want it.....

http://www.andinicolephotography.com.../preview-M.png

Then once I hit DONE (or OK) then the codes get all mixed up like this...........

http://www.andinicolephotography.com...0/M/DONE-M.png

Allen · August 16, 2013

I think you need a closing "a" tag on these mains. The closing </li> is at the end of the drop.

tle="">Portfolio</a>

Your links do not work with the .... in the middle of them.

Andi Nicole · August 16, 2013

Allen wrote: »

I think you need a closing "a" tag on these mains. The closing </li> is at the end of the drop.

tle="">Portfolio</a>

Your links do not work with the .... in the middle of them.

Okey I will try that....

So weird how the....got into the links!

Revised -

The link below is what it looks like while I'm working in the code box....exactly how I want it.....

http://www.andinicolephotography.com/Photography/Bloggy-Blog/n-HB4pr/i-pVR6bgF/0/M/preview-M.png

Then once I hit DONE (or OK) then the codes get all mixed up like this...........

http://www.andinicolephotography.com/Photography/Bloggy-Blog/n-HB4pr/i-g6wv6Gd/0/M/DONE-M.png

Edit - Once I hit reply - those ....s are there so I donno....

Allen · August 16, 2013

Andi Nicole wrote: »

Okey I will try that....

So weird how the....got into the links!

Revised -

The link below is what it looks like while I'm working in the code box....exactly how I want it.....

http://www.andinicolephotography.com/Photography/Bloggy-Blog/n-HB4pr/i-pVR6bgF/0/M/preview-M.png

Then once I hit DONE (or OK) then the codes get all mixed up like this...........

http://www.andinicolephotography.com/Photography/Bloggy-Blog/n-HB4pr/i-g6wv6Gd/0/M/DONE-M.png

Edit - Once I hit reply - those ....s are there so I donno....

Make the changes in red and see if it works.
One example, do them all.

<li><a class="drop" href="#link" title="">Portfolio[COLOR=Red]</a>[/COLOR]
     [COLOR=red][strike][COLOR=#bbbbbb][b]<!--[if gte IE 7]><!--></a><!--<![endif]-->[/b][/COLOR][/strike][/COLOR]
     [COLOR=red][strike][COLOR=#bbbbbb][b]<!--[if lte IE 6]><table><tr><td><![endif]-->[/b][/COLOR][/strike][/COLOR]
     <ul>
         <li><a href="/Portfolio/Portraits" title="">Portraits</a></li>
         <li><a href="/Portfolio/Babies-Bellies" title="">Babies & Bellies</a></li>
         <li><a href="/Portfolio/Seniors" title="">Seniors</a></li>
     </ul> [COLOR=red][strike][COLOR=#bbbbbb][b]<!--[if lte IE 6]></td></tr></table></a><![endif]-->[/b][/COLOR][/strike][/COLOR]
 </li>

Andi Nicole · August 17, 2013

Allen wrote: »

Make the changes in red and see if it works.
One example, do them all.

<li><a class="drop" href="#link" title="">Portfolio[COLOR=red]</a>[/COLOR]
     [COLOR=red][strike][COLOR=#bbbbbb][B]<!--[if gte IE 7]><!--></a><!--<![endif]-->[/B][/COLOR][/strike][/COLOR]
     [COLOR=red][strike][COLOR=#bbbbbb][B]<!--[if lte IE 6]><table><tr><td><![endif]-->[/B][/COLOR][/strike][/COLOR]
     <ul>
         <li><a href="/Portfolio/Portraits" title="">Portraits</a></li>
         <li><a href="/Portfolio/Babies-Bellies" title="">Babies & Bellies</a></li>
         <li><a href="/Portfolio/Seniors" title="">Seniors</a></li>
     </ul> [COLOR=red][strike][COLOR=#bbbbbb][B]<!--[if lte IE 6]></td></tr></table></a><![endif]-->[/B][/COLOR][/strike][/COLOR]
 </li>

Thank you Allen! I realized when I pasted it into the NSM HTML coding box...there were like new codes added that I didn't want added. I just cleaned some stuff up and now it's working for the most part. Thanks again!

Does anyone know if we can make custom drop navbars?

Comments