ı made a navbar ı put a image ı mean a logo but when ı resize as a phone it goes out of the navbar what should ı do
Hello~!
Can you provide us with a link to your live project so we can help debug? 
how can ı do that ı mean the debug
Debugging is simply the process of figuring out why your code is not working the way you intend. Depending on the language, there are programs/scripts that can help with the process.
For your situation, though, you’ve asked us for help fixing your navbar image issue - we can’t help without seeing your code and your webpage.
The screenshot looks nice, but do you have a link to that webpage?
We need to see the code behind the webpage.
ı dont have a host right now but ı’ll try to write the code to here.
this is css:
body {
margin: 0;
background-color: #bbb;
}
a{
color: black;
}
.header {
background-color: #3e599c;
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, .1);
position: fixed;
max-height: 90px;
width: 100%;
z-index: 3;
}
.header ul{
margin: 0px;
padding: 0px;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header ul a {
display: block;
padding: 20px;
border-right:1px solid #aaa;
text-decoration: none;
}
.header ul a:hover {
background-color: #ddd;
}
.header .logo {
position: fixed;
bottom: 400px;
float: left;
display: block;
height: 200px;
width: 400px;
padding: 10px 20px;
}
.header .menu {
clear: both;
max-height: 0px;
transition: max-height .2s ease-out;
}
.header .menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
}
.header .menu-icon .nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
.header .menu-icon .nav-icon::before{
background: #333;
content: '';
display: block;
width: 100%;
height: 100%;
transition: all 90ms ease-out;
position: absolute;
top: 5px;
}
.header .menu-icon .nav-icon::after{
background: #333;
content: '';
display: block;
transition: all 90ms ease-out;
width: 100%;
height: 100%;
position: absolute;
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon{
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon::before {
transform: rotate(-45deg);
top: 0;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon::after {
transform: rotate(45deg);
top: 0;
}
no respond? please manSo it looks like you’ve set the header logo to have a specific height of 200px and width of 400px, but your header itself has a max-height of 90px. So on smaller screens your header will be responsive but your logo will not.
You can always use something like CodePen to post a live version.
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
Please use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks are not single quotes.
Edit: You don’t need to set the logo to be fixed as long as it is inside the header and the float left is not (shouldn’t be) needed. Also, bottom 400px on it seems odd, it’s basically positioned 400px from the bottom of the viewport.
it didnt worked out ı did what you said ı changed as max height and max width