make the header and menu responsive to size

Hi,

You mean that it looks like this?
http://prntscr.com/jqmpq7

That happens because your menu has the left option set to 31%. It makes the offset on the left side and all the menu items that do not have space to fit in the first line go to the next one. Remove that left value and the menu will fit the screen width.

Sincerely,
Hella

Hello

i made some changes.

but i want the logo and the menu to be treated as one hole part and get smaller when resizing the browser.

regards

Hi,

To make the menu go smaller you can try to set the menu item text size not in px, but in em, that should reduce the size of the menu item text when the screen becomes smaller and the width of the items will be also reduced. Maybe that will work better for you.

Sincerely,
Hella

Hello

this doesn't work.

regards

Hi,

Currently I see that the size of the menus gets smaller when I reduce the screen. Exactly what result you want to achieve?

Thank you,
Olivia

hello

i got this result by changing the font size on the laptop view.

but you said that the font size automatically changes when using em.
this is not working.

regards

Hi,

I'm not sure why Hella suggested em units because they are relative to parent's font size. To make them work you need to reduce default page text size too. In this case vw and vh units are more suitable because they are relative to the screen width or height.
In your case it is easier to set different font size for each responsive mode separately.

Thank you,
Olivia