Change tablet view breakpoint - Forum | JoomShaper
Solved Helix Framework

Change tablet view breakpoint

Asked by Sion Creativos 3 years ago Last activity 3 years ago

Hello, i require that the breakpoint of the template that defines in which pixels the tablet view starts and appears the off-canvas menu be adjusted to 1200px and not at 991px, this is because my menu is long and when it exceeds 1200px it goes down from the header bar and is no longer visible, overlapping the content.

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff
3 years ago

Glad to know that, You can now close this post by accepting the answer.

10 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
3 years ago

Hi

Thanks for contacting us. Could you please give me your site URL and also screenshot of your issue?

-Regards.

Sion Creativos Asked this
3 years ago

I leave you the URL and a video.

Mehtaz Afsana Borsha Staff
3 years ago

Could you please give me the resolution?

Sion Creativos Asked this
3 years ago

My screen resolution? It is 1920 X 1080, I don't know if you mean that one.

Mehtaz Afsana Borsha Staff
3 years ago

Hi

Use this custom CSS


@media only screen and (min-width:992px) and (max-width:1198px){
.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span{
position: relative;
bottom: 95px;
left:20px;

}
  .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    background: #134079;
    position: relative;
    bottom: 115px;
}
}

Go to system--> https://prnt.sc/tDbSUJh6LiGu --> Default template-->Template options--> https://prnt.sc/A5nlsBvCQsqs And add your CSS there.

Sion Creativos Asked this
3 years ago

I have inserted the code but it still does not work, the menu still goes down.

Mehtaz Afsana Borsha Staff
3 years ago

Please give me the credentials, I cant access your site.

Sion Creativos Asked this
3 years ago

Ok

Mehtaz Afsana Borsha Staff
3 years ago

Could you please try this css in your custom.css file?

@media only screen and (min-width:992px) and (max-width:1198px){
.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span{
position: relative !important;
bottom: 95px !important;
left:20px !important;

}
  .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    background: #134079 !important;
    position: relative !important;
    bottom: 115px !important;
}
}
Sion Creativos Asked this
3 years ago

Great, this worked well.

Log in to reply.