Login | Iscriviti | FAQ
Anonymous

Navigation Bar-CSS

+ Rispondi al messaggio

2 messaggi Pagina 1 di 1


Navigation Bar-CSS

da bhawna » lun dic 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
Codice: Seleziona tutto
#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:

Codice: Seleziona tutto
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 utente

bhawna

  • Messaggi: 1
  • Iscritto il: lun dic 01, 2014 7:12 pm

Re: Navigation Bar-CSS

da XainPro » lun dic 08, 2014 7:04 am

that's how it work :0
Avatar utente

XainPro

  • Messaggi: 3933
  • Iscritto il: ven feb 17, 2012 8:10 pm


+ Rispondi al messaggio

Pagina 1 di 1