How do you have text next to a logo and keep the header on top?

Question

So I am trying to make the header part of my website and I had a few questions. Before I go into them I just want to say I am very new at this, so please do try and make it simple. Thanks. Ok so here they are:

I want to have my text hovering next to my logo as you see on any other website.
when you scroll down the header follows you so you don't have to scroll all the way up.

So here is the code i have for the first question, but i dont have nay for the second:

header { 
  width: 100%; 
  height: 5%; 
  background-color: #52bad5; 
  border-bottom: 1px solid #2C9AB7; 
  padding-top: 0px; 
  margin-top: 0px; 
}



 
  
   

    

    LIGHT
    
    
      
        HOME
        ABOUT
         CONTACT

I hope that makes any sense at all.

user_13331155 · Answer

To make the logo next to the text, all you need is to add display: flex to the wrapper, as seen below.

To make the header stick to the top, all you need to do is add position: sticky to it.

I'd advise reading more about flexbox here:

body {
  height: 200vh;
  margin: 0;
}

header {
  width: 100%;
  background-color: #52bad5;
  border-bottom: 1px solid #2C9AB7;
  position: sticky;
  top: 0;
  display: flex;
}

.wrapper {
  display: flex;
}

ul {
  display: flex;
}

li {
  padding: 0 5px;
}


  
    
    LIGHT
  
  
    
      HOME
      ABOUT
       CONTACT

How do you have text next to a logo and keep the header on top?

1 Answers