Zaloguj | Zarejestruj | FAQ
Anonymous

Navigation Bar-CSS

+ Odpowiedz

Posty: 2 Strona 1 z 1


Navigation Bar-CSS

przez bhawna » Pn gru 01, 2014 7:18 pm

My navigation bar is working file on full size of browser but when i am resizing the browser the menu item comes down..as the browser size becomes small menu simultaneously menu item coming down..I want it doesn't comes down even on resizing.please suggest something.
Below is my code:

My CSS Code
Kod: Zaznacz cały
#Hr-4 {
list-style:none;
margin:10px;
padding:0;
float:left;
margin-left:166px;
position:relative;
margin-right:100px;


}
#Hr-4 li {
margin:0;
padding:0;
float:left;
}
#Hr-4 li a {
white-space:nowrap;
display:inline;
float:left;
overflow:hidden;
margin:0;
width:auto;
height:auto;
padding:10px 10px;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-style:normal;
font-weight:bold;
font-size:25px;
border-right:1px dotted #1C1C1C;
color:#ECECEC;
font-family:'Comic Sans MS',cursive;
background:#2C2C2C;
background:-webkit-gradient(linear,left top,right bottom,from(#101010),color-stop(0.35 #2C2C2C),color-stop(0.73 #545252),color-stop(0.90 #3F3C3C),to(#2A2727));
background:-webkit-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-moz-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-o-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-ms-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
}
#Hr-4 li:first-child a {
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
}
#Hr-4 li:last-child a {
-moz-border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
border-radius:0 8px 8px 0;
}
#Hr-4  li a:hover,#Hr-4  li a:focus {
background:#2C2C2C;
color:#4A75F7;
cursor:pointer;
}



html code:

Kod: Zaznacz cały
ul id="Hr-4" style="overflow:hidden">
<li><a href="http://www.spacetravel.com" title="Home">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Social media</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Advertise</a></li>
</ul>
Avatar użytkownika

bhawna

  • Posty: 1
  • Dołączył(a): Pn gru 01, 2014 7:12 pm

Re: Navigation Bar-CSS

przez XainPro » Pn gru 08, 2014 7:04 am

that's how it work :0
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm


+ Odpowiedz

Strona 1 z 1