How to override bootstrap css with other css?

Question

I am totally new in bootstrap. I am trying to make one website (http://riteceramic.com) responsive without changing its look and feel. I applied "nav nav-justified" class of bootstrap to my menu part. But i also want to apply "sf-menu" class to the same menu which is from other stylesheet i.e. "style.css" which contains below code. But its not working properly.

.sf-menu{
min-height:28px;
padding:0;
margin:0;
font-size:0;
line-height:0;}

.sf-menu ul{
position:absolute;
top:-999em;
width:190px;
left:0;
display:none;
background:#fff;
text-align:center;
padding:10px 0;
box-shadow:0 0 2px #ccc;}

.sf-menu > li{
position:relative;
display:inline-block;
margin:0 31px;}

.sf-menu > li > a {
text-decoration:none;
display:block;
font-family:  'Copperplate Gothic';
font-size:18px;
font-weight:bold;
line-height:22px;
text-transform:capitalize;
text-decoration:none;
color:#454545;
padding:0;
text-shadow:1px 1px #fbfbfb;}

.sf-menu > li.current > a, .sf-menu > li:hover > a, .sf-menu > li.sfHover > a {
    color:#ff9933;      text-decoration:none;   }

    .sf-menu li:hover ul,.sf-menu li.sfHover ul{top:35px; left:-55px; z-index:999;}
.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em}

.sf-menu li.current,.sf-menu li:hover,.sf-menu li.sfHover{
text-decoration:none;}

.sf-menu li li a{
display:block;
margin:0;
position:relative;
text-decoration:none;
font-size:14px;
line-height:18px;
color:#454545;
overflow:hidden;
padding:8px 5px 8px 5px;
text-transform:lowercase;
font-family: 'Open Sans', sans-serif;}

.sf-menu li li > a:hover, .sf-menu li li.sfHover > a, .sf-menu li li.current > a{
text-decoration:underline;}
.sf-menu li li li a {   background:url(../images/header-bg.png);}

.sf-menu li li{
float:none;
position:relative;
margin:0 0 1px 0;}
.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:181px;top:-10px;}

Can you please help me.. Thanks a ton!!!

sanjith edward · Accepted Answer · 2015-02-06 10:09:35Z

2

include this style.css after including bootstrap style-sheets. But the main thing is to include your style-sheet after the bootstrap style-sheets.

edited Feb 6, 2015 at 10:09

answered Feb 6, 2015 at 7:34

sanjith edward

3584 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Carol Skelly Over a year ago

Be careful using !important. It's better to override the Bootstrap styles using CSS specificity.

sanjith edward Over a year ago

you cannot override a bootstrap !important style without using !important Skelly

Carol Skelly Over a year ago

Very few Bootstrap classes use !important. !important is only used in Bootstrap for print media & utility floats like pull-left and pull-right. Most styles can be simply overridden w/o using !important. It's not a best practice to just say "if bootstrap styles use !important for the specific class, use important in your styles too" __ stackoverflow.com/questions/8360190/…

sanjith edward Over a year ago

what should the developer do if bootstrap uses !important for a certain style he needs to override? Is there any other way?

Carol Skelly Over a year ago

Use CSS specificity. There's a great answer here: stackoverflow.com/questions/19768794/…

|

Dee · Accepted Answer · 2015-02-06 08:13:41Z

0

If this style is linked to the header correctly, you can run a simple test by add border: 1px solid red; to one of the css properties. I would also check the path. Can you post them here?

answered Feb 6, 2015 at 8:13

Dee

7145 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to override bootstrap css with other css?

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related