Override bootstrap CSS for mobile header styling

Sparkling
1

Hi!

I’d like to override bootstrap styling in my mobile header on my site, because bootstrap does some weird things with the borders in my header (see attached screenshot). Bootstrap uses the following css:

.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;

On desktop, I have a double border at the bottom of the header. I’d like to do the same on mobile or remove the border.
I have tried modifying the following css in my style.css without success:

.navbar.navbar-default {
  margin-bottom: 0;
  font-weight: 500;
  border-bottom: 4px double #D7D7D7;
}
@media (max-width: 767px) {
  .navbar.navbar-default {
  border: none !important;
  }
}

How can I override the bootstrap css without modifying the actual bootstrap css file?

2

Hi @tjuel,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

nav.navbar.navbar-default {
    border-bottom: 4px double #D7D7D7;
}

Best Regards,
Movin