How to move logo to the left side

Hello guys,

I’m having a really hard time moving my logo to the left side of the website, but don’t know exactly how to do that??

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <div class="header">
        <div class="logo">
        <img src="images/new logo.png" alt="logo"></div>
      <div class="dropdown">
        <button class="link">Information</button>
        <div class="dropdown-menu">Dropdown Content</div>
      </div>
      <a href="#" class="link">Pricing</a>
      <button class="link">Login</button>
    </div>
  </body>
</html>

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 one way of getting the logo to the left side . . . .

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

2 Likes

Thanks a lot bro. You’re awsome. You did provide me with the code that is required.

You may like to change justify-content: space-between; to justify-content: space-around; or to justify-content: center; so the logo and navigaion bar are not so far apart on large monitors.

If you add more navigation buttons considering adding flex-wrap: wrap to the <nav> element to ensure all buttons will display on a small smartphone (320 CSS pixels wide).

1 Like

Ok! I will definitely think about adding these elements to be able to learn how to move items with CSS and notice the changes in the browser.

Wow! I was gonna ask you about moving my logo a little bit closer to the navigation bar and you already did provide me with the code that will enable me. It seems like you’re an expert brother.

Do you know how to make a separate button on the right side for sign up purpose and add some animation on it?? In every project I build I try to control by moving or animating only one button, then I happen to see that all the buttons get animated at the same time!

I’ve put a demonstration here . . . .

Note the HTML of the new ‘Sign Up’ button includes id="signup". The CSS selector #signup is then used to select this specific button only.

You can try moving the new button just after the <nav> element.

1 Like

Hello buddy, I am so thankful for your incredible help with building a website. I got stuck for two days with another issue. After I typed those code and it look a lot better, But my next question is how do control the position of my logo + I would like to move my navigation buttons little bit to the left not further??

I suggest you do this by incluing padding within the header element, as example here:

The padding I have added is padding: 16px 5%; which means the top and bottom padding are 16px with the left and right padding being 5%. I deleted your logo’s margin-top: 16px; so the space at above the logo is now done by the padding. The space below the logo is not 16px due to align-items: baseline; pushing the bottom of the header element down. I have chosen to use percentage for left and right padding. This means that the padding is proportional to the width of the header so becomes beneficially less when things have to squeeze into smartphone screens. You could make the left and right paddings differ.

I have changed <button> elements to <a> elements because links should be <a> elements. If ‘Log in’ and ‘Sign up’ run JavaScript on click to show a popup, then I think they should be buttons.

I have demonstrated how CSS Flexbox may be used but you could get more precise control of appearance over a full range of screen widths if you use CSS Grid with media queries. When I use CSS Flexbox I tend to set a maximum ‘page’ width to avoid things becoming excessively wide on very large monitors.

BTW: sorry for delayed reply to your post: I was away.

1 Like

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

regarding the button elements, I actually coded this alongside a video on Youtube and I saw the guy demonstrating this project, so I thought about doing the same but transferring it to a bit different project and adding some other changes for learning purposes. https://www.youtube.com/watch?v=S-VeYcOCFZw&t=139s

From the YouTube video I see that the ‘Login’ button wills show a dropdown popup when clicked. It will not navigate to another web page so it should be a <button> element. Similarly, the ‘Information’ buttton does not link to another web page when clicked so should also be a <button> element.

Do you still have align-items: baseline; within the CSS for the header? Check there are no typos in the CSS for the header. If the navigation items are still at the wrong positon, you can resort to using developer tools in your browser (use the ‘Inspector’). Note I wrapped the navigation items in a <nav> element so they could be grouped together on the right while the logo appears on the left. If I delete align-items: baseline; in my CodePen then the <nav> element moves up to the top of the header.

Well! I made some changes again based on the code that you provided me recently. Regarding the links I need to keep them as buttons for javascript purpose. Recently, I did add some more code from the video in order to style the dropdown menu. But now I’m littl e confused, because after adding some code suddenly it dissappeared and don’t really know if any of my code is not appropriate with trhe video project! About the positioning, you can see that I have chanmged some CSS code to inherit; which made my logo, navigation items and the sign up button almost in the same level.

index.html (779 Bytes)
scripr.js (553 Bytes)
styles.css (1.4 KB)

I attached my code here so you can gladly check out my last updated code.

The video shows ‘Pricing’ as an <a> tag not a <button> because it will navigate to another web page using its href attribute.

For the <header> you have changed align-items to ‘inherit’ which means it will use align-items from its parent element: that is the <body>. As you do not have align-items in the CSS for <body> it defaults to 'normal` which for flex items behaves as ‘stretch’. What did you want to achieve by choosing inherit?

For the <header> CSS you can try align-items: center; to see what happens.

Ok! Yes, you’re right. The reason why I changed to button, because I wanted to have all my items to be the same as buttons, so it would be easy for me to have them together as group so I can move them around easily like up & down right & left, since I experienced difficulty to do that. You know my weakness point and why I ask many questions is the positioning. I really need to understand how to combine html elements with css in order to build a website. I didn’t really understand this concept, it defaults to normal Well! I just tried inherit randomly to test and see what happens, then I noticed that when chose inherit my logo, nav items and the sign up button showed in the same line, although the nav items were little bit above the sign up button, but when I changed it to align-items: center; it became perfect.

3 posts were split to a new topic: Problem with drop-down menu