1

thanks for your help. I just starting to learn HTML and CSS. I have been wrestling with this oversize logo problem for a week now. How do I put the logo overlap the nav like a layer look?

my html file:

<nav class = "navigation-bar">
    <link rel="stylesheet" href="{% static 'financeapp/style1.css' %}">

   

<div class = "navigation-container">
    <ul>
        <li><img class = "logo" src ="{% static 'financeapp/family examiner 2.png' %}"
            alt="company logo" height = 150px width = 150px>
        <li><a href="#"> Home </a></li>
        <li><a href="#"> About </a></li>
        <li><a href="#"> Contact </a></li>
        <li><a href="#"> Join Us </a></li>
    </ul>
</div>

my css file:

.navigation-bar {
display:flex;
margin: 0;
padding: 0;
align-items: center;
text-align: center;
}

.logo {
    float: left;
}

.navigation-container {
    display: flex;
    justify-content: space-betwee;
    width: 100%; /*left side*/
    margin-top: 5rem;
    border: 1px solid;
    border-color: green;

}
.navigation-container ul {
    margin: 0;
    padding: 0;
    width: 100%; /*right side*/
    height: 70px;
    background-color: yellow;
}

.navigation-container li {
    display: inline;
}

.navigation-container a {
    padding: 10px;
    text-decoration: none;

enter image description here

thanks for your time.

fishtang
  • 167
  • 3
  • 9
  • I don't understand your question, what do you mean by "layer look"? could you maybe provide the rough image of what you want? – Damzaky Nov 21 '22 at 09:07
  • hello @Damzaky, I would like my logo to be on top of my nav but 1/3 from the left. In the end, I will have some yellow bar on the left and the the logo, and the li's. I hope that is clear. thank you for your quick response. – fishtang Nov 21 '22 at 09:10
  • [This link](https://stackoverflow.com/questions/30624709/css-html-navigation-and-logo-on-same-line) and [This codepen](https://codepen.io/anon/pen/GJWOBV) may be of help. – Tim-Bolhoeve Nov 21 '22 at 09:14
  • does the codepen above my comment answer your question? sorry I still don't get what you meant by `1/3 from the left`, maybe you could explain it more if above comment didn't answer your question – Damzaky Nov 21 '22 at 09:17
  • hello @Tim-Bolhoeve this codepen is exactly what I based my code from. The example's logo is the same size as the nav bar, which is not what I want. I would like to see my logo bigger than the nav bar. this is where I don't know how to get it done. Thanks again. – fishtang Nov 21 '22 at 09:19
  • @fishtang if you just want the size to change, you can do something like `style="width:80%;"` within the html (or in your css if you prefer) Example: `` – Tim-Bolhoeve Nov 21 '22 at 09:21
  • @Tim-Bolhoeve that just made the log WAY bigger and stilll on the left side. I needed to be on top of the nav bar. I don't know how to add the picture to show you that I did try your idea. :) – fishtang Nov 21 '22 at 09:28
  • @fishtang if you want the yellow background to be behind the image, you can put the image in the `
      ` like so:
      • . If you dont want to be able to click the image (to return to the homepage for example, remove the tag)
     – Tim-Bolhoeve Nov 21 '22 at 09:40
  • 1
    i'd suggest you to add a picture of what you want, you could edit a screenshot and adjust it according to your need then insert that picture to the post, then maybe we could help you – Damzaky Nov 21 '22 at 09:43

1 Answers1

1

First you need to put your image inside your List

<div class = "navigation-container">
    <ul>
        <li><img class = "logo" src ="{% static 'financeapp/family examiner 2.png' %}"
            alt="company logo" height = 150px width = 150px style="background-color: black;"></li>
        <li><a href="#"> Home </a></li>
        <li><a href="#"> About </a></li>
        <li><a href="#"> Contact </a></li>
        <li><a href="#"> Join Us </a></li>
    </ul>
</div>

Then you can put a margin-top on your list to make it go down, so the picture does properly fit later

  .navigation-container {
      display: flex;
      justify-content: space-betwee;
      width: 100%; /*left side*/
      margin-top: 5rem;
  
  }

Then you can set your .logo to margin-top: -43px; as example and the logo will move up.

You will need to play around with the numbers to make it so you like the look.

Also important note is that none of this is responsive and it will probably not look good later on. You always should start to design for mobiles first.

Spyr0
  • 193
  • 9
  • Hello, I edited the code based on your recommendation. Thanks for the head up on the none responsive set up. My question is now the li links are below the yellow bar. I put in some container boxes to help me see and learn the box model. Shouldn't the links be in the bar becuase it's child of the navigation-container? – fishtang Nov 24 '22 at 09:06