Need some help with my product landing page

Project Feedback
#1

Hi guys, pleasing night for non americans :slight_smile: and a good day for the americans :slight_smile:

this is my project so far : https://codepen.io/picklemyrickle/pen/XWjzyvb

Few questions.
1)I want to swap between my h1 (“Daniel’s Get Big Plan”) and my Logo (the flexing bodybuilder)
Is it possible swapping between them, without position: relative; and tweaking between high numbers? right: 500px; etc. for example that’s what I’ve done on .nav-link.

2)I tried with display: flex; on the header, but it moves everything, because header includes the navigation bar as well. I have tried using display: flex; solely on what I need but I guess the header overrides it right? how does the override works exactly, that’s my question if I was even correct and what I wrote.

Would really appreciate the help, thanks a lot!

#2

I could not fully understand what you wanted to do. Can you open a little more?

#3

Can I suggest setting up a flex box?
I cannot even see your links with a smaller browser window.

Also remember that HTML is linear so if you want something first you can write them in the code prior as well.

#4

Hi there,

I assume by “swap between” you mean you want to logo to be to the left of the h1. If that’s the case, you can put the image before the h1 in your html. Then style it so the image and the h1 is on the same line.

#5

If you open the codepen you can see I have the logo of the bodybuilder on the right and the

on the left ( Daniel’s get big plan ) I want to swap between them.

#6

Yeah, that’s what I mean. Are there more ways to do it? besides position: relative; and your suggestion*

#7

İf you use flexbox try “order” property

#8

First, set up the html the way you want it to display. If you want the image to go first, put it first in the html. Then you’ll need to use CSS. Flex would be a good thing to try here, I think.

#9

That’s a good suggestion that @cherylm answered as well.
If you take a look I have a flexbox set up on my header.
(not sure what you mean about the links, but I haven’t done any media query yet)

@cherylm @squarednode
If you take a look I have a flexbox used on my header {}
but my header covers up more stuff than I need (h1 + img)
when I tried using display: flex individually on those, it seems unaffected.
Is it because the header {} overrides them?

#10

https://codepen.io/BerkayAkgurgen/pen/qBqLzKX
is this what you want?

#11

Your programs/results/etc…

I believe this is under your id=“nav-bar”

If I reduce my browser size they do not adjust with the browser size.

#12

Yes, exactly.

so that’s the way to do it, just to order; them?
Are there more ways to do it besides what was suggested here?
HTML Structure
Position: relative;
and flexbox.

#13
  1. display: flex;
  2. display: grid;
    and html order
    It is a bad choice to make position relative and absolute and set the position with features such as top, bottom.
#14

It does feel a bit off… but why is it a bad choice?

Also once you placed the order; I see the navgiation bar disappeared how come?

#15

The reason it is bad is that it is not compatible with devices such as mobile and tablet. In order to be sensitive to different screen sizes, we position them in a way to adapt to different screen sizes, not in an absolute place, also how did the navbar disappear, I see?
check it’s

#16

Okay, thanks a lot :slight_smile: