We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

responsive problem with top bar and main menu

Featured Lock Resolved Issue
Hi,

On some specific devices (smartphone : ex Huawai P20)
See below :

Bad display :

bad.png

But on some devices all works fine

Good display :

good.png

Live site is here : http://tdfevents.support.toonetcreation.com/prestations.html
Do you have an idea why?

Thanks for your help
L.

Attachments (2)

  • bad.png
    bad.png 366.3 KB
  • good.png
    good.png 456.1 KB

11 Answers

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
HI,
Use this css


@media (max-width: 767px){
.logo-image{
margin-top:50px !important;
}
}

Thank you

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Hi,
Use this custom CSS

@media (max-width: 667px){
#sp-header .logo{
margin-top:22px !important;
}
}


You have to insert this CSS in your custom CSS. If you have SP page builder then you follow this
http://prntscr.com/q8w03l
If you do not have SP page builder then you can follow this
https://files.fm/u/shtmdpme
You can use any two of these

-Best regards
Mehtaz

Laurent

More than a month ago #Permalink
Hi,

I have tried but does not resolve the issue.
I have tried this :


@media (max-width: 992px) {
#sp-header:not(.header-sticky) {
top: 57px;
}
}


works but only when top bar content is displayed with 2 lines.
If top bar content is displayed with 3 lines, like Bad display on first post, does not work.

I mean, the problem is not located on the logo, but on all top bar div which is under main menu.

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Hi,
But it works in my end see the attached.Don't you want it like this?
http://prntscr.com/qtgztv
Thanks

Laurent

More than a month ago #Permalink
ok..
this is strange because as you can see screen shot on my first post, on my mobile phone (huawai P20), the logo is over the top bar :-/

Laurent

More than a month ago #Permalink
hello,

any news?
I tried to be more accurate in the 2 screenshot below :

GOOD : logo position is fine

good.png

BAD : logo is to close from top bar

bad.png

Attachments (2)

  • good.png
    good.png 457.3 KB
  • bad.png
    bad.png 367.2 KB

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
I gave you the css if it does not work then send me your super admin access in my PM if its possible
Thank you

Laurent

More than a month ago #Permalink
I gave you the css if it does not work then send me your super admin access in my PM if its possible
Thank you


ok done, sent by PM

thanks

Laurent

More than a month ago #Permalink
solution found, thank you Mehtaz Afsana Borsha


@media (max-width: 767px){
.logo-image{
margin-top:50px !important;
}
}

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
solution found, thank you Mehtaz Afsana Borsha


@media (max-width: 767px){
.logo-image{
margin-top:50px !important;
}
}


You are most welcome:D


There are no replies made for this post yet.
Be one of the first to reply to this post!

124

Templates

331146

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us