Css style

How to move the logo to the left – HTML & CSS – SitePoint Forums

Hello guys,

I’m really having trouble moving my logo to the left side of the website, but I’m not sure how?



  
    
    
    
    Document
    
    
  
  
    
Pricing

body {
  margin: 0;
}

.header {
  background-color: rgb(212, 209, 209);
  display: flex;
  align-items: baseline;
  padding: .5rem;
  gap: 1rem;
  justify-content: flex-end;
}

.logo img {
    position: relative;
    width: 150px;
    float:left;
    margin-top:16px;
    cursor: pointer;
   
}
.link {
    background: none;
    border: none;
    text-decoration: none;
    color: #777;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
}

.link:hover {
    color: black;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
}


Welcome to this forum.

Here is a way to get the logo on the left side. . . .

The header now only contains two elements with justify-content: space-between;.



2 likes

Thank you very much brother. You are awesome. You have provided me with the required code.

You might like to change justify-content: space-between; for justify-content: space-around; or for justify-content: center; thus, the logo and navigation bar are not so far apart on large screens.

If you add more navigation buttons, consider adding flex-wrap: wrap to



1 like

OK! I will definitely consider adding these elements so I can learn how to move elements with CSS and notice the changes in the browser.

Wow! I was going to ask you to move my logo a bit closer to the navbar and you have already provided me with the code that will allow me to. Sounds like you’re an expert brother.

Do you know how to create a separate button on the right side for Register goal and add an animation on it?? In every project I build, I try to control by moving or animating a single button, and then I find that all the buttons animate at the same time!

I put a demo here. . . .

Note that the HTML for the new “Sign Up” button includes id="signup". The CSS selector #signup is then used to select that specific button only.

You can try moving the new button right after the



1 like

Hello buddy, I’m very grateful for your amazing help in building a website. I got stuck for two days with another problem. After typing this code and it looks much better, but my next question is how do I control the position of my logo + I would like to move my navigation buttons a bit to the left no further??

I suggest you do this by including padding in the header element, as an example here:

The padding I added is padding: 16px 5%; meaning top and bottom padding is 16px, left and right padding is 5%. I removed your logos margin-top: 16px; so the space above the logo is now made by the padding. The space under the logo is not 16 pixels due to align-items: baseline; pushing the bottom of the header element down. I chose to use percentage for left and right padding. This means that the padding is proportional to the width of the header and therefore advantageously becomes less when things need to slip into smartphone screens. You can make the left and right paddings differ.

I changed



1 like

OK! Wonderful. Well I changed some elements that you recommended to me and the page looks good now except the navigational elements like the info button and the pricing link are still on top and not at the same level than the other items and I tried searching on google but couldn’t find a way to accomplish this step.

As for the button elements, I actually coded this alongside a video on Youtube and saw the guy demonstrate this project, so I thought of doing the same thing but uploading it to a slightly different project and adding more modifications for learning purposes. https://www.youtube.com/watch?v=S-VeYcOCFZw&t=139s

In the YouTube video, I see that the “Connect” button pops up when clicked. It won’t navigate to another web page, so it should be a