Hey, I'm using invision and I want to make a gradient navigation bar for my forums.
I've already created one for the website using htm pages http://hilaryduff.mesfans.com/
and now I want to make the same one for the forums http://hilaryduff.mesfans.com/forum

Hi,

Use the same thing than

Code:

#submenu {
    background-image: -moz-linear-gradient(center top , #E0E0E0, #F6F6F6);
}

Example: http://i.imm.io/7Kbv.png

thanks a lot for your fast reply
I used the code that you gave me but nothing has changed the nav bar is still the same !

here is my css code

Code:

body {
   background-color: #5a2245;
   background-attachment: scroll;
        background-repeat:  repeat-y;
        background-image: url('http://i41.servimg.com/u/f41/12/61/44/85/page-b13.jpg');
        font-size: 12px;
   font-family: Arial,Helvetica,sans-serif;
        padding: 0em 0em  0em  0em;
        background-position:top center;

overflow:auto;
    height:450px;
      /* -moz-background-size:  100%;         
        -o-background-size:  100%;         
      -webkit-background-size:  100%;         
        background-size:  100%;         
      -moz-border-image: url('http://i69.servimg.com/u/f69/16/29/71/06/backgr18.jpg') -1; */}




   a:link {
      color: #804000;
      text-decoration:none;
   }

   a:visited {
      color: #804000;
      text-decoration:none;
   }

   a:active {
      color: #804000;
      text-decoration:none;
   }

   a:hover {
      color:#592243;
      text-decoration:underline ;
   }
   

    .corps
    {overflow:auto;
    height:500px;
  margin-left: 0%;

    }


.footer
{
position: absolute;
bottom: 0px;
}


.menuyas
{overflow:hidden;
    width:507px;
  margin-left: 0%;}



div#logostrip #logo {
width: 977px;
        display: block;
        padding: 7em 0em 0em 0em;
        overflow: hidden;
   background-image: url('http://i41.servimg.com/u/f41/12/61/44/85/page-h11.jpg');
        margin: 0 0px;
        background-position:top center;
margin-left: -15px;
margin-top: -6px;   

   }



#ipbwrapper {
background-color: #f3e09e;
background-repeat:  repeat-y;
background-position: middle center;

margin-bottom: 40px;


border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;


border-color:#1d1c21;
border-width:9.8px;
}



#submenu {
    background-image: -moz-linear-gradient(center top , #E0E0E0, #F6F6F6);
}







table.ipbtable tfoot td { background-color: #d9e5f5; background-image: url("http://i61.servimg.com/u/f61/14/01/56/38/bordur10.png");}
.box-content { border-bottom:10px  #d9e5f5; }

#navstrip li {
   float: left;
   margin: 0 5px;
   padding-left: 10px;
   background: url('http://i83.servimg.com/u/f83/13/73/57/65/f110.png') no-repeat left 50%;
   }
#navstrip li.begin {
   padding-left: 10px;
   background: url('http://i83.servimg.com/u/f83/13/73/57/65/f310.png') no-repeat left 50%;
   }
div.maintitle .expand,div.maintitle .contract {
   float: right;
   width: 10px;
   height: 10px;
   background: url('http://i83.servimg.com/u/f83/13/73/57/65/1811.png') no-repeat 50% 50%;
   cursor: pointer;
   }
div.maintitle .expand {
   background: url('http://i83.servimg.com/u/f83/13/73/57/65/1711.png') no-repeat 50% 50%;
   }



.popmenubutton a {
        margin-left: -8.8px;
        margin-right: 1px;
        width: 62px;
   display: inline-block;
   padding: 2px 80px 2px 8px;
   background-image: url('http://i83.servimg.com/u/f83/13/73/57/65/f210.png');
   background-position: 97% 50%;
   background-repeat: no-repeat;
   font-size: 11px;
   font-weight: bold;
   text-align: left;
   white-space: nowrap;
   text-decoration: none;
}


.row3 {
   background-color: #616161;
   background-image: url('http://fr2.guerretribale.fr/graphic/background/content.jpg');
background-repeat: repeat;
background-position: top left;
}
.row3:hover {
   background-color: #808080;
   background-image: url('http://i61.servimg.com/u/f61/14/01/56/38/row2_h10.png');
        background-repeat: repeat;
        background-position: top left;
}
.row2 {
   background-color: #616161;
   background-image: url('http://fr2.guerretribale.fr/graphic/background/content.jpg');
        background-repeat: repeat;
        background-position: top left;
   }
.row2:hover { margin-left: -20px;
background-color: #F7EED3;
background-image: url('http://i61.servimg.com/u/f61/14/01/56/38/row2_h10.png');
background-repeat: repeat;
background-position: top left;
}
.row1 {
   background-color: #616161;
   background-image: url('http://fr2.guerretribale.fr/graphic/background/content.jpg');
background-repeat: repeat;
background-position: top left;
}
.row1:hover {
   background-color: #808080;
   background-image: url('http://i61.servimg.com/u/f61/14/01/56/38/row2_h10.png');
        background-repeat: repeat;
        background-position: top left;
   }
.ipbform2 dl dd {
   background-color: #F7EED3;
        background-repeat: repeat;
        background-position: top left;
   }
.ipbform2 dl dd:hover {
background-color: #F0D49A;
background-repeat: repeat;
background-position: top left;
}

#gfooter {
   background-color: #804000;
   color: #fff;
        background-repeat: repeat;
        background-position: top left;
   }



ul.tabs.primary,
ul.tabs.secondary {
width: 700px;
white-space: normal;
}

ul.tabs.primary li,
ul.tabs.secondary li { margin:0;
padding:0;
display:inline;
white-space: nowrap;
}         









.postprofile-details dt {
    font-size: 0;
}

I have sent you a PM Alexed.

thank you so much !! I really appreciate your help
I disabled my optimize CSS option and it's working now
but there is a little thing that bothers me, I used color: gray; to change the color of the text from black to gray but it didn't work
here is the code

Code:

#submenu {
    float: left;
   
    background-image: -moz-linear-gradient(center top , #E0E0E0, #F6F6F6);
    background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#F6F6F6));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E0E0E0, endColorstr=#F6F6F6);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E0E0E0, endColorstr=#F6F6F6)";
    margin-left: -5px;
    margin-right: -5px; 
    font-family:Umpush;
    line-height:12.5px;
    font-size:11.6px;
    color: gray;
height:12px;
text-transform:uppercase;
}


It's this part, find it in your CSS and change color.

Code:

#submenu ul li a {
    color: #000000;
    margin: 0.5em 1em 0.65em 0;
    padding: 0.5em 1em 0.65em 0;
    text-decoration: none;
}

thank you so much Nera

Welcome Alexed.

Solved > Locked