API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 23rd, 2014
160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.99 KB | None | 0 0
raw download clone embed print report
  1. <div id="nav-container">
  2.  
  3. <div id="nav-box" class="animated fadeInDown">
  4.  
  5. <a class="btn rounded butter" href="#">Start Dinating</a>
  6. <a class="btn rounded butter" href="#">Follow Us</a>
  7. <a class="btn rounded butter" href="#"><i class="icon-facebook"></i></a>
  8. <a class="btn rounded butter" href="#"><i class="icon-twitter"></i></a>
  9. <a class="btn rounded butter" href="#"><i class="icon-instagram"></i></a>
  10. <a class="list-group-item" href="#"></a>
  11. <img src="http://www.jshuadvd.com/test/wp-content/uploads/2014/11/logo.png" alt="Dinate" width="199" height="204">
  12. <a class="btn2 rounded butter" href="#">Merchandise</a>
  13. <a class="btn2 rounded butter" href="#"><i class="icon-lock"></i>Log In / Register</a>
  14. <a class="btn2 rounded butter" href="#"><i class="icon-shopping-cart"></i>View Tab</a>
  15.  
  16. </div>
  17.  
  18. <nav id="second-nav">
  19.  
  20. <div id="nav-left">
  21. <ul>
  22. <li><a href="#">HOME </a></li>
  23. <li><a href="#">OUR RESTAURAUNTS </a></li>
  24. <li><a href="#">DINATING EVENTS </a></li>
  25. </ul>
  26. </div>
  27.  
  28. <div id="nav-right">
  29. <ul>
  30. <li><a href="#">CONTACT </a></li>
  31. <li><a href="#">BLOG </a></li>
  32. <li><a href="#">CHARITES </a></li>
  33. </ul>
  34. </div>
  35.  
  36. </nav>
  37. </div>
  38. </div>
  39.  
  40. #nav-container {
  41. height: 180px;
  42. text-decoration: none;
  43. font-size: 15px;
  44. font-family: helvetica, arial, sans-serif;
  45. text-transform: uppercase;
  46. }
  47.  
  48.  
  49. @media screen and (max-width: 1200px){
  50. #nav-container {
  51. box-sizing: border-box;
  52. width:100%;
  53. text-align: center;
  54. font-size: 12px;
  55. }
  56. }
  57.  
  58.  
  59. #nav-box {
  60. position: relative;
  61. background: #222;
  62. text-align: center;
  63. width: 100%;
  64. height: 50px;
  65. z-index: 2000;
  66. padding-top: 0px;
  67. padding-bottom: 5px;
  68. line-height: 0;
  69.  
  70. }
  71.  
  72.  
  73. @media screen and (max-width: 1200px){
  74. #nav-box {
  75. box-sizing: border-box;
  76. width:100%;
  77. text-align: center;
  78. }
  79.  
  80. }
  81.  
  82.  
  83. #nav-box img {
  84. position: absolute;
  85. top: 0;
  86. left: 50%;
  87. margin-left: -100px;
  88. }
  89.  
  90.  
  91. @media screen and (max-width: 1200px){
  92. #nav-box img {
  93. display: none;
  94.  
  95. }
  96.  
  97. }
  98.  
  99.  
  100.  
  101. /* --------------------- BUTTTONS ------------------- */
  102.  
  103.  
  104.  
  105. .btn {
  106. overflow: hidden;
  107. position: relative;
  108. display: inline-block;
  109. height: 2em;
  110. line-height: 2em;
  111. padding: 0 1em;
  112. left: -7.5%;
  113. margin: 10px 30px 0 0;
  114. -moz-transition: color 400ms;
  115. -o-transition: color 400ms;
  116. -webkit-transition: color 400ms;
  117. transition: color 400ms;
  118. }
  119.  
  120.  
  121. @media screen and (max-width: 1200px){
  122. .btn {
  123. box-sizing: border-box;
  124. width:100%;
  125. text-align: center;
  126. font-size: auto;
  127. }
  128.  
  129. }
  130.  
  131.  
  132. .btn2 {
  133. overflow: hidden;
  134. position: relative;
  135. display: inline-block;
  136. height: 2em;
  137. line-height: 2em;
  138. padding: 0 1em;
  139. left: 9.8%;
  140. margin: 10px 30px 0 0;
  141. -moz-transition: color 400ms;
  142. -o-transition: color 400ms;
  143. -webkit-transition: color 400ms;
  144. transition: color 400ms;
  145. }
  146.  
  147.  
  148. @media screen and (max-width: 1200px){
  149. .btn2 {
  150. box-sizing: border-box;
  151. width:100%;
  152. text-align: center;
  153. font-size: auto;
  154. }
  155.  
  156. }
  157.  
  158.  
  159. .btn:before {
  160. content: '';
  161. position: absolute;
  162. z-index: -1;
  163. height: 0%;
  164. width: 100%;
  165. bottom: 0;
  166. left: 0;
  167. -moz-transition: height 100ms;
  168. -o-transition: height 100ms;
  169. -webkit-transition: height 100ms;
  170. transition: height 100ms;
  171. }
  172.  
  173. @media screen and (max-width: 1200px){
  174. .btn:before {
  175. box-sizing: border-box;
  176. width:100%;
  177. text-align: center;
  178. }
  179.  
  180. }
  181.  
  182.  
  183. .btn2:before {
  184. content: '';
  185. position: absolute;
  186. z-index: -1;
  187. height: 0%;
  188. width: 100%;
  189. bottom: 0;
  190. left: 0;
  191. -moz-transition: height 100ms;
  192. -o-transition: height 100ms;
  193. -webkit-transition: height 100ms;
  194. transition: height 100ms;
  195. }
  196.  
  197.  
  198. @media screen and (max-width: 1200px){
  199. .btn2:before {
  200. box-sizing: border-box;
  201. width:100%;
  202. text-align: center;
  203. }
  204.  
  205. }
  206.  
  207.  
  208.  
  209. .btn:hover {
  210. color: #A4C739;
  211. border-color: #A4C739;
  212. }
  213.  
  214.  
  215. .btn2:hover {
  216. color: #A4C739;
  217. border-color: #A4C739;
  218. }
  219.  
  220.  
  221. .btn:hover:before {
  222. height: 100%;
  223. }
  224.  
  225.  
  226. .btn2:hover:before {
  227. height: 100%;
  228. }
  229.  
  230. .rounded {
  231. border-radius: 2em;
  232. }
  233.  
  234. @media screen and (max-width: 1200px){
  235. .rounded {
  236. box-sizing: border-box;
  237. border-radius: auto;
  238. width:auto;
  239.  
  240. }
  241.  
  242. }
  243.  
  244. .butter {
  245. color: white;
  246. border: 3px solid white;
  247. border-radius: 2em;
  248. }
  249.  
  250. @media screen and (max-width: 1200px){
  251. .butter {
  252. box-sizing: border-box;
  253. border-radius: auto;
  254. width:auto;
  255.  
  256. }
  257.  
  258. }
  259.  
  260.  
  261. .butter:before {
  262. background-color: #A4C739;
  263. }
  264.  
  265. @media screen and (max-width: 1200px){
  266. .butter:before {
  267. box-sizing: border-box;
  268. width:auto;
  269.  
  270. }
  271.  
  272. }
  273.  
  274. .butter:hover {
  275. color: white;
  276. border-color: white;
  277. }
  278.  
  279.  
  280.  
  281. /* ---------------- SOCIAL NAV ICONS ------------------ */
  282.  
  283. .icon-facebook {
  284. margin-left: -10px;
  285. margin-right: -10px;
  286. }
  287.  
  288. @media screen and (max-width: 1200px){
  289. .icon-facebook {
  290. box-sizing: border-box;
  291. width: auto;
  292. }
  293.  
  294. }
  295.  
  296. .icon-twitter {
  297. margin-left: -10px;
  298. margin-right: -10px;
  299. }
  300.  
  301. @media screen and (max-width: 1200px){
  302. .icon-twitter {
  303. box-sizing: border-box;
  304. width:auto;
  305. }
  306.  
  307. }
  308.  
  309. .icon-instagram {
  310. margin-left: -10px;
  311. margin-right: -10px;
  312. }
  313.  
  314. @media screen and (max-width: 1200px){
  315. .icon-instagram {
  316. box-sizing: border-box;
  317. width: auto;
  318. }
  319.  
  320. }
  321.  
  322.  
  323. /* ---------------- BUTTON ICONS ------------------ */
  324.  
  325. .icon-shopping-cart {
  326. margin-right: 6px;
  327. margin-left: -4px;
  328. }
  329.  
  330. @media screen and (max-width: 1200px){
  331. .icon-shopping-cart {
  332. box-sizing: border-box;
  333. width:auto;
  334. }
  335.  
  336. }
  337.  
  338. .icon-lock {
  339. margin-right: 5px;
  340. margin-left: -4px;
  341. }
  342.  
  343.  
  344. @media screen and (max-width: 1200px){
  345. .icon-lock {
  346. box-sizing: border-box;
  347. width:auto;
  348. }
  349.  
  350. }
  351.  
  352.  
  353. .clear {
  354. clear: both;
  355.  
  356. }
  357.  
  358.  
  359. /* ---------------- BUTTONS END ------------------ */
  360.  
  361.  
  362. /* ---------------- SECOND NAV ------------------- */
  363. #second-nav {
  364. width: 100%;
  365. text-align: center;
  366. font-size: 15px;
  367. font-family: helvetica, arial, sans-serif;
  368. text-transform: uppercase;
  369. z-index: 999;
  370. }
  371.  
  372.  
  373.  
  374. @media screen and (max-width: 1200px){
  375. #second-nav {
  376. box-sizing: border-box;
  377. width:100%;
  378. text-align: center;
  379. font-size: 12px;
  380. }
  381.  
  382. }
  383.  
  384.  
  385. /* ----------------- LEFT NAV ------------------- */
  386.  
  387.  
  388. #nav-left {
  389. z-index: 1;
  390. margin-bottom: -92px; /* nav height */
  391. padding: 5px 60px;
  392. background: #000;
  393. transition: box-shadow 400ms;
  394. }
  395.  
  396. @media screen and (max-width: 1200px){
  397. #nav-left {
  398. box-sizing: border-box;
  399. width:100%;
  400. text-align: center;
  401. }
  402.  
  403. }
  404.  
  405. #nav-left ul {
  406. margin:0 auto;
  407. width:100%;
  408. list-style: none;
  409. *zoom: 1;
  410. }
  411.  
  412.  
  413. @media screen and (max-width: 1200px){
  414. #nav-left ul {
  415. box-sizing: border-box;
  416. width:100%;
  417. text-align: center;
  418. }
  419.  
  420. }
  421.  
  422. #nav-left ul:after {
  423. clear:both;
  424. display: table;
  425. content: "";
  426. }
  427.  
  428.  
  429. @media screen and (max-width: 1200px){
  430. #nav-left ul:after {
  431. box-sizing: border-box;
  432. width:100%;
  433. text-align: center;
  434. }
  435.  
  436. }
  437.  
  438.  
  439. #nav-left li {
  440. float: left;
  441. text-align: center;
  442. padding: 0 45px;
  443. -webkit-border-radius: 4px;
  444. -moz-border-radius: 4px;
  445. border-radius: 4px;
  446. list-style: none;
  447. border-left:1px solid #222;
  448. }
  449.  
  450.  
  451. @media screen and (max-width: 1200px){
  452. #nav-left li {
  453. box-sizing: border-box;
  454. width:100%;
  455. text-align: center;
  456. border: none;
  457. }
  458.  
  459. }
  460.  
  461.  
  462. #nav-left li:first-child {
  463. border-left: 0;
  464. padding-left: 0;
  465. }
  466.  
  467.  
  468. #nav-left a {
  469. position: relative;
  470. display:block;
  471. color: #fff;
  472. padding: 40px 0;
  473. line-height: 1px;
  474. text-decoration: none;
  475. -moz-border-radius: 4px;
  476. -webkit-border-radius: 4px;
  477. border-radius: 4px;
  478. }
  479.  
  480.  
  481. @media screen and (max-width: 1200px){
  482. #nav-left a {
  483. box-sizing: border-box;
  484. width:100%;
  485. border: none;
  486. }
  487.  
  488. }
  489.  
  490. #nav-left a:hover {
  491. color: #A4C739;
  492. }
  493.  
  494.  
  495. .clear {
  496. clear: both;
  497.  
  498. }
  499.  
  500.  
  501. /* --------------- RIGHT NAV ---------------- */
  502.  
  503. #nav-right {
  504. z-index: 1;
  505. margin-bottom: -72px; /* nav height */
  506. padding: 0 120px;
  507. background: #000;
  508. transition: box-shadow 400ms;
  509. }
  510.  
  511. @media screen and (max-width: 1200px){
  512. #nav-right {
  513. box-sizing: border-box;
  514. width:100%;
  515. text-align: center;
  516. }
  517.  
  518. }
  519.  
  520.  
  521. #nav-right ul {
  522. margin:0 auto;
  523. width:100%;
  524. list-style: none;
  525. *zoom: 1;
  526. }
  527.  
  528. @media screen and (max-width: 1200px){
  529. #nav-right ul {
  530. box-sizing: border-box;
  531. width:100%;
  532. text-align: center;
  533. }
  534.  
  535. }
  536.  
  537. #nav-right ul:after {
  538. clear:both;
  539. display: table;
  540. content: "";
  541. }
  542.  
  543. @media screen and (max-width: 1200px){
  544. #nav-right ul:after {
  545. box-sizing: border-box;
  546. width:100%;
  547. text-align: center;
  548. }
  549.  
  550. }
  551.  
  552. #nav-right li {
  553. float: right;
  554. text-align: center;
  555. padding: 0 45px ;
  556. -webkit-border-radius: 4px;
  557. -moz-border-radius: 4px;
  558. border-radius: 4px;
  559. list-style: none;
  560. border-right:1px solid #222;
  561. }
  562.  
  563.  
  564. @media screen and (max-width: 1200px){
  565. #nav-right li {
  566. box-sizing: border-box;
  567. width:100%;
  568. text-align: center;
  569. border: none;
  570. }
  571.  
  572. }
  573.  
  574. #nav-right li:first-child {
  575. border-right: 0;
  576. padding-right: 0;
  577.  
  578. }
  579.  
  580.  
  581. #nav-right a {
  582. position: relative;
  583. display:block;
  584. color: #fff;
  585. padding: 40px 10px;
  586. line-height: 1px;
  587. text-decoration: none;
  588. -moz-border-radius: 4px;
  589. -webkit-border-radius: 4px;
  590. border-radius: 4px;
  591. }
  592.  
  593.  
  594. @media screen and (max-width: 1200px){
  595. #nav-right a {
  596. box-sizing: border-box;
  597. width:100%;
  598. text-align: center;
  599. border: none;
  600. }
  601.  
  602. }
  603.  
  604. #nav-right a:hover {
  605. color: #A4C739;
  606. /* -moz-box-shadow: 0 0 0 1px #fff;
  607. -webkit-box-shadow: 0 0 0 1px #fff;
  608. box-shadow: 0 0 1px 1px #fff; */
  609. }
  610.  
  611.  
  612. .fixed {
  613. position:fixed !important;
  614. }
  615.  
  616.  
  617.  
  618. .clear {
  619. clear: both;
  620. }
  621.  
  622. <!------------Begin JavaScript Functions for Fixed Header-------->
  623.  
  624. <script type='text/javascript'>
  625. jQuery(document).ready(function($){
  626. var aboveHeight = $('#slider').outerHeight();
  627. $(window).scroll(function(){
  628. if ($(window).scrollTop() > aboveHeight){
  629. $('#nav-box').addClass('fixed').css('top','0').next().css('margin-top','55px');
  630. } else {
  631. $('#nav-box').removeClass('fixed').next().css('margin-top','0');
  632. }
  633.  
  634. });
  635. $(window).scroll(function(){
  636. if ($(window).scrollTop() > aboveHeight){
  637. $('#second-nav').addClass('fixed').css('top','0').next().css('margin-top','40px');
  638. } else {
  639. $('#second-nav').removeClass('fixed').next().css('margin-top','0');
  640. }
  641.  
  642. });
  643. });
  644.  
  645.  
  646. </script>
  647.  
  648. <!------------End JavaScript Functions for Fixed Header---------->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!