Product Landing Page nav-bar issue

here is my design “https://codepen.io/anas-haitham/pen/MWwgvxe?editors=1100”. but I have an issue in navigation bar when it minimized then open the navbar it make a logo so long. and if you have any notifications on code generally please tell me.
Thanks

You have given the image height: 100% so it will be 100% of the parent height.

With small logo images, you can often get away with just giving it a fixed width (like width: 160px and remove the height). You will have to color the header background the same as the nav.

1 Like

Thanks it working for the picture but still have background goes down with slider.
and still have L shape around logo.

If you do not want to see the red background color, you will have to remove the background styling for it within your #header.

I made it to see any wrong in my design.

Maybe I’m misunderstanding, I’m sorry! But having that space appear to the left is normal. Your header should be taking up 100% of the width of its container. If everything on the page is looking the way that you want it to, then you’ve accomplished your basic layout. Is everything positioned the way that you want it to be? If that’s the case, there is no error in your layout. Then you should be able to remove the red and it will look the way that you want it to.

I’m also not sure I see the L shape around your logo.

@HaithamCa, please verify your email addr with codepen so we can see your page Full View

It’s verified now

Why my nav-bar still big