1

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Kishor Rajendra Kulkarni
  • 57
  • 2
  • 15

2 Answers2

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.

sanjith edward
  • 358
  • 4
  • 12
  • Be careful using !important. It's better to override the Bootstrap styles using CSS specificity. – Carol Skelly Feb 06 '15 at 09:29
  • you cannot override a bootstrap !important style without using !important Skelly – sanjith edward Feb 06 '15 at 09:33
  • 1
    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" __ http://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-css-property – Carol Skelly Feb 06 '15 at 09:41
  • what should the developer do if bootstrap uses !important for a certain style he needs to override? Is there any other way? – sanjith edward Feb 06 '15 at 09:45
  • Use CSS specificity. There's a great answer here: http://stackoverflow.com/questions/19768794/custom-css-being-overridden-by-bootstrap-css – Carol Skelly Feb 06 '15 at 09:52
  • that is of course a great answer. But, for example:- in bootstrap:- .pull-right { float: right; !important} how to override this only using css without !important??? ONLY CSS – sanjith edward Feb 06 '15 at 09:59
  • What would be the use case for needing to override `pull-right`? Since it is a *utility class* you wouldn't add it to an element unless you needed the element to float right. I don't see why you'd use `pull-right` and then override it. – Carol Skelly Feb 06 '15 at 10:03
  • not my point actually. what i am trying to tell is, there is no other wat to override an !important style rather than using !important. I clearly specified that if bootstrap classes use !important, override them with !important. This is not a best practice. but, unavoidable in certain circumstances. anyway, I will edit the answer. Thanks for the insight. – sanjith edward Feb 06 '15 at 10:08
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/70378/discussion-between-sanjith-edward-and-skelly). – sanjith edward Feb 06 '15 at 10:12
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?

Dee
  • 704
  • 5
  • 6