What am I doing wrong

ko04 · September 26, 2013

Hey Everyone,
After getting some advice from Denise in the show us your site form I need someone's help. I am having a issue with my navbar where it gets cut off if the screen is certain sizes. I am using the dimension customizer that smugmug has so I'm not sure if that is what is causing this issue or not. I want it just stay in place when you change screen sizes no matter what browser or how big you have it. Can anyone help me on this issue? Also I am using a customize navbar as you'll probably be able to tell so I am using a html/css block. As many of you know and I say everytime I have any big problems I can't figure out I don't know code very well and I am very much a novice so please keep that in mind. Thanks in advance!

Here is the code so you don't have to go to my site. I used a navbar generator do make this code.( if you want to go there its www.k-ophotography.com)

[HTML]<div id="myBanner"></div>
<div id="cssmenu">
<ul>
<li><a href="http://www.k-ophotography.com">Home</a></li>
<li><a href="http://www.k-ophotography.com/Bio/Aboutme">Bio</a></li>
<li class="has-sub"><a href="http://www.k-ophotography.com/FineArt">Fine Art</a>
<ul>
<li class="has-sub"><a href="http://www.k-ophotography.com/landscape/15021183_pGh8zz/">Landscapes</a></li>
<li class="has-sub"><a href="http://www.k-ophotography.com/Holga/15023800_tNjdpf/">Holga</a></li>
<li class="has-sub"><a href="http://www.k-ophotography.com/Miscellaneous/15066851_8LSFH2/">Miscellaneous</a></li>
</ul>
</li>
<li class="has-sub"><a href="http://www.k-ophotography.com/WeddingsandPortraitPhotography">Weddings and Portraits</a>
<ul>
<li class="has-sub"><a href="http://www.k-ophotography.com/Weddings/21664399_STWJhf/">Weddings</a></li>
<li class="has-sub"><a href="http://www.k-ophotography.com/Portraits/21668501_QWfnXP/">Portraits</a></li>
</ul>
</li>
<li><a href="http://k-ophotography.blogspot.com/">Blog</a></li>
<li><a href="http://www.k-ophotography.com/Testimonials-">Testimonials</a></li>
<li><a href="http://www.k-ophotography.com/Client-Login-">Clients</a></li>
<li><a href="http://www.k-ophotography.com/Contact">Contact</a></li>
</ul>
</div>[/HTML]

/* 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;
}

ko04 · September 28, 2013

Do to some people helping me in the "blog integration" form I was able to help the problem but not fix it. Someone suggested that I mess with the container in the dimension customizer so I did and I also got ride of everything I had in there and I'm just sticking with my code. Though like I said its just helping the problem and not fixing it because if I resize my screen my navbar starts to get cut off and I'm not talking about anything supper small either. So I'd still like some help in this area if anyone can. Thank you everyone!

Hikin' Mike · September 28, 2013

What is the code you're using for your logo? I'm seeing an inline style <div id="yui_3_8_0_1_1380401112016_359" class="sm-page-layout-column yui3-u" data-layout-column="0" style="width: 58%;"> at 58%. Removing that fixes your problem.

ko04 · September 28, 2013

I'm not using any code I'm using a logo block.

What am I doing wrong

Comments