Hello,
Thanks for looking. I am working on re-designing the header portion of a website, and it seems to be working fine in the browser, however, when I view it on my smartphone the navigation links are not appearing.
The version I'm working on can be seen at
www.furniturelab.com/_headertest4.cfm
Also, I want the entire navigation to stay centered in the browser window when it resizes, rather than left-aligned.
Lastly, I would like to use a small icon above the navigation link to indicate the current page that is selected. Does anyone know how I would go about doing this?
Any help in these areas, plus any code improvements would be much appreciated.
CSS:
Code:
<style>
.body {
margin:0px;
padding:0px;
display:block;
}
#headerContainer {
width:940;
height:150;
background:#F99;
display:block;
}
#logoContainer {
float:left;
position:relative;
display:block;
}
#phoneContainer {
height:35px;
position:absolute;
float:right;
display:block;
left:750px;
top:-10px;
}
#searchBox {
position:absolute;
left:750px;
width:150px;
top:30px;
float:right;
display:block;
}
/* defines rounded corners, green gradient & drop shadow */
#navBar1{
position:absolute;
left:400px;
width:350px;
float:right;
}
#navBar1 ul ul{
display:none;
top:0px;
left:0px;
color:#F30;
}
/* Get rid of any margin/padding & set list style to none */
#navBar1 ul {
width:375px;
padding:0;
margin:0;
list-style:none;
position:fixed;
top:75px;
left:550px;
z-index:5;
color:#F30;
}
/* Change display mode to block & float each list item to left */
#navBar1 ul li{
display:block;
float:left;
padding-top:0px;
padding-bottom:0px;
color:#F30;
}
#divider {
position:relative;
width:100%;
}
#navBar1 ul li a{
display:block;
padding:0px;
padding-left:10px;
padding-right:13px;
color:#333;
text-decoration:none;
font-family:Helvetica Neue Light, Helvetica, sans-serif;
font-size:80%;
}
#navBar1 ul li a:active{
display:inline;
widows:100%;
height:100%;
background-image:url(/images/menu-marker.jpg);
background-repeat:no-repeat;
background-position:center;
}
/* Change Font color & underline with hover */
#navBar1 ul li a:hover{
color:#F60;
text-decoration:none;
z-index:5;
}
/*Change position to absolute */
#navBar1 ul ul{
position:fixed;
top:15px;
width:400px;
/* border:thin solid #849c92; */
font-size:70%;
display:none;
}
/* Adds hover popup to nav items */
#navBar1 ul li:hover ul{
position:absolute;
display:block;
color:#F60;
z-index:5;
}
/* Add a bit of padding */
#navBar1 ul ul li{
padding:0;
padding-top:5px;
padding-bottom:2px;
}
/*Change text color */
#navBar1 ul ul li a{
border:none;
color: #333;
}
#navBar1 ul ul li a:active{
color: #F60;
}
#navBar1 ul ul li a:visited{
color: #333;
}
/* Link hover color */
#navBar1 ul ul li a:hover{
color: #F60;
}
.showingItems {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #333300;
}
.showingItems a:visited {
color:#666;
}
.red {
color: #F30;
}
body#home a#nav-home,
body#products a#nav-products,
body#gallery a#nav-gallery,
body#about a#nav-about
{
border: 1px red;
}
</style>
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body id="navigation">
<div align="center" id="headerContainer">
<div id="logoContainer">
<a href="http://furniturelab.com/"><img src="/FL-logo.jpg" border="0" alt="FurnitureLab logo" width="271" height="68" style="padding:5px;"></a>
</div>
<!--Phone Number & Search Box -->
<div id="phoneContainer">
<FORM method="get" action="search_results.cfm">
<p align="right" valign="top">
<img src="images/phone2009_2.jpg" alt="800.449.8677" name="Phone" width="148" height="22"> </p>
</div>
<div id="searchBox">
<cfoutput>
<input name="keyword" type="text" class="textbox-search" id="keyword" size="10" value="#session.keyword#">
<input name="Submit" type="submit" class="showingItems" value="Search">
</cfoutput>
</FORM></div>
<!--Navigation-->
<div id="navBar1" style="position:fixed;width:300px;overflow:hidden;clear:both";>
<ul>
<li class="headerList1"><a href="http://furniturelab.com" class="red"> Home</a>
</li>
<li class="headerList1"><span><a href="http://furniturelab.com/table_design.cfm"> Products</a></span>
<ul>
<li> <a href="http://furniturelab.com/seating_chair.cfm"> Seating </a></li>
<li> <a href="http://furniturelab.com/table_design.cfm"> Table Tops </a></li>
<li> <a href="#"> Table Bases </a></li>
<li> <a href="#"> Booths </a></li>
<li> <a href="#"> Trash Units</a></li>
</ul>
</li>
<li class="headerList1"><span><a href="#"> Markets</a></span>
<ul>
<li> <a href="#"> Healthcare </a></li>
<li> <a href="#"> Hospitality</a></li>
<li> <a href="#"> Education </a></li>
<li> <a href="#"> Corporate </a></li>
<li> <a href="#"> Shopping Malls </a></li>
</ul>
</li>
<li class="headerList1"><span><a href="#"> Resources</a></span>
<ul>
<li> <a href="#"> Reps </a></li>
<li> <a href="#"> Gallery </a></li>
<li> <a href="#"> GSA & State Contracts </a></li>
<li> <a href="#"> 2D/3D Models </a></li>
<li> <a href="#"> Contests</a></li>
</ul>
</li>
<li><span><a href="#"> Contact</a></span>
<ul>
<li> <a href="#"> Quote Request </a></li>
<li> <a href="#"> Catalog Request </a></li>
<li> <a href="#"> Our Story </a></li>
</ul>
</li>
</ul>
</div>
<div style="float:left;position:relative;top:2px;z-index:4">
<img src="/images/Divider.jpg" width="900" />
</div>
</div></body>
</body>
</html>
Before you post, read our: 
Nav not showing up on Smartphone!
