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.
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?
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!
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? 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.
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,