Expanding Header

Hi,
I am trying to insert a logo inside a header along with hyperlinks but it expands too much, can anyone offer some pointers please.
The codepen is as follows: Page Header (codepen.io)

Thanks in advance.

You have a syntax error in the HTML preventing the id selector from working.

<img 
<id="header-img"
src="logo4.png" 
alt="logo4"
/>

You have an extra <, should be.

<img id="header-img" src="logo4.png" alt="logo4" />

Hi,
Thanks for the reply. I have made the amendments but I cannot get the links inside the header. I have updated the code : Page Header (codepen.io)

I would like to minimise the size of the logo and put the hyperlinks inside the header so that they are inline with the logo. The header is a bit to wide despite me trying different code configurations.

Thanks in advance.

You have two block-level elements inside the header. They will both take up the full width so they stack on top of each other. You can set the header to be a flexbox container and use a space distribution method as needed.

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: green;
  max-height: 260px;
}

You will likely want to increase the logo size after that. I would suggest using a max-width with a pixel value for the logo size.


BTW, you do not need the float on the ul. It will just cause the nav element to collapse. You already set it to be a flexbox container so you can use justify-content and other flexbox properties (like flex-wrap or whatnot).

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* float: right; */
    text-decoration: none;
    list-style-type: none;
}

Hi,

Thanks for the feedback. I’ll make the amendments even though I have not finished yet.
Update: Just finished.
Thanks.

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