Options
Help with my custom Navbar Please
Andi Nicole
Registered Users Posts: 96 Big grins
I have both the HTML and CSS codes for my custom navbar. When I put them into the html and css box, it shows up on the site (before hitting the OK button) and it looks PERFECT, the drop down works, the fonts, the dividers, etc. Once I hit OK...then it goes wacked! the site is not unveiled yet as I'm still working on duplicating it. But below you will see the codes I'm using.
HTML codes:
CSS codes:
HTML codes:
<!-- 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> • </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="https://www.facebook.com/pages/ANPhotographyStudio/504768042880350" 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 -->
CSS codes:
/* 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 */
0
Comments
Are you selecting PUBLISH after making the change? See http://help.smugmug.com/customer/portal/articles/1247585
Just to clarify - I am in the HTML/CSS box imputing the codes and as you are doing that you can see it show up on your page................... hitting Publish saves the work...which of course I don't want to do because it clearly shows its not right. (whacked, messed up, jumbled, I'm using it in slang terms - guess its more of an American word haha)
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
www.andinicolephotography.com
"A day is lost if one has not laughed"
Make a copy of the html and save in a text file for backup. Then make these typical changes and paste
it back in. See if this corrects the wackyness.
<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>My Website index | My Blog
You have assumed correctly
I tried removing those already and had no luck. Allen - would it be easier if once I unveil the site and then enter those codes then you can see it first hand yourself? If so...I'll just wait until I am ready to do that and then get back to you?
www.andinicolephotography.com
"A day is lost if one has not laughed"
My Website index | My Blog
You think so huh?? That would be cool, I'll have to see if I can figure that out..........
www.andinicolephotography.com
"A day is lost if one has not laughed"
Nightlight "homepage" in flyout drawer.
Click navigation lower in the flyout drawer and drag menu over to under your logo.
Click the wrench on the thingie you just dragged over.
Click link tab.
click plus to add button and fill in home.
repeat
repeat
indent new links for drops
repeat
My Website index | My Blog
My apologies, I misunderstood you. I thought you meant I could create MY custom NavBar using the New Menu - I've already made one using the whole customizer thinking I could add HTML and CSS to it but no. It's tacky, blocks, to the right, no custom bullets in between, no transparent, etc.
Thanks though! For now...I will just wait until I unveil it.
www.andinicolephotography.com
"A day is lost if one has not laughed"