Jump to content
  • Similar Content

    • By jbenham10

      Having a bit of trouble getting a sticky navbar to work for a website I have to build for my college course...
      I have copied the JavaScript from the W3Schools method assuming it would apply directly to my pre-existing navbar but it seems not...I can't seem to see where I am going wrong, any ideas? I tried using both the 'nav' and 'navbar' elements in the scripting..

      Thanks in advance
      <nav> <ul class="navbar"> <li class="navitem"><a href="">Home</a></li> <li class="navitem"><a href="">About</a></li> <li class="navitem"><a href="">Our Team</a></li> <li class="navitem"><a href="">Products</a></li> <li class="navitem"><a href="">Gallery/Portfolio</a></li> <li class="navitem"><a href="">Contact</a></li> </ul> </nav> CSS
      /* Navbar css*/ nav { float: left; display: block; width: 100%; left: 0; right: 0; top: 150px; background: #616A6B; height: 100px; } .navbar { list-style-type: none; max-width: 100%; text-align: center; overflow: hidden; position: static; padding-top: 25px; } .navitem { display: inline; padding-left: 10px; } .navitem a { text-decoration: none; font-size: 18px; color: white; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; } .navitem a:hover{ color: #CC0000; transition-duration: 0.8s; } .sticky { position: fixed; top: 0; width: 100%; } JavaScript
      <script> window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } </script>  
    • By overground55
      Hey WebDesignerForum community,
      I am designing a website mockup, and will attach an image of what it looks like currently. I'm attempting to use CSS Grid to design my homepage. From here I really have 2 questions:
      First, my home page seems fairly long, at least compared to websites shown in tutorials I've found on CSS Grid. It seems like 'grid-template-areas' may be one way of building my home page. Will this become overly complicated and a less effective way of building something that looks like what I'm currently showing in my attached image(s)? The way I'm picturing it is that my 'grid-template-areas' will end up looking like this: ‘header header header nav nav'
      'article article article article article’
      'article article article aside aside’
      'article article article article article'
      'aside aside aside aside aside’
      'article article article article article'
      ‘aside aside article article article'
      'article article article article article’
      'article article article article article'
      'article section section section article'
      ‘footer footer footer footer footer’;
      I'm uncertain if I'm using the right semantic language for everything, but I will also overlay each 'grid-template-area' item on my website mockup so you can see exactly what I have imagined in my mind. I hope I have provided enough information for someone with more experience to help me here.
      Secondly, some of my imagery, such as the header, footer, and a few other images, touch the edge of the webpage. In the past when using CSS Grid, I couldn't get the grid to go all the way to the edge of the screen, but it had a small margin that seemed inherent. How can I avoid this from happening when I begin the html/css process?
      web mockup
      Web mockup with grid item assignments
    • By Taladmin
      I am new to design
      Could someone help to create something like that.
      Hey everyone, I'm a new member in this forum and I'm in just to develop my skills in design for web.
      Furthermore, I've been working on a website for about 2 weeks and it's almost done I just want you to criticize it and give me, guys, advices in order to make it perfect for a final project.  
      Little description:
      This website is destined to manage a school store. In the first page the user have to enter his informations then the system detects if the user is an admin or a client. If it's an admin (which is the case in the following pictures) the user will be able to add members and remove them, add items and remove them and mention the locations that had been done (from database). I didn't design the client page because I think that I'm going with the same ideas even up there so I wanted to know if this design is appropriate to continue my work.
      My project is made in french but I can translate any option.
      Thank you guys! 

    • By sic
      I have created "actus HTML 3D" and I would like to have your comments about it. 
      Its a jQuery library that helps you create a 3D world on your web pages. Arrange and animate your content in 3D space with just a few lines of html. You can download it and see examples and documentation here:
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
    • Most Online

    Newest Member
  • Forum Statistics

    • Total Topics
    • Total Posts