Problem with theme – Header and pages

The ‘yellow bar’ is an image in the theme. It will only stretch horizontally and then only to as wide as the div.inside element will allow it, (952px i think?). Without some additional coding, you won’t be able to fit that many menu items in that bar with titles as long as they are.

You have a limited amount of space. You can either shorten your menu items or add some categories and dropdown functionality perhaps…

Thanks for response smgrundy.

Please, help me and say me if you see in the code above the value that I have to change please. I don’t understand the CSS code ??

/*-----------------------------------------------------------------------------------------------
  Global Styles
-----------------------------------------------------------------------------------------------*/
* {
	padding:0;
	margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
select option{ padding:0 5px; }

.hide, .print-logo, .close-button{ display:none; }
.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; height:1px; font-size:1px; line-height:1px; }
a img{ border:none; }

/*-----------------------------------------------------------------------------------------------
  Layout / Base Page Styling
-----------------------------------------------------------------------------------------------*/
body{
	background:#000;
	color:#BFBFBF;
	font-size:70%;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
}
/* This class sets the width and position for all rows */
.inside{
	width:80%;
	min-width:85em;
	max-width:85em;
	margin:0 auto;
}
a{
	color:#FFF;
	text-decoration:none;
}
a:hover{
	color:#FFF;
	text-decoration:underline;
}
h1{
	color:#CCC;
	font-size:1.5em;
	font-weight:normal;
	margin:1.5em 0;
}
h1 a{
   color:#CCC;
}
h1 a:hover{
	color:#CCC;
	text-decoration:none;
}
h2, h3{
	font-size:1.15em;
	color:#FFF;
	font-weight:normal;
}
p{
	line-height:1.75em;
}
ul li{
	list-style-type:square;
	margin:0.5em 0 0.5em 2em;
}
blockquote{
	margin-left:1em;
	padding-left:1em;
	border-left:2px solid #CCC;
	color:#CCC;
}
pre{
	width:100%;
	padding:1em 0;
	overflow:auto;
	border-top:1px dotted #333;
	border-bottom:1px dotted #333;
}
table{
	width:100%;
	border-spacing:2px;
	margin:1.5em 0;
}
table th, table td{ padding:0.3em 0.75em }
table th{
	background:#CCC;
	color:#000;
	text-align:left;
}
table td{
	background:#333;
	color:#FFF;
}
table caption{
	text-align:left;
	color:#FFF;
	margin-bottom:-1em;
	margin-top:1em;
}
.rule{
	border-top:1px solid #CCC;
	height:1px;
	font-size:1px;
	line-height:1px;
	margin:1.5em 0;
}
/*-----------------------------------------------------------------------------------------------
  Header
-----------------------------------------------------------------------------------------------*/
#header{
	background:#000;
}
#header .inside{
	padding:2em 0;
}
#header h2{
	font-size:2.25em;
	margin:0 0.5em 0 0;
	padding:0 0.5em 0.25em 0;
	border-right:1px solid #808080;
	float:left;
}
#header h2 a{ text-decoration:none; }

#header p{
	padding:1em 0;
	margin:0;
	line-height:1em;
}
/*-----------------------------------------------------------------------------------------------
  Navigation
-----------------------------------------------------------------------------------------------*/
#navigation {
	background:#000 url(images/navigation.png) top repeat-x;
	display:block;
	height:25px;
	position:relative;
	margin:0;
	padding:0;
}
#slidebar{
	zoom:1;
}

/*-----------------------------------------------------------------------------------------------
  Open / Close Navigation button
-----------------------------------------------------------------------------------------------*/
#silderButtonNav a{
	display:block;
	padding:3px;
	font-size:.8em;
	background:#393939;
	color:#fff;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right:1px solid #000;
	text-decoration:none;
	position:absolute;
	width:80px;
	min-height:10px;
	height:auto !important;
	height:10px;
	top:25px;
	right:5%;
	text-align:center;
}
*html #silderButtonNav a{
	width:80px;
	text-decoration:none;
}
#silderButtonNav a:hover{
	background:#000;
	color:#fff;
	border-bottom: 1px solid #333;
	border-left: 1px solid #333;
	border-right:1px solid #333;
	text-decoration:none;
}

/*-----------------------------------------------------------------------------------------------
  Primary Items
-----------------------------------------------------------------------------------------------*/
#primary{
	background:#0C0C0C;
	padding:2em 0 2em 0;
	color:#A0A0A0;
}
.abt-this-page{
	font-size:1.15em;
	color:#CCC;
	font-weight:normal;
}
#primary.onecol-stories .primary{
	float:left;
	width:50%;
}
#primary.onecol-stories .secondary{
	float:right;
	width:40%;
	margin:0 0 0 10%;
}
#primary.twocol-stories .story{
	float:left;
	width:48%;
	margin:0 0 0 3.9%;
	display:inline;
}
* html #primary.twocol-stories .story{
	margin-left:2%;
}
#primary.twocol-stories .first, * html #primary.twocol-stories .first{
	margin:0 0 0 0;
}
#primary.twocol-stories .first img, * html #primary.twocol-stories .first img, #primary.twocol-stories .story img, * html #primary.twocol-stories .story img{
	max-width: 100%;
}
.story h3{
	font-size:1.15em;
	margin:0 0 1.5em 0;
	font-weight:normal;
	color:#CCC;
}
.story h3 a{
	color:#CCC;
	text-decoration:none;
	border-bottom:1px dotted #666;
}
.story .details{
	margin:1em 0;
	text-align:right;
	border-top:1px solid #333;
	padding:0.5em 0;
	font-size:0.9em;
	color:#666;
}
.read-on{
	background:url(images/readon_black.gif) 100% 60% no-repeat;
	padding-right:20px;
	text-align:right;
	display:block;
}
.read-on a {
	font-style:italic;
	color:#CCC;
	text-decoration:none;
}
.story .details a{
	color:#666;
	text-decoration:none;
}
.story .details a:hover{ color:#FFF; }

/* Single Post Styles */
#primary .primary{
	float:right;
	width:65%;
}
#primary .secondary{
	float:left;
	width:30%;
	margin-right:3%;
	padding-top:0.65em;
	display:inline;
}
* html #primary .secondary{ margin-right:2%; }
.secondary .featured p{
	border-bottom:1px solid #333333;
	border-top: 1px solid #333333;
	padding:0.5em 0 0.6em 0;
	line-height:1.5em;
	margin:1em 0 0 0;
}
#primary.twocol-stories .story img, .single-post img {
	padding: 4px;
	border: 1px solid #ddd;
	background: #333333;
}
#primary.twocol-stories .story a img:hover, .single-post a img:hover {
	padding: 4px;
	border: 1px solid #ddd;
	background: #dd9900;
}
.secondary .featured dl{
	margin:0 0;
	border-bottom:1px solid #333333;
	padding:0.5em 0 0.6em 0;
}
.secondary .featured dl h3{
	margin:0 0;
	padding:0 0;
	color:#AAA;
	font-size:1em;
}
.secondary dt{
	display:inline;
	margin:0;
	padding:0;
	color:#AAA;
}
.secondary dd{
	display:inline;
	margin:0;
	padding:0;
}
.secondary dd a{ color:#808080; }
.secondary dd a:hover{ color:#FFF; }
.secondary .related_post{
	display:inline;
	margin:0;
	padding:0;
}
.secondary .related_post a{ color:#808080; }
.secondary .related_post a:hover{ color:#FFF; }
.single-post h1, .single-post h2{ margin-top:0; }
#primary code {
	display:block;
	border:1px solid #333;
	background:#272727;
	color:#ffffff;
	padding:0.2em 0.2em 0.2em 1em;
	margin:1em 5% 0 5%;
}
#paging {
	text-align:right;
	margin-top:0.5em;
	margin-bottom:1em;
}
#paging a {
	border:1px solid #333;
	padding:0.2em;
}
#paging a:hover {
	text-decoration:none;
}

/*-----------------------------------------------------------------------------------------------
	Styles for various plugins
-----------------------------------------------------------------------------------------------*/
/* Similar posts plugin. Styling the bottom of the single page suggestions */
.similar{
	margin:1em 0;
	text-align:right;
	border-top:1px solid #555;
	border-bottom:1px solid #555;
	padding:0.5em 0;
	font-size:0.9em;
	color:#666;
}

/* Emo-Vote Plugin styles for the lists (sidebar etc) */
li.emo_widget_title {
    color: #FF9900;
    border-top: none !important;
}

/*-----------------------------------------------------------------------------------------------
	Caption and WP 2.6 Image Styles
-----------------------------------------------------------------------------------------------*/
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #229;
   text-align: center;
   background-color: #232323;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {

   margin: 0;
   padding: 0;
   border: 0 none;
}

a.wp-caption:hover {
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

/*-----------------------------------------------------------------------------------------------
	Secondary Items
-----------------------------------------------------------------------------------------------*/
#secondary{
	background:#000;
	padding:1px 2em;
	border-top:1px solid #1C1C1C;
}
.comment-head{
	border-bottom:1px solid #1C1C1C;
	padding:0.8em 2em 1.0em 2em;
}
.comment-head .num-comments{
	font-size:1.5em;
	margin:0;
	color:#FFF;
}
.comment-head a{
	text-decoration:none;
	color:#868686;
}
.comment-head .details{
	font-size:0.95em;
}
ol#comments{
	list-style-type:none;
	margin:2em 0;
}
ol#comments li{
	list-style-type:none;
	margin:2em 0;
}
#comments cite{
	float:left;
	width:31%;
	font-style:normal;
	text-align:right;
}
* html #comments cite{ width:30.6%; }
#comments cite span{
	display:block;
}
#comments cite .author{ font-size:1.2em; }
#comments cite .author a{
	text-decoration:none;
}
#comments cite .admin-tools{
	margin:5px 0;
}
#comments cite .admin-tools a{
	float:right;
	margin:0 5px;
	padding:0px 3px 3px;
	background:#666;
	border:1px solid #999;
	text-decoration:none;
}
#primary .secondary .admin-tools{ margin:1em 0; }
#preview{
	margin:1em 0;
	padding:0.5em;
	border:1px solid #333;
}
#preview p{ margin:1em 0 0 0; }
#errors{ color:#FF0000; font-weight:bold; }
#comments cite.pingback {
	display:block;
	padding-top:68px;
	background:url(images/trackback_pingback.gif) 100% 0 no-repeat;
}
#comments .content{
	float:left;
	width:60%;
	margin-left:1.9%;
	border-left:1px solid #868686;
	min-height:72px;
	height:auto !important;
	height:72px;
	overflow:hidden;
	position: relative;
	z-index:99;
}
#comments .mycontent{
	float:left;
	width:60%;
	margin-left:1.9%;
	border-left:1px solid #868686;
    background-color: #939393;
    color: #000000;
	min-height:72px;
	height:auto !important;
	height:72px;
	overflow:hidden;
	position: relative;
	z-index:99;
}
#comments .commentbody {
	padding: 2% 0 0 2%;
}
#comments .counter {
	position: absolute;
	top:-10px;
	right:-1px;
	font: lighter 72px 'Century Gothic', 'Lucida Grande', Arial, Helvetica, Sans-Serif;
	color: #272727;
	text-align: right;
	padding:0;
	z-index:-99;
}
#comments .mycontent .counter {
	position: absolute;
	top:-10px;
	right:-1px;
	font: normal 72px 'Century Gothic', 'Lucida Grande', Arial, Helvetica, Sans-Serif;
	color: #666;
	text-align: right;
	padding:0;
	z-index:-99;
}
#comments .content p{
	margin:0 0 1em 0;
}
#comments .content h3{
	margin:0;
	font-size:1em;
}
#comments .mycontent p{
	margin:0 0 1em 0;
}
#comments .mycontent h3{
	margin:0;
	font-size:1em;
}
#comment-form{
	margin:5em 0 5em 35.4%;
	width:36em;
}
.formhead {
	font-size:1.15em;
	margin:0;
	color:#FFF;
}
input.textfield{
	width: 15em;
	margin:5px 0;
}
textarea.commentbox{
	width:28em;
	height:10em;
	padding:0.25em;
	margin:5px 0;
	font-size:1.2em;
	font-family:Arial, Helvetica, sans-serif;
}
label.text{
	position:relative;
	left:0.5em;
	top:-0.5em;
}
.formactions input.submit{
	cursor:pointer;
	float:right;
	margin:.5em 0 0 0;
	padding:0.25em 0.5em;
	display:block;
	border:1px solid #3D3D3D;
	background:#272727;
	color:#CCC
}
.formactions input.submit:hover{
	background:#CCC;
	color:#272727
}
*html .formactions input.submit{
	padding:0;
}
.formactions .spinner{
	float:right;
	margin:-8px -20px 0 0;
}
/*-----------------------------------------------------------------------------------------------
  Ancillary Items
-----------------------------------------------------------------------------------------------*/
.ancillary{
	background:#000 url(images/bg_ancillary.jpg) top repeat-x;
	padding:2em 0 2em 0;
}
.ancillary .sidebar{
	float:left;
	padding: 1%;
	width: 28%;
	margin:0 0 0 2.5%;
	background: transparent url(images/transparent_bg.png) repeat left top;
}
* html .ancillary .sidebar{
	background:none;
}
.ancillary .twice-length{ width:65%; }
.ancillary .thrice-length{ width:100%; }
.ancillary .first {
	clear:both;
	margin:0 0 0 2.4%;
}
* html .ancillary .first {
	clear:both;
	margin:0;
}
.ancillary .block-separator{
	clear:both;
	height:2.5em;
}
.ancillary .sidebar h2, .ancillary .sidebar h3{
	margin:0 0 2em 0;
	color: #FF9900;
}
.divider {
	border-bottom:1px solid #3D3D3D;
}
ul.sidebar li {
	list-style-type:none;
	margin:0;
}
ul.dates, ul.counts, ul.blogroll ul, ul.pages, ul.sidebar li.widget ul{
	list-style-type:none;
	margin:1.5em 0 2em 0;
	border-top:1px solid #3D3D3D;
}
ul.dates li, ul.counts li, ul.blogroll ul li, ul.pages li, ul.sidebar li.widget ul li{
	list-style-type:none;
	margin:0;
	padding:0.5em 0;
	border-bottom:1px solid #3D3D3D;
}
ul.dates .date{
	color:#858585;
	padding:0 1.5em 0 0;
}
ul.counts .count{
	float:right;
	color:#858585;
}
ul.dates a, ul.counts a, ul.blogroll a, ul.pages a, ul.sidebar li.widget ul a{
	color:#BFBFBF;
	text-decoration:none;
}
ul.dates a:hover, ul.dates a:hover .date, ul.counts a:hover, ul.counts a:hover .count, ul.blogroll a:hover, ul.pages a:hover, ul.sidebar li.widget ul a:hover{
	color:#FFF;
}
ul.blogroll{ margin-top:0; }
ul.blogroll li{
	list-style-type:none;
	margin:0;
}
ul.pages ul{
	margin:0;
}
ul.pages ul li{
	border:none;
	margin-left:2em;
	list-style-type:square;
}
/*block items*/
ul.recent-comments li a{
	color: #FF9900;
}
/*-----------------------------------------------------------------------------------------------
  Foooter
-----------------------------------------------------------------------------------------------*/
#footer{
	clear:both;
	color:#939393;
	margin:1.5em 0 3em 0;
}
#footer .inside{
	background:url(images/footer_black.gif) 50% 0 repeat-x;
	padding:1em 0;
}
#footer p{
	margin:0;
	font-size:0.9em;
}
#footer p.copyright{ float:left; }
#footer p.attributes{ float:right; }
#footer p.attributes a{
	padding:0 0 0 1em;
	text-decoration:none;
	color:#525252;
}
#footer p.attributes a:hover{
	color:#FFF;
}
/*-----------------------------------------------------------------------------------------------
  Utilities
-----------------------------------------------------------------------------------------------*/
#utilities{
	float:right;
	width:200px;
	margin:1em 0 0 0;
	text-align:right;
}
/*-----------------------------------------------------------------------------------------------
  Text Size
-----------------------------------------------------------------------------------------------*/
#textsize{
	margin:.25em 0 0 0;
	filter:alpha(opacity=40);
	-moz-opacity:0.4;
	opacity:.40;
}
#textsize:hover{
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.00;
}
#textsize a {
	text-decoration:none;
}
/*-----------------------------------------------------------------------------------------------
  Search
-----------------------------------------------------------------------------------------------*/
#search{
	filter:alpha(opacity=40);
	-moz-opacity:0.4;
	opacity:.40;
}
#search:hover{
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.00;
}
#search .searchimg{
	float:left;
	width:14px;
	height:13px;
	background:url(images/search.gif) 0 0 no-repeat;
	position:relative;
	top:4px;
}
#search input{
	width:175px;
	font-size: 0.9em;
	background:#CCC;
	margin-top:2px;
}
#search input:focus{
	background:#FFF;
}
#searchform{
	margin:1em 0;
}
#searchform #s{
	background:#222;
	border:none;
	border-bottom:1px solid #333;
	margin-bottom:4px;
	width:98%;
	color:#666666;
	padding:0.25em;
}
#searchform #searchsubmit{
	background:#000;
	color:#666;
	border:none;
	font-size:0.9em;
	text-transform:uppercase;
	letter-spacing:0.25em;
}

/* Legacy Typo CSS */
#search-results{
	width:30%;
	background:#333;
	padding:0 0 0 0;
	float:right;
	-moz-opacity:0.9;
	filter:alpha(opacity=90);
	opacity:.90;
	border-top:1em solid #000;
}
#search-results h3{
	font-weight:bold;
	text-align:left;
	margin:0;
	padding:0 0 1em 0;
	background:#000;

}
#search-results small{
	display:block;
	text-align:left;
	font-size:0.9em;
	padding:0.5em 1em 0.7em 1em;
	border-top:1px solid #666;
	border-bottom:1px solid #555;
}
#search-results small a{
	color:#CCC;
}
#search-results ul li{
	list-style-type:none;
	padding:0 1em 0.5em 1em;
	margin:0.5em 0;
}
#search-results ul li:hover{
	background:#202020;
}
#search-result ul{ margin:0; }
#search-results ul li a{
	text-decoration:none;
	border-bottom:1px dotted #CCC;
}
#search img.archives-icon{
	margin:0 7px 0 0;
	top:1px;
}

/*-----------------------------------------------------------------------------------------------
  Organise Series Styles
-----------------------------------------------------------------------------------------------*/

.seriesbox {
	background: #2c2c2c;
	color: #AAA;
	text-align: left;
	font: .8em Arial, Tahoma, Verdana, Sans-Serif;
	margin: 0 10px 0px 10px;
	padding: 6px 6px 12px 6px;
	border: 1px dotted #96431e;
	border-bottom: 2px solid #96431e;
	min-width: 125px;
}

.imgset {
	float: left;
	/*overflow: visible;*/
	border: none;
	margin-right: 6px;
}

.serieslist-content {
	font-size: 1.2em;
	color: #AAA;
	text-align: left;
}

.serieslist-box {
	background: #0c0c0c;
	width: 90%;
	/*height: 100px;*/
	padding: 6px;
	margin: 10px auto 0 auto;
	border: 1px solid #1E3A96;
	border-bottom: 2px solid #1E3A96;
}

html>body .serieslist-box {
	height: auto;
	/*min-height: 100px;*/
} 	

h2.series-title {
	font-size: 1.2em;
	color: #1E3A96;
	text-align: center;
}

ul.serieslist-ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	margin-left:2px;
	padding-left:1em;
}

li.serieslist-li {
	margin: 0;
	padding: 0;
}

.seriesbox img {
	margin: 0px 12.5px 0 12.5px;
}

h3.series-title-post-page {
	font-size: 1.1em;
	color: #1E3A96;
	text-align: center;
}

p.series-description {
	font-style: italic;
}

.seriesmeta {
	background-color: #50412f;
	font-size: .8em;
}

.series-nav-left {
	float: left;
}

.series-nav-right {
	float: right;
}

Thanks a lot again ??

Please help ??

Hi everyone.

I still wait a answer. I don’t know where is the problem to solve it.

Plesae, help me ??

Thanks ??

Hi everyone again!

I find the problem and I can solve it! ??

The problem was that the field “Navigation” in the CSS page have a variable called “Height”.

The value of height was in 25px. I change it to 50px (the double) and now the bar are perfect!

After

#navigation {
	background:#000 url(images/navigation.png) top repeat-x;
	display:block;
	height:25px;
	position:relative;
	margin:0;
	padding:0;

Before

#navigation {
	background:#000 url(images/navigation.png) top repeat-x;
	display:block;
	height:50px;
	position:relative;
	margin:0;
	padding:0;

Thanks a lot for all.

Bye!