Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#top nav ul .slide-out-widget-area-toggle a.using-label > span {
transform: translateY(10px) scale(1.5) !important;
}
body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"] .slide-out-widget-area-toggle a i.label {
font-size: 18px !important;
}
That works great for the most part, however there is one bug.
Whenever the small-nav is engaged, there is a transition rendering error for the nav. It does not happen on safari, which makes me think it's a webkit css rule that is making the error.
Can you please provide a fix for this?
I have gone through everything... I can't seem to find it the issue.
I am able to resolve the issue with the below CSS in Chrome. Let us know if it works for you?.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#top nav ul .slide-out-widget-area-toggle a.using-label > span {
backface-visibility: hidden !important;
}
I am trying to apply this to the mobile now, and the same selector won't do it for me. I have gone through Google inspect to find where to apply.. but with all the various rules and classes all over the place for each line.. I can't figure out how to translate the whole button.
This did not work for me, just simply applying the same rule for mobile:
@media only screen and (min-width: 1px) and (max-width: 999px) { #top nav ul .slide-out-widget-area-toggle a.using-label > span { transform: translateY(20px) scale(2) !important; position: relative; right: 9px; }
body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"] .slide-out-widget-area-toggle a i.label { font-size: 18px !important; } }
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1px) and (max-width: 999px) {
#top .span_9 > .slide-out-widget-area-toggle {
transform: translateY(10px) translateX(-15px) scale(1.2) !important;
backface-visibility: hidden !important;
}
}
This might help with finding the selector: https://community.tealiumiq.com/t5/Extensions/How-to-Determine-the-CSS-Selector-of-an-Element/ta-p/28227#:~:text=Google%20Chrome%20Developer%20Tools,-Finding%20the%20selector&text=To%20find%20the%20CSS%20selector,and%20select%20Copy%20%3E%20Copy%20selector.
You can find the selectors using Inspect Element as mentioned by Andrew. If it does not work try adding "!important" to increase the CSS selector specificity or choose a selector which has more css classes and ID's in it.
Hi there,
I have moved the menu text to the top as I will be adding additional navigation to the left of the hamburger button.
Now I am wondering how I can adjust the size of text to be consistent with the menu button, and also adjust size of menu button.
Thanks.
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#top nav ul .slide-out-widget-area-toggle a.using-label > span { transform: translateY(10px) scale(1.5) !important; } body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"] .slide-out-widget-area-toggle a i.label { font-size: 18px !important; }Thanks
ThemeNectar Support Team
That works great for the most part, however there is one bug.
Whenever the small-nav is engaged, there is a transition rendering error for the nav. It does not happen on safari, which makes me think it's a webkit css rule that is making the error.
Can you please provide a fix for this?
I have gone through everything... I can't seem to find it the issue.
Hey Again,
I am able to resolve the issue with the below CSS in Chrome. Let us know if it works for you?.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#top nav ul .slide-out-widget-area-toggle a.using-label > span { backface-visibility: hidden !important; }Thanks
ThemeNectar Support Team
Wow, very impressive non-conventional fix. Thanks so much.
I am trying to apply this to the mobile now, and the same selector won't do it for me. I have gone through Google inspect to find where to apply.. but with all the various rules and classes all over the place for each line.. I can't figure out how to translate the whole button.
This did not work for me, just simply applying the same rule for mobile:
@media only screen and (min-width: 1px) and (max-width: 999px) {
#top nav ul .slide-out-widget-area-toggle a.using-label > span {
transform: translateY(20px) scale(2) !important;
position: relative;
right: 9px;
}
body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"] .slide-out-widget-area-toggle a i.label {
font-size: 18px !important;
}
}
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1px) and (max-width: 999px) { #top .span_9 > .slide-out-widget-area-toggle { transform: translateY(10px) translateX(-15px) scale(1.2) !important; backface-visibility: hidden !important; } }Thanks
ThemeNectar Support Team
Great, worked perfectly with some tweaking, not the best options for positioning though I'm sure:
@media only screen and (min-width: 1px) and (max-width: 999px) {
#top .span_9 > .slide-out-widget-area-toggle {
transform: translateY(1px) translateX(1px) scale(1.6) !important;
backface-visibility: hidden !important;
position: relative;
right: 20px;
top: 8px
}
body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"] .slide-out-widget-area-toggle a i.label {
font-size: 9.2px !important;
position: relative;
top: -15px;
left: 38.5px
}
}
Can I ask you how you find your selectors? I try using:
Google inspect > right click class > copy selector
This usually doesn't seem to work though.
Hi Corey,
This might help with finding the selector: https://community.tealiumiq.com/t5/Extensions/How-to-Determine-the-CSS-Selector-of-an-Element/ta-p/28227#:~:text=Google%20Chrome%20Developer%20Tools,-Finding%20the%20selector&text=To%20find%20the%20CSS%20selector,and%20select%20Copy%20%3E%20Copy%20selector.
Thanks.
Yeah there is already a copy selector option in Google Chrome Tools.
I've noticed that the selectors copied don't work though and are different than Tahir's, so I was wondering how his process is to find the selectors.
Hey Again, Hope you had a Positive Weekend,
You can find the selectors using Inspect Element as mentioned by Andrew. If it does not work try adding "!important" to increase the CSS selector specificity or choose a selector which has more css classes and ID's in it.
Thanks
ThemeNectar Support Team