I cannot seem to find out why the mobile menu toggle button (hamburger icon) is dropping down below the header bar. No matter what I do it doesn't now change a thing. I was able to edit css and get it in a position, but lose clickable link at that point.
Awaiting an answer
Templates
Mobile Menu Toggle Button
13 replies
Paul Frankowski Senior Staff
Hi Jason.
You forgot to share the most impotant thing, template name and site URL. Otherwise I am blind, we have over 100 templates.
Jason VanDusen Asked this
Sorry!
51fiftyltm.com
JoomaShaper OneClip
Jason VanDusen Asked this
Are you able to see on the mobile version the menu toggle and search are below the header? Is there an easy way to fix this? Thanks in advance!
Paul Frankowski Senior Staff
Yes, Now I see what is wrong and I know why. It will be fixed in next Helix3 plugin update.
Here is temporary fix by Custom CSS, if you don't mind....
@media (max-width: 780px) {
#sp-logo {max-width: 45%; float: left;}
#sp-menu {padding-right: 0px; margin-right: 40px; max-width: 45%; float: right; }
}Inside Template Options > Custom COde > Custom CSS put above lines!
Jason VanDusen Asked this
Thank you Paul. I have inserted this code into the Custom CSS section of the template options, but nothing changed.
Paul Frankowski Senior Staff
My code is OK I can bet $1, only you have mess inside your custom CSS
For example that part, is wrong! one rule too much.
@media only screen and (max-width: 768px)
@media (max-width: 767px){- Just put myCSS code as first line, at the top/
- Save changes, check
- Then Validate your Custom CSS using Online validator
- Fix all major errors!
Jason VanDusen Asked this
So I don't know what happened, but now I have lost all control over custom css. I know this shouldn't be caused by what we've done, but that's all I have done.
Paul Frankowski Senior Staff
???
More details please / screenshot
Jason VanDusen Asked this
I hope this is how I'm supposed to upload screenshots.
If you can see these, there is a top bar that has background color through the layout options, is not showing. Also had custom css for that section being fixed and that's not working either.
Then you can see all custom button styles are not working. Different colors and shapes.
Jason VanDusen Asked this
And when I try and change the button styles within Pagbuilder it does not change.
Paul Frankowski Senior Staff
.... how I'm supposed to upload screenshots.
Upload image file somewhere and share link, that's all. There are tons of image hosting services ;)
Paul Frankowski Senior Staff
4 years ago
· edited
And when I try and change the button styles within Pagbuilder it does not change.
???? Sorry, maybe it's late here and I am tired, but what is relation to main question?
In Button addon ?
You should be also able to use Custom Style for button addon, and choose your own colors.
Yes, sometimes problem can be caused by template default preset styles :(
In your case: templates/shaper_oneclip/css/presets/preset4.css
I think button classes have to removed from that file. At least those
.btn-primary,
.sppb-btn-primary {
border-color: #bd1b20;
background-color: #bd1b20;
}
.btn-primary:hover,
.sppb-btn-primary:hover {
border-color: #901518;
background-color: #901518;
}
.btn.btn-link:hover,
.sppb-btn.sppb-btn-link:hover,
.btn.btn-lg.btn-link:hover,
.sppb-btn.sppb-btn-lg.sppb-btn-link:hover {
border-color: #bd1b20;
background-color: #bd1b20;
}and
.app-title-angel-border-major-color .sppb-addon-title:after,
.sppb-addon-animated-number.advanced:hover .sppb-animated-number-title,
.sppb-carousel.watch .sppb-carousel-indicators li:hover,
.sppb-carousel.watch .sppb-carousel-indicators li.active,
.btn.btn-primary,
.sppb-btn.sppb-btn-primary,
.btn.btn-lg.btn-primary,
.sppb-btn.sppb-btn-lg.sppb-btn-primary {
border-color: #bd1b20;
}
.btn.btn-primary:hover,
.sppb-btn.sppb-btn-primary:hover,
.btn.btn-lg.btn-primary:hover,
.sppb-btn.sppb-btn-lg.sppb-btn-primary:hover,
.btn.btn-primary:focus,
.sppb-btn.sppb-btn-primary:focus,
.btn.btn-lg.btn-primary:focus,
.sppb-btn.sppb-btn-lg.sppb-btn-primary:focus,
.btn.btn-primary:active,
.sppb-btn.sppb-btn-primary:active,
.btn.btn-lg.btn-primary:active,
.sppb-btn.sppb-btn-lg.sppb-btn-primary:active {
border-color: #871317;
}
Jason VanDusen Asked this
The custom styles are no longer working within the template settings for some reason. Nor are the layout settings. Is there something that would have caused these to not reflect on the site?
Log in to reply.