html - Gradient across nav, not li -
for reason, i'm having trouble applying gradient horizontally across nav bar. makes element disappear, ok when apply li. what's going on? can take @ site @ http://jcdevelopmentsite.com/spaoftheearth/index-spa.html
html
<!doctype html> <html lang='en-us'> <html> <head> <meta charset='utf-8'/> <title>homepage | spa of earth</title> <link rel='icon' type='image/png' href='images/favicon.png'/> <meta name='keywords' content='spa of earth, spa, massage, facial, treatment, mud, organic, natural'> <meta name='description' content='luscious spa services including facials, body wraps, etc'> <link rel='stylesheet' type='text/css' href='styles.css'> <link rel='stylesheet' type='text/css' href='styles-home.css'> <script src='jquery-awesomeness.js'></script> <!-- slider link --> <script src='responsiveslides.min.js'></script> <!-- social media plugins sharethis.com --> <script type='text/javascript'>var switchto5x=true;</script> <script type='text/javascript' src='http://w.sharethis.com/button/buttons.js'></script> <script type='text/javascript' src='http://s.sharethis.com/loader.js'></script> <script> // slider functions $(function() { $('.rslides').responsiveslides({ speed: 750, timeout: 3000 }); }); </script> </head> <body> <!-- header --> <header id='home'> <img id='header-logo' src='images/header-logo.jpg' alt='logo: spa of earth'> </header> <!-- nav --> <nav role='navigation'> <ul id='menu'> <li><a href='index-spa.html'>home</a> <ul> <li><a href='#specials'>specials</a></li> </ul> </li> <li><a href='appointments.html'>appointments</a> <ul class='submenu'> <li><a href='#facials'>facials</a></li> <li><a href='#body'>body</a></li> <li><a href='#oncology'>oncology</a></li> <li><a href='#ayurveda'>ayurveda</a></li> <li><a href='#energy'>energy work</a></li> <li><a href='#divination'>divination</a></li> </ul> </li> <li><a href='events.html'>events</a> <ul class='submenu'> <li><a href='#reiki'>reiki</a></li> <li><a href='#evens'>special events</a></li> </ul> </li> <li><a href='about.html'>about us</a> <ul class='submenu'> <li> <a href='http://jcdevelopmentsite.com/spaoftheearth/about.html#wiesje'>wiesje brion</a> </li> <li><a href='#media'>media</a></li> <li><a href='#testimonials'>testimonials</a></li> <li><a href='contact.html'>contact</a></li> </ul> </li> <li><a href='help.html'>help</a> <ul class='submenu'> <li><a href='#policies'>policies</a></li> <li><a href='#privacy'>privacy notice</a></li> <li><a href='#faq'>faq</a></li> </ul> </li> <li><a href='blog.html'>blog</a> <ul class='submenu'> <li><a href='#homebeauty'>home beauty</a></li> <li><a href='#astrology'>astrology</a></li> </ul> </li> </ul> </nav> <!-- #welcome --> <section id='welcome'> <div id='slider'> <ul class='rslides'> <li><img src='images/slide1.jpg'></li> <li><img src='images/slide2.jpg'></li> <li><img src='images/slide3.jpg'></li> <li><img src='images/slide4.jpg'></li> </ul> <img id='frame' src='images/sliderframe.png'> </div> <div class='content'> <h2>treat natural, soul pleasing experience!</h2> <p>at spa of earth, specialize in naturopathic healing inspired ancient ayurvedic principles. tailor our holistic treatments dosha type, targeting spirit amd individuality. restore, rejuvenate , balance best wild-crafted botanical treatments available, hand-made spa of earth. </p> <br> <p>schedule appointment today extraordinary experience in beauty, skin care , wellness. </p> </div> <!-- closes #content --> </section> <!-- social media plugin sharethis.com --> <script type='text/javascript'>stlight.options({publisher: '69520918-4da3-4dbc-aa1c-ceb74de78ee9', donothash: false, donotcopy: false, hashaddressbar: false}); </script> <script> var options={ 'publisher': '69520918-4da3-4dbc-aa1c-ceb74de78ee9', 'position': 'right', 'ad': { 'visible': false, 'opendelay': 5, 'closedelay': 0}, 'chicklets': { 'items': ['facebook', 'twitter']}}; var st_hover_widget = new sharethis.widgets.hoverbuttons(options); </script> <!-- closes social media plugin --> <!-- jquery dropdown menu --> <script> var timer; $('.parent').on('mouseover', function() { cleartimeout(timer); opensubmenu(); }).on('mouseleave', function() { timer = settimeout( closesubmenu , 1000); }); function opensubmenu() { $('.submenu').addclass('open'); } function closesubmenu() { $('.submenu').removeclass('open'); } </script> </body> </html> css
/* ========================= primary css styles spa of earth ========================= */ /* ============================== basic reset ============================== */ * { margin: 0; padding: 0; font-family: 'champagne__limousinesregular'; color: #7a7a7a; } /* ============================== begin css styles ============================== */ /* ============================== web font kits ============================== */ @font-face { font-family: 'bebasregular'; src: url('fonts/bebas/bebas___-webfont.eot'); src: url('fonts/bebas/bebas___-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/bebas/bebas___-webfont.woff') format('woff'), url('fonts/bebas/bebas___-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'champagne__limousinesregular'; src: url('fonts/champagne/champagne__limousines-webfont.eot'); src: url('fonts/champagne/champagne__limousines-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/champagne/champagne__limousines-webfont.woff') format('woff'), url('fonts/champagne/champagne__limousines-webfont.ttf') format('truetype'), url('fonts/champagne/champagne__limousines-webfont.svg#champagne__limousinesregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'chopinscriptmedium'; src: url('fonts/chopin/chopinscript-webfont.eot'); src: url('fonts/chopin/chopinscript-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/chopin/chopinscript-webfont.woff2') format('woff2'), url('fonts/chopin/chopinscript-webfont.woff') format('woff'), url('fonts/chopin/chopinscript-webfont.ttf') format('truetype'), url('fonts/chopin/chopinscript-webfont.svg#chopinscriptmedium') format('svg'); font-weight: normal; font-style: normal; } /* ============================== structural styles ============================== */ header { width: 100%; } /* ============================== nav styles ============================== */ nav { display: block; font-family: 'champagne__limousinesregular'; } nav ul { list-style: none; text-align: center; } nav li { width: 14.666%; padding: 1%; background: -webkit-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* safari 5.1 6.0 */ background: -o-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* opera 11.1 12.0 */ background: -moz-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* firefox 3.6 15 */ background: linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* standard syntax */ display: block; float: left; position: relative; text-decoration: none; text-transform: uppercase; } nav li { color: #ffffff; text-decoration: none; display: block; } nav li:hover { @include transition(background, 0.2s); cursor: pointer; } nav ul li ul { width: 95%; padding-top: 5%; visibility: hidden; float: left; min-width: 150px; position: absolute; transition: visibility 0.65s ease-in; left: 0; z-index: 999; } nav ul li:hover > ul, nav ul li ul:hover { visibility: visible; } nav ul li ul li { clear: both; padding: 5px 0 5px 18px; width: 100%; } nav ul li ul li:hover { background: #aaaaaa; } /* ============================== submenu styles ============================== */ /* ============================== main content ============================== */ .content { width: 90%; padding: 0 5%; font-family: 'arial'; font-size: 1em; line-height: 2em; letter-spacing: .2em; } /* ============================== typographic styles ============================== */ h2 { margin-bottom: 3%; font-size: 'chopinscriptmedium'; font-size: 1.75em; text-align: right; letter-spacing: .1em; color: #009b9c; } p { font-size: 1.2em; }
try
- navbar
display: inline-block; - navbar
width: 100%; - and add gradient sub menu items(nav>li>ul) , remove menu items(nav>li)
nav { display: inline-block; background: -webkit-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* safari 5.1 6.0 */ background: -o-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* opera 11.1 12.0 */ background: -moz-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* firefox 3.6 15 */ background: linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* standard syntax */ font-family: 'champagne__limousinesregular'; } nav ul { list-style: none; text-align: center; } nav li { width: 14.666%; padding: 1%; display: block; float: left; position: relative; text-decoration: none; text-transform: uppercase; } nav li { color: #ffffff; text-decoration: none; display: block; } nav li:hover { @include transition(background, 0.2s); cursor: pointer; } nav ul li ul { width: 95%; margin-top: 5%; padding-top: 5%; visibility: hidden; float: left; min-width: 150px; position: absolute; transition: visibility 0.65s ease-in; left: 0; z-index: 999; background: -webkit-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* safari 5.1 6.0 */ background: -o-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* opera 11.1 12.0 */ background: -moz-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* firefox 3.6 15 */ background: linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* standard syntax */ } nav ul li:hover > ul, nav ul li ul:hover { visibility: visible; } nav ul li ul li { clear: both; padding: 5px 0 5px 18px; width: 100%; } nav ul li ul li:hover { background: #aaaaaa; } /* ============================== submenu styles ============================== */
Comments
Post a Comment