problem with navbar

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

There you go, It’s now online at http://upradere.fr/
Thanks for your help :wink:

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. :slight_smile:

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. :wink:
Thanks for your help

You are most welcome here :slight_smile:

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 :wink:
Thanks for your help !

You are most welcome here :slight_smile: