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

Your Time: Our Time:

Responsiveness issue on the main menu

Featured Lock Resolved Issue
Hello there,

Today I tried Spectrum and noticed an issue about responsiveness. Please see the screenshot to understand.

Could you provide a fix?

Thanks and best regards,

Zaf

Attachments (1)

  • responsiveness issue spectrum.png
    responsiveness issue spectrum.png 41.5 KB

13 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Please use this css into your custom css field to solve this issue.

div#sp-menu {
padding: 0;
}

Here is the custom css field https://prnt.sc/ijudw8.

-Best Regards

Zaf

More than a month ago #Permalink
Hi Sifat,

This code worked in the demo site installed with quickstart package, but unfortunately it didn't work in my actual site. :(

Here is how I used the code:

#sp-page-builder .sp-pagebuilder-addon .sp-pagebuilder-addon-tools {
top: 0px !important; z-index:9876; }

div#sp-menu {
padding: 0;
}

Sifat - Staff

More than a month ago #Permalink
Hi,
Actually you need to use short name for menu items. You can share your site url here.

-Thanks

Zaf

More than a month ago #Permalink
Hi Sifat,

Here is the site. When user logs in, a user menu item also appears. So there 8 menu items. Names are already short, I think.

Sifat - Staff

More than a month ago #Permalink
Hi,
Please use this css into your custom css to get that working

.sp-megamenu-parent >li.active>a, .sp-megamenu-parent >li:hover>a {
padding: 0px !important;
}


-Thanks

Zaf

More than a month ago #Permalink
Hi Sifat,

I have added new code you provided but it still didn't resolve the issue. :(

Best regards,

Sifat - Staff

More than a month ago #Permalink
Hi,
Please use this css into your custom css to get that working

.sp-megamenu-parent >li.active>a, .sp-megamenu-parent >li:hover>a {
padding: 0px !important;
}
div#sp-menu {
padding: 0;
}


-Thanks

Zaf

More than a month ago #Permalink
A new issue also appeared with custom CSS code. Please see the screenshot.

Sifat - Staff

More than a month ago #Permalink
Hi,
Please use this css

div#sp-menu {
padding: 0px;
float: right;
}

And remove this css. Please check this attachment

-Thanks

Attachments (1)

  • ere.png
    ere.png 161.8 KB

Zaf

More than a month ago #Permalink
Hi,

Responsiveness is still an issue.

Here is the code I used in template's customs CSS section.


#sp-page-builder .sp-pagebuilder-addon .sp-pagebuilder-addon-tools {
top: 0px !important; z-index:9876; }

.sp-megamenu-parent >li.active>a, .sp-megamenu-parent >li:hover>a {

}
div#sp-menu {
padding: 0px;
float: right;
}

Sifat - Staff

More than a month ago #Permalink
Hi,
Please add this css to your custom css field along with the other css

#sp-logo {
width: 20%;
}
#sp-menu {
width: 80%;
}



-Thanks

Zaf

More than a month ago #Permalink
Hi Sifat,

Thanks. I pasted the code. It makes logo smaller (which is not necessary, I think) in small screen but it doesn't resolve the actual issue. :(

Update: It is okay now. I solved it with another way. Thanks.


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

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 107
Sifat

Sifat

Total Accepted Answers: 63
Toufiq

Toufiq

Total Accepted Answers: 47
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 20
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 12

118

Templates

303375

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