Search the Community
Showing results for tags 'nav'.
-
Hey guys, I want to put a icon.png on the navigation as a logo but somehow it is below the nav and not shown. Can anyone tell me how to solve this? https://codepen.io/andy4117/pen/KKpXEwJ Thank you in advance!
-
Hi, I've been working on my website, stumbled on a issue. I want my nav bar to stick at top as a user scrolls down the page. I can't seem to resolve it. A little help will be greatly appreciated. Code is in the spoiler:- <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Portfolio</title> <link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <header> <div class="primary_header"> <h1 class="title"> Hello,<br> MY NAME IS <br> Ashish<br> & <br>I'M A UX DESIGNER</h1> </div> <div> <nav class="secondary_header" id="menu"> <ul> <li><a class="active" href="#about">ABOUT</a></li> <li><a href="#ux_learning">MY UX LEARNING</a></li> <li><a href="#ux_process">UX PROCESS</a></li> <li><a href="#design">DESIGN</a></li> <li><a href="#contact">CONTACT</a></li> </ul> </nav> </div> </header> <section id="about"> <h2 class="noDisplay">Main Content</h2> <article class="left_article"> <h3 align="center">ABOUT</h3> <p>Raised in the beauty and calmness of the mountains, I vowed to fight ugly and un-understandable interfaces and battle confusion in websites.</p> <p>I love open access to information, video games, reading, learning new things, guitar, technology, football, etc...</p> <p>At work, I drive UI requirements from concept to release. I define features, user flows, content and error conditions.</p> <p>My goal is to ship funny, beautiful experiences.<br><br></p> </article> <aside class="right_article"><h3 align="center">Skills</h3><!-- <img src="images/placeholder.jpg" alt="" width="400" height="200" class="placeholder"/>--> <ul> <li>User Experience</li> <li>Information Architecture </li> <li>UX Research</li> <li>Visual Design</li> <li>Code</li> <li>Copy and Content</li> </ul></aside> </section> <section> <div class="row" id="ux_learning"> <h3 align="center">MY UX LEARNING</h3> <div class="columns"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>YOUTUBE</h4> <p>My journey basically started on youtube, watching all kinds of videos on UX, whatever I can get. Got interested in it from here. </p> </div> <div class="columns"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>COURSES</h4> <p>Then to learn more, I did online courses on Skillshare, and then moved on Linkin Learning for really getting to it. The Courses on it completely changed my view on things.</p> </div> <div class="columns"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>BOOKS</h4> <p>To further my progress on UX, I started reading books on UX. Started with Don't make me think, to EVIL by Design, Understanding Color, Design for Hackers, The Design of Everyday things, etc... </p> </div> <br> <div class="columns last" align="center"> <h5 align="center"><br>After these I now only see UX, nothing else. </h5></div> <div class="columns"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>FAKE PROJECTING</h4> <p>I started doing fake projects to really understand, why some things just works, and some just don't.</p> </div> <div class="columns"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>PSYCHOLOGY</h4> <p>Started getting into PSYCHOLOGY as well, cause it's the only thing that is able to explain all these things.</p> </div> <div class="columns"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>FROM BEST AND WROST DESIGNS</h4> <p>Started looking into other Designs, what makes them work, Why people like something, and don't something else, What is the most essential and what can be improved later?; etc...</p> </div> <div class="columns last"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>UX IS EVERYTHING</h4> <p align="center">Now, There is not a single thing in this planet that can't be improved by UX. And I ready to give my everything to improve anything to make this world a better place.</p> </div> </div> </section> <div class="row" id="ux_process"> <h3 align="center">MY UX PROCESS</h3> <div class="columns"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>ANALYZING USER DATA</h4> <p>Who are my users? What are their challenges? How can my design solve their needs? This is how I get started.</p> </div> <div class="columns"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>CREATING PERSONAS</h4> <p>Who am I developing for? How will they use my design? Building user personas helps me answer these questions.</p> </div> <div class="columns"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>PROTOTYPING</h4> <p>Prototyping allows me to quickly and inexpensively explore mutliple iterations of designs. Prototypes are great for quickly getting on getting feedback and testing.</p> </div> <div class="columns"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>IDEATION</h4> <p>Ideation helps me for generating a lot of different design ideas form my team to get us going in shortest amount of time as possible. It is the part of the whole process that I love the most.</p> </div> <div class="columns"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>SCENARIOS AND STORYBOARDS</h4> <p>Scenarios and storyboards provide a reality check for my designs, helping me identify design gaps and articulate exactly what features I need to build to make users happy. </p> </div> <div class="columns"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>PAPER PROTOTYPING</h4> <p>Paper prototyping is fast and inexpensive, allowing me to test design ideas early as possible.</p> </div> <div class="columns last"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>IMPLEMENTATION PLANNING</h4> <p align="center">At last, planning how the design is going to be implemented and put into reality. And then executing the plan.</p> </div> </div> <div class="row design" id="design"> <h3 align="center">DESIGN</h3> <div class="columns design"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>INFORMATION ARCHITECTURE</h4> <p>I can do the strange and multidisciplinary work of Information Architect.</p> </div> <div class="columns design"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>VISUAL DESIGN</h4> <p align="center">I can make things pretty, convey a message or emotion. </p> </div> <div class="columns design"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>BRAND IDENTITY</h4> <p align="center">I can brand stuff.</p> </div> <div class="columns design"> <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p> <h4>INTERACTION DESIGN</h4> <p align="center">I can describe how things should behave. </p> </div> </div> <!-- <div class="row blockDisplay"> <div class="column_half left_half"> <h2 class="column_title">LEFT COLUMN</h2> </div> <div class="column_half right_half"> <h2 class="column_title">RIGHT COLUMN</h2> </div> </div>--> <section id="contact"> <footer class="secondary_header footer"> <div class="copyright">CONTACT<br> <div class="social"> <p class="social_icon"><img src="images/download.png" width="10pts" alt="" class="thumbnail"/> ashish.ar212121@gmail.com</p> <p class="social_icon"><img src="images/twitter.png" width="80" alt="" class="thumbnail"/>AshishSharmaRSi</p> <p class="social_icon"><img src="images/facebook-icon-preview-400x400.png" width="100" alt="" class="thumbnail"/>AshishRSi</p> <p class="social_icon"><img src="images/dribbble_02.png" width="100" alt="" class="thumbnail"/>AshishRSi</p> </div> <p> ©2015 - <strong>SIMPLE Theme</strong></p></div> </footer></section> </div>022 </body> </html> @charset "UTF-8"; .container { background-color: #F2EFE6; width: 90%; margin-left: auto; margin-right: auto; border-bottom-width: 0px; padding-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; } .row { width: 100%; margin-top: 20px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: inline-block; background-color: #f2efe6; color: #182033; } .row.blockDisplay { display: block; } .columns.last { width: 100%; margin-top: 0px; } .columns { width: 33%; float: left; font-family: 'Georgia'; color: #f2efe6; line-height: 24px; padding-top: 10px; padding-bottom: 10px; text-align: justify; margin-top: 15px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; } .row .columns p { padding-left: 10%; padding-right: 10%; color: #182033; } .row.design { width: 100%; margin-top: 20px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: inline-block; background-color: #f2efe6; } .row.blockDisplay.design { display: block; } .column_half.design { width: 50%; float: left; margin-top: 0px; } .columns.design { width: 25%; float: left; background-color: #f2efe6; font-family: 'Georgia'; color: #B3B3B3; line-height: 24px; padding-top: 10px; padding-bottom: 10px; text-align: justify; margin-top: 15px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; } .row .columns p { padding-left: 10%; padding-right: 10%; } .container .columns h4 { text-align: center; color: #182033; } .columns.last h5 { color: #182033; } .primary_header { width: 100%; background-color: #182033; padding-top: 200px; padding-bottom: 200px; clear: left; border-bottom: 2px solid #2C9AB7; position: sticky; } .secondary_header { width: 100%; padding-top: 40px; padding-bottom: 40px; background-color: #182033; } .secondary_header a { color: #f2efe6; } .secondary_header ul { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; width: 100%; position: sticky; top: 0; } .secondary_header ul li { list-style: none; float: left; margin-right: 0; margin-top: 0px; font-family: Georgia; font-weight: normal; color: #FFFFFF; letter-spacing: 1px; margin-left: 0; margin-bottom: 0; text-align: center; width: 20%; transition: all 0.3s linear; position: sticky; top: 0; } .secondary_header ul li:hover { color: #717070; cursor: pointer; } .left_article { background-color: #F2EFE6; width: 60%; float: left; font-family: "Source Sans Pro"; color: #343434; padding-bottom: 15px; } .center_article { width: 100%; padding: 3px; background:#4B4B4B; } .container .center_article h3 { padding-left: 15%; padding-right: 15%; color: #717070; align-content: center; float: none; font-weight: bold; text-transform: uppercase; } .container .center_article p { padding-left: 5%; padding-right: 5%; text-align: justify; line-height: 24px; margin-top: 30px; margin-bottom: 15px; color: #B3B3B3; } .noDisplay { display: none; } .container .left_article h3 { padding-left: 5%; padding-right: 5%; margin-top: 5%; color: #182033; font-weight: bold; text-transform: uppercase; } .container .left_article p { padding-left: 5%; padding-right: 5%; text-align: justify; line-height: 24px; margin-top: 30px; margin-bottom: 15px; color: #182033; } .right_article { width: 40%; float: right; background-color: #F2EFE6; margin-top: 0%; padding-bottom: 5px; } .right_article h3 { color: #182033; } .container .right_article ul { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .right_article ul li { font-family: "Source Sans Pro"; list-style: none; text-align: center; background-color: #B3B3B3; width: 95%; margin-left: auto; margin-right: auto; margin-top: 8px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 11px; color: #FFFFFF; font-weight: bold; border-radius: 0px; transition: all 0.3s linear; border-left: 5px solid #717070; } .right_article ul li:hover { background-color: #717070; cursor: pointer; } .footer { background-color: #f2efe6; } .title { font-weight: bold; font-style: normal; font-family: "Source Sans Pro"; text-align: center; color: #f2efe6; letter-spacing: 2px; } .placeholder { /* [disabled]max-width: 400px; */ /* [disabled]max-height: 200px; */ width: 100%; padding-top: 30px; /* [disabled]padding-left: 19px; */ padding-bottom: 30px; height: 100%; } .left_half { background-color: #52BAD5; } .container .column_half.left_half h2 { color: #FFFFFF; font-family: "Source Sans Pro"; text-align: center; } .right_half { background-color: #01B2D1; color: #FFFFFF; font-family: "Source Sans Pro"; text-align: center; font-weight: bold; } .column_title { padding-top: 25px; padding-bottom: 25px; } .copyright { text-align: center; background-color: #f2efe6; color: #182033; text-transform: uppercase; font-weight: lighter; letter-spacing: 2px; border-top-width: 2px; font-family: "Source Sans Pro"; } .copyright p { background-color: #f2efe6; } body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-color: #F2EFE6; } @media (max-width: 320px) { .secondary_header ul li { float: none; margin-top: 28px; margin-left: 0px; width: 100%; } .container .secondary_header ul { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; height: auto; width: 100%; text-align: center; } .secondary_header { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 1px; padding-bottom: 40px; } .left_article { width: 100%; height: auto; } .right_article { width: 100%; height: auto; } .placeholder { width: 100%; margin-top: 22PX; margin-right: 0px; margin-bottom: 22PX; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 400px; max-height: 200px; height: auto; } .columns { width: 100%; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .columns p { padding-left: 10px; padding-right: 10px; } .column_half.left_half { width: 100%; } .column_half.right_half { width: 100%; } .copyright { padding-top: 25px; padding-bottom: 0px; margin-bottom: 0px; } .container .left_article h3 { margin-top: 30px; } .social .social_icon img { width: 80%; } .container .secondary_header { } .columns.design { width: 100%; } } @media (min-width: 321px) and (max-width: 768px) { .secondary_header ul li { float: none; margin-top: 28px; margin-left: 0px; width: 100%; } .container .secondary_header ul { margin-top: 0px; margin-right: 0px; overflow: hidden; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; height: auto; width: 100%; text-align: center; } .secondary_header { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 1px; padding-bottom: 40px; } .left_article { width: 100%; height: auto; } .right_article { width: 100%; height: auto; padding-bottom: 25px; } .placeholder { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 100%; max-width: 100%; height: auto; max-height: 100%; } .columns { width: 100%; margin-top: 6px; margin-right: 0px; margin-bottom: 6px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .columns p { padding-left: 14px; padding-right: 14px; } .column_half.left_half { width: 100%; } .column_half.right_half { width: 100%; } .columns.design { width: 100%; } } @media (min-width: 769px) and (max-width: 1000px) { .secondary_header { overflow: hidden; padding-top: 1px; padding-bottom: 1px; } .secondary_header ul li { margin-top: 10px; padding: 30px; width: 5%; margin-right: 4%; margin-bottom: 5px; margin-left: 3%; } .left_article { height: auto; } .right_article { height: auto; padding-bottom: 27px; } .placeholder { width: 100%; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; } .columns { float: left; line-height: 24px; padding-top: 10px; padding-bottom: 10px; text-align: justify; margin-top: 15px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; } .columns.design { width: 50%; } .container .columns p { padding-left: 25px; padding-right: 25px; } .columns.middle { width: 100%; } } @media (min-width: 1001px) { } .thumbnail { width: 100px; border-radius: 200px; height: 100px; margin-left: auto; } .thumbnail_align { text-align: center; } .social { text-align: center; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 100%; background-color: #f2efe6; clear: both; overflow: auto; } .social_icon { width: 50%; text-align: center; float: left; transition: all 0.3s linear; line-height: 0px; padding-top: 7px; color: #182033; } .container .social .social_icon:hover { cursor: pointer; opacity: 0.5; } #menu { } .psyc { } Thanks,...