Hello,
You’ve set a fixed width for the .main-navigation and it doesn’t fit on smaller screens. You should add a media query to remove that fixed width on smaller screens.
Can you please tell me how to fix that?
Thank you (i am a beginner in wordpress)
You can add this to a custom CSS plugin or child theme:
@media (max-width: 991px) {
.main-navigation {
width: 100%;
}
}
More info on media queries here.
Also I have the same problem with the search bar
can you help me with the code to be responsive?
@media (max-width: 1200px) {
input[type=”search”] {
-webkit-appearance: none;
width: 550px;
/* margin-top: -50px; */
}
}
@media (max-width: 992px){
input[type=”search”] {
-webkit-appearance: none;
width: 400px;
/* margin-top: -50px; */
}
}
@media (max-width: 762px){
input[type=”search”] {
-webkit-appearance: none;
/* margin-top: -50px; */
}
}
Same as with the other one, you need to switch to a percentage based width. So instead of width: 400px; do something like width: 80%; or whatever value works for you better.
Where can i paste this code?
And i have a problem with the button when i change in a percentage width the submit button is in the search bar
I want your help because i am a newbie in wordpress thanks a lot and appreciate
You can paste the code in a custom CSS plugin. I hope all your custom CSS went in a plugin or child theme, not in the theme files. Not really sure what you mean about the button.
Yes i am using custom css plugin
Look what happened in submit button when i am using percentage width–> http://prntscr.com/5mn48h
Remove your width: 550px and do it like this:
.main-navigation label {
width: 80%;
}
.main-navigation input[type="search"] {
width: 100%;
}
Then adjust the 80% value as as needed for the other screen sizes.
