Top menu breaks apart when resizing browser window

After changing the template width to 1075 in the Template Width under the Template Parameters and adding additional navigation links to the top menu (totaling , the top menu now collapses when resizing my browser Firefox browser window. Meaning... as I size the window down, the text to the links drop below the top menu background one by one as my window closes in on those links. see here: twincountyhalloffame.com/fame/

How can i fix it so that the top menu remains unchanged as I resize my browser window?

Hi,

Open file templates/hot_photoportfolio/css/layout.css and make following change:

.topmenu {
height:90px;
margin:0 auto;
overflow: hidden;
}



Open the file : /templates/hot_photoportfolio/css/template_css.css

And make following changes:

Add
#nav
{
width: 1075px;
}

,then change:
#nav li {
float:left;
position:relative;
margin:0 2px 0 0;
height:73px;
font-size:14px;
width:153px;
text-align:center;
}

to

#nav li {
float:left;
position:relative;
margin:0 2px 0 0;
height:73px;
font-size:14px;
width:12%;
text-align:center;
}

thanks!

additionally, is there a way to keep the top menu navigation background (blue bar) static so that it does not appear to collapse as i resize the window now?

twincountyhalloffame.com/fame/

What do you meen by that?

when i manually size my browser window down, it appears as though the background behind the main nav menu shrinks with the window, yet the menu items (words) remain static. is there a way to have the menu background appear static as well?

Well you can add position:absolute; to .topmenu{... , but will probably you need to define top: and left: for it.

I'am allways glad to help but your questions are exceeding forum rules, plese avoid this kind of quiestion heare.

Kind Regards,