Hi! I added this css also, however the lines that separate the links are a little larger then the top bar and hang down into my slider. anyway to fix that? temp site url is: http://17c.e5f.myftpupload.com
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):
#header-outer .sf-menu li ul li.menu-item a {
font-size: 14px !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 (max-width: 999px) {
/*Mobile page header font size*/
#page-header-bg .span_6 h1, #page-header-bg.fullscreen-header .span_6 h1 {
font-size: 55px;
line-height: 60px;
}
/*Mobile page header font size*/
body #page-header-bg.fullscreen-header .span_6 span.subheader {
font-size: 35px !important;
line-height: 60px !important;
}
}
Thank you as always Andrew, that worked. The only issue is that the background on the subtitle when the line breaks is cut off. Is there a was to make it even?
Thank you for the follow-up and for your patience.
Please add the following CSS to your custom CSS box:
@media only screen and (max-width: 999px) {
body #page-header-bg .span_6 span.subheader {
display: inline !important; /* You can remove this if not needed */
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
line-height: 1.5em !important;
padding: 5px 10px !important;
}
}
This should give you the clean, even background you’re looking for, even when the text wraps onto multiple lines.
Give it a try and let us know if it resolves the issue.
Hi!
Id like to change the font size of the top secondary navigation.
Hey!
html body #header-secondary-outer nav > ul > li > a { font-size: 18px !important; line-height: 18px !important; }
Salient Support Team | Say Hello!
Great works !
thanks :)
Hi! I added this css also, however the lines that separate the links are a little larger then the top bar and hang down into my slider. anyway to fix that? temp site url is: http://17c.e5f.myftpupload.com
Hey ,
#header-secondary-outer nav > ul > li:last-child { border: none !important; }
Thanks
Salient Support Team | Say Hello!
Hi, i also want to increase the font siz, this works, but only on top. The Dropdown items are still small.
Do you have a solution for this?
Many thanks in advance!
Hi Ja,
Thank you for getting back to us.
Please share your site URL so we can look into this for you. The link you shared seems to not be working.
We look forward to your reply.
Regards,
Hi Andrew,
you find the site here:
https://sonalis-group.de/sutherland/
Best regards and many thanks in advance!
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):
#header-outer .sf-menu li ul li.menu-item a { font-size: 14px !important; }Thanks
Salient Support Team | Say Hello!
Hello Tahir,
worked perfect!
Thank you very much!
Hi there,
how do I change the header/subheader font size for mobile view?
thanks so much!
warmly,
Rian
Hi Rian,
Thank you for getting in touch.
Please share your site URL so we can check this out and advise.
We look forward to your reply.
Thanks,
Thanks Andrew! it's https://we-launch.studio/
Hi Rian,
Thank you for getting in touch.
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 (max-width: 999px) { /*Mobile page header font size*/ #page-header-bg .span_6 h1, #page-header-bg.fullscreen-header .span_6 h1 { font-size: 55px; line-height: 60px; } /*Mobile page header font size*/ body #page-header-bg.fullscreen-header .span_6 span.subheader { font-size: 35px !important; line-height: 60px !important; } }Try that and let us know how it goes.
Thanks
Thank you as always Andrew, that worked. The only issue is that the background on the subtitle when the line breaks is cut off. Is there a was to make it even?
Attached files: PHOTO-2025-07-03-09-20-48.jpg
Hi Rian,
Thank you for the follow-up and for your patience.
Please add the following CSS to your custom CSS box:
@media only screen and (max-width: 999px) { body #page-header-bg .span_6 span.subheader { display: inline !important; /* You can remove this if not needed */ -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.5em !important; padding: 5px 10px !important; } }This should give you the clean, even background you’re looking for, even when the text wraps onto multiple lines.
Give it a try and let us know if it resolves the issue.
Thanks again,