Hi,
I have a problem with my navbar which is over two or three line for medium size display (see attached). Can you give me some help on this ?
Many thanks
Hello there,
I hope you are doing well today.
Could you please provide a link to your website so that we can have a look at the CSS media queries?
Best Regards,
Support
Hey there,
Hope you’re doing well today
I had a look at your site and attempted to make some CSS to fix this. I hope it works:
Kindly add and save the following code to Appearance > Customize > Additional CSS:
@media (min-width:991px) and (max-width:1199px){
.menu-item a {
font-size: 12px!Important;
}}
@media (min-width:991px) and (max-width:1199px){
.navbar-header {
width: 23%!important;
margin-top: 1%!important;
}
}
@media (min-width:768px) and (max-width:991px){
.menu-item a {
font-size: 9px!Important;
}}
@media (min-width:768px) and (max-width:991px){
.navbar-header {
width: 13%!important;
margin-top: 3%!important;
}
}
Please let me know if there are any other questions that I may help with.
Best Regards,
Support
Thanks for your help
I used your code and adapted it a bit.
It works great on both edge, ie and brave but not on chrome (not sure if it is the cache or not?). I also realize that it displays two line on smartphones, the logo being too big. I tried to use your method but couldn’t get it to work or to modify the logo size but I then have a problem of vertical alignment…
Any idea?
Thanks
Looks like it was the cache for my chrome problem!
we just need to fix the 2 lines with smartphone display.
Thanks for your help
You are most welcome here
hmmm… I still can’t figure out the two line problem on smartphone device… can you guys give me a help with that ?
Many thanks
http://upradere.fr/
I tested your site on Responsinator - upradere.fr/ but couldn’t reproduce two line problem on smartphone device.
Please advise.
I mean the toggle button is above the logo and not on the same line (see attached).
I have this code but the logo doesn’t get centered automatically…
@media (max-width: 380px) {
div#logo {
max-width: 60%;
}
}
It is displaying fine for me as shown in the attached screenshot.
Have you managed to achieve it?
Kind of…
I ended up with this code:
@media (max-width: 420px) {
div#logo {
max-width: 60%;
min-width: 59%;
padding-top: 2%;
}
.navbar-toggle {
margin-top: 10px !important;
}
}
Not perfect but it will do the job
Thanks for your help !
You are most welcome here