My client wants to make the background of off-screen navigation button the same size as the logo.
Currently I did that by manually adjusting logo size for mobile, which is 42px, so it matches, but I want it to match on desktop as well.
I tried by increasing font size for that section but it messes up everything, paddings are not good, size is, but it looks bad.
Ideal solution would be if I left the font as it is and just resized the background to match height of the logo line, and to remain in the aspect it is right now by setting width to AUTO.
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 >li[class*="button_solid_color"] >a:before, #header-outer.transparent #top nav >ul >li[class*="button_solid_color"] >a:before, #top .slide-out-widget-area-toggle[data-custom-color="true"] a:before {
padding-bottom: 0px !important;
}
@media only screen and (max-width: 999px) and (min-width: 1px) {
body #header-outer #top .slide-out-widget-area-toggle[data-custom-color="true"] a:before {
width: 100% !important;
height: 33px !important;
}
}
Hello guys,
I have one quick question.
My client wants to make the background of off-screen navigation button the same size as the logo.
Currently I did that by manually adjusting logo size for mobile, which is 42px, so it matches, but I want it to match on desktop as well.
I tried by increasing font size for that section but it messes up everything, paddings are not good, size is, but it looks bad.
Ideal solution would be if I left the font as it is and just resized the background to match height of the logo line, and to remain in the aspect it is right now by setting width to AUTO.
What do you suggest?
Thanks in advance!
Hi Bojan,
Try the following custom css in Salient > General settings > CSS/Script related:
body #header-outer #top .slide-out-widget-area-toggle[data-custom-color="true"] a:before { height: 85px; width: 145px; }Hope this helps.
Hi Andrew,
Thanks for this, it definitely takes me closer to what I need but it creates a few new problems.
First one is that on desktop it goes too far right, and it's now having the same left padding as the logo is having on the right.
Second, it's as big on mobile as it's big on desktop, I would like to keep mobile size as it is now - 42px.
Best regards!
Also, here is the printscreen how how it looks now :)
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 >li[class*="button_solid_color"] >a:before, #header-outer.transparent #top nav >ul >li[class*="button_solid_color"] >a:before, #top .slide-out-widget-area-toggle[data-custom-color="true"] a:before { padding-bottom: 0px !important; } @media only screen and (max-width: 999px) and (min-width: 1px) { body #header-outer #top .slide-out-widget-area-toggle[data-custom-color="true"] a:before { width: 100% !important; height: 33px !important; } }Thanks
ThemeNectar Support Team