Okay
  Public Ticket #324555
Secondary Nav Font Size
Open

Comments

  • Ja started the conversation

    Hi!

    Id like to change the font size of the top secondary navigation. 

  •  9,333
    Tahir replied

    Hey!

    Add this into the Custom CSS box located in your Salient Options panel :
    html body #header-secondary-outer nav > ul > li > a {
        font-size: 18px !important;
        line-height: 18px !important;
    }
    Thanks 


     Salient Support Team |  Say Hello!

  • Ja replied

    Great works !

    thanks :)

  • [deleted] replied

    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

  •  9,333
    Tahir replied

    Hey ,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    #header-secondary-outer nav > ul > li:last-child {
        border: none !important;
    }

    Thanks


     Salient Support Team |  Say Hello!

  •  2
    grafenstein77 replied

    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!

  •  3,234
    Andrew replied

    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,

  •  2
    grafenstein77 replied

    Hi Andrew, 

    you find the site here: 

    https://sonalis-group.de/sutherland/

    Best regards and many thanks in advance!

  •  9,333
    Tahir replied

    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!

  •  2
    grafenstein77 replied

    Hello Tahir, 

    worked perfect! 

    Thank you very much!


  •  2
    Rian replied

    Hi there,

    how do I change the header/subheader font size for mobile view?

    thanks so much!


    warmly,

    Rian

  •  3,234
    Andrew replied

    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,

  •  2
  •  3,234
    Andrew replied

    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

  •  2
    Rian replied

    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

  •  321
    Noah replied

    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,