I need help with my page

Hi, I am having some trouble with my page and need some help. When I add position: fixed all the scroolbars disappear and there’s space at the top right of the header that I can’t just get rid of and when I added display flex to the parent element to make them align it doesn’t work properly. here’s the link https://codepen.io/kambajuliet/pen/dypZbwP, I hope you can help.

It should always be at the top of the viewport, even if you scroll.

Oh ok, thank you very much.

I just looked over your code and I would suggest having separate CSS classes (or id) for each the navbar itself, the ul inside of the navbar, and the navbar links. Inside of the navbar CSS you need to add something like
position: fixed;
top: 0;
to keep the navbar at the top. After playing around with your code here is a snippet of the CSS that can be added. The nav-link is added to the

  • inside of the navbar and replaces the a{} css code. Hope this helps.
    #nav-bar{
      display: block;
        list-style: none;    
        margin: 0px;
        padding: 0px;
        font-family: raleway;
        width: 70%;
        margin: 0 auto;
        position: fixed;
        top: 0;
        right: 0;
    }
    
    ul {
      list-style: none;
        display: block;
        text-decoration: none;
    }
    
    .nav-link{
      float: right;
        display: block;
        text-decoration: none;
        text-align: center;
        list-style: none;
        padding-left: 30px;
        padding-right: 30px;
        background: #2b8aba;
        color: white;
        font-size: 30px;
    }
    
  • 1 Like

    This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.