gerah
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by gerah
-
-
good day!
so im working on a certain parallax website, newbie here aneways. The problem is i want my navigation bar to be transparent just like this site : http://www.xplaye.com/en/ i tried using opacity and background :transparent but it does not work at all. it only gives me a navigation that has a white background and i really want it to be transparent as if menu items were floating.
anyone who has an idea? answers are greatly appreciated. thanks a lot CHEERS!
heres my css :
.nav{ height: 40px; width:auto;}.nav ul li{ list-style:none; text-decoration:none; display: inline-block; padding: 10px; padding-right:20px; float: right; }.nav ul li a { text-decoration: none; color:#FFF; font-family:Calibri; }.nav ul li a:hover { color: #6be0d6;}.nav ul li a:active{ color: #6be0d6; } -
@scout1idf
Thanks a lot!! it works
ur so great:)
CHEERS!
-
Good day!how can i get rid of those extra space on my dropdwon menus? (see attachment) any ideas?thanks a lot! Cheers!neways heres my code
<div class="nav"> <ul> <li>Contacts</li> <li>e-Book</li> <li>Blog</li> <li>Projects <ul> <li>On-going Projects List</li> <li>Completed Project List</li> <li>Project Gallery</li> </ul></li> <li><a href="services.html">Our Services</a> <ul> <li>Industrial Commercial Residential</li> <li>Supply and Installation</li> </ul> </li> <li><a href="about.html">About Us</a> <ul> <li><a href="general.html">General Information</a></li> <li>Organizational Chart</li> <li>Executive Team</li> <li>Business Objective</li> <li>Affiliate</li> <li>Vehicles & Equipment</li> <li>Contractor Liscense</li> <li>Commendations</li> <li>Bonding Capability</li> <li>Location Map</li> <li>Career</li> <li>Testimonial</li> </ul></li> <li><a href="index.html">Home</a></li> </ul> </div>
.nav{ padding-top: 50px; margin-right: 10%; color:#666; text-decoration: none; } .nav ul li{ float:right; display: inline-block; text-decoration: none; padding: 10px; }.nav ul li a:link{ text-decoration:none; color:#333;}.nav ul li:hover{ color:#fad814; }.nav ul li a:active{ color: #fad814;}.nav ul li a:visited{ color: #666;}.nav ul ul { visibility: hidden; position: absolute; top: 120px; display: block; background-color: #444; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; transition: all .2s ease-in-out; padding-bottom:1px; margin: 10px 0px 0px 0px;}.nav ul li:hover > ul { opacity: 1; visibility: visible; margin:0px; z-index: 30; display: block; }.nav ul li ul li{ margin-left: 0px; list-style:none; text-decoration:none; float:none; display: block; border: 0; box-shadow: 0 1px 0 #111, 0 2px 0 #666; color: white;}.nav ul li ul li:hover{ background-color:#FC0; color:white; }.nav ul li ul li a:visited{ color: white !important;}.nav ul li ul li:first-child{ border-top-right-radius:5px; -moz-border-top-right-radius:5px; -webkit-border-top-right-radius:5px;}.nav ul li ul li:last-child{ border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; box-shadow: 0 0px 0 #111, 0 0px 0 #666;}.nav ul li ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;}
Transparent Navigation Bar
in CSS
Posted
hello Ryan! thanks
ive solve the problem
i dont know what exactly happen but when i applied this code it turns out OK.
check this code:
.nav{ height: 40px; width:auto;height: 40px;width:auto;position:fixed;z-index: 100;}