Build a Product Landing Page - positioning elements within fixed header?

Build a Product Landing Page - positioning elements within fixed header?
0

#1

Tell us what’s happening:
I’ve started working on the Product Landing Page project and I can’t seem to figure out how to make my positioning of my logo, company name and nav button work inside my fixed header.

My logo and name are currently positioned like they should be (or close enough anyway, I’ll probably play around with em once I test in multiple environments), but I want the nav button to appear on the right side of the screen, regardless of the screen size. Is there a way to set the button so that it will always be a certain amount of px, %, … starting from the right side?

I used flex to get the elements in a row and then played around, but I’m open to suggestions!

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 7.0; SM-J727P Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.91 Mobile Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page


#2

Hello. So you played with flex today? You didn’t like the result? Sorry for plugging my code, but look at my pen. Maybe something helps you with your problem.

I use flex to align items in a header.


#3

Your header is sort of what I’m looking for, except in reverse (2 elements aligned left - my logo and name - and 1 to the right - menu button). I went through your code, but I just don’t see what part of it exactly creates the effect of your menu aligned to the right.

I do see the display:block and justify-content: space-around so maybe that’s what I’m missing to make it work?


#4

Hi @N4G3, you can achieve that,

  1. Wrap the logo and logo-name with a div => and apply flex and align-item center to the div

  2. #header is already in flex, now just add justify-content to space-between


#5

If you had used justify-content: space between, your text would be in the center and button in the right. Sujith3021 gave another tip, which achieves the desired result.


#6

See, I tried that, but once I wrap the img and h1 in a div, the little logo picture dissapears. You can checkthe code above (it should be updated).
Anyway, I sort of started from scratch and found a different way that achieves exactly what I’m looking for, at least in mobile view. I’ll probably have to use media queries to adjust to bigger screens, but I know what code needs adjusting. After all this effort, that doesn’t seem like all that much work in comparison!


#7

I clearly mentioned you this, after wrapping the div, use the above props to that div


#8

Yes, I applied the properties you mentioned above (display: flex & align-items: center
… that was whatyou meant, right?) to the div, but I don’t think the img dissapearing has to do with the properties, does it? :thinking: It dissapears as soon as I add the div to my html code and doesn’t show again after I specify the CSS properties. It doesn’t show alt either so maybeit pops out of the visible screen? I have no idea.


#9

Yes, it happened because, there were some whitespaces added in your code, therefore it did not work out, when I re-wrote your code with the same style and html, i got cleared, look at this screenshots,

This is your code sample look at the dot (whitespace-only text node) inside dev tools,

And here is the same screenshot with code which i re-wrote,


#10

Compare this with your code, using dev tools,


#11

Huh, I missed that! Thank you so much. You’re a lifesaver :grin: