CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3responsive-design
Kishor Rajendra Kulkarni
Kishor Rajendra Kulkarni

Reputation: 57

How to override bootstrap css with other css?

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!!!

Upvotes: 1

Views: 355

Answers (2)

sanjith edward
sanjith edward

Reputation: 358

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

Upvotes: 2

Dee
Dee

Reputation: 714

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?

Upvotes: 0

Related Questions