Please help us help you and fill where relevant:
Your LimeSurvey version: 6.1.7+230710
Own server or LimeSurvey hosting: Own server
Survey theme/template: Extended fruity theme.
==================

Hi guys.  Question:

1)  QUESTION: I think I have discovered most of the classes that I am interested in overriding, however, when I change the navbar colour I see a horizontal line above the menu hyperlinks in the navbar.  Can someone give me a hint on what class handles that and how to change it?

The horizontal line is circled in the attached screenshot.

2) I have looked at all of the documentation, googled and searched forums and cannot find the correct class to override for either case.  I have also leaned how to use bootswatch themes in my custom.css, but the reality is that the Fruity theme is basically perfect and I only need to fiddle with a few classes to adjust the colours and layout.

3) Here is my custom.css css for reference:

/* navbar center logo */
.navbar-header {
    float: none;
    margin: 0 auto; }
 
.navbar-brand.logo-container {
    display: block !important;
    float: none;
    margin: 0 auto;
    text-align: center; }
 
.navbar-brand > img { 
    margin: 0 auto; }
    
/* navbar set color to navy blue */
.fruity .navbar { background-color: #1b3448 !important; }

/* navigation buttons at bottom, push a bit up */
.navigator {
    margin-top: -50px; }

/* center the forms in the middle */
.outerframe {
    width: 800px;
    border: 1px solid red;
    display: flex;
    justify-content: center; }

.survey-form-container{
    width: 400px;
    border: 1px solid red; } 

/* just a test, change radio buttons text colour */
.list-radio {
         color: blue; }

/* trying to center the progress bar in it's container */
.top-container {
    border: 1px solid red;
    display: flex;
    justify-content: center;
}

.progress {
    width: 400px;
    border: 1px solid red;
}

/* test - change progress bar colour */
.tch-01 .progress-bar {
    background-color: #3300FF;
    width: 800px;
}

/* question fonts */
.question-text {
    color: black;
    font-size: 26px; 
    line-height: 26px;
}

/* hide the asterisk */
 .asterisk { display:none; }
 
 #ls-button-previous {
   background-color:red;
   color:yellow;
}
#ls-button-submit {
   background-color:yellow;
   color:maroon;
}

 ul.nav a { color: #fff !important; }
 ul.nav a:hover { color: #fff !important; }
 
Any suggestions and critiques of my css are ABSOLUTELY welcome.

Thanks.



 

Looks like some "horizontal line tag". Search for something like this in the theme files:

Can you attach a link to a test survey?

I am just following to post:

1) Thank you kindly for the follow up.

2) I have gone through a number of iterations of theme edits / extensions and I cannot reproduce the issue successfully.

I will follow up on this item in the future if I re-discover the issue and can provide a sample.

Thanks again.