How to ignore bootstrap codes from main css
Question
PROBLEM: I am having problems in my bootstrap imports that seems to be affecting my link logo and social icon border. If i remove the link for the bootstrap, the logo and icon borders will work fine. However, I need the bootstrap tag for the gallery. Can someone help me fix this?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
This is the source of error (Specifically the code above) :
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
</head>
This is my current output with the link for the bootstrap enabled.You could see that the logo and social box is not properly placed.
This is what it looks like when i commented the bootstrap link. You can see that the logo and social border works fine, but the gallery does not.
Is there anyway for me to fix both?
HERE IS THE HTML CODE
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<a name="home">
<!--- Start Navigation -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/main.js"></script> <!--- For Navigation -->
<!---ADD NAVIGATION HERE-->
<div class="logo">
<a href="index.php"><img src="images/seafoodLogo.png"></a>
</div>
<div class="nav-outer">
<div class="nav-wrap">
<nav class="navigation">
<div class='nav' nav-menu-style="yoga">
<ul class="nav-menu">
<li> <a href="explore.php">EXPLORE</a></li>
<li> <a href="menu.php">MENU</a></li>
<li> <a href="#gallery">GALLERY</a></li>
<li> <a href="reservation.php">RESERVATION</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="nav-clear"></div>
<!--- End Navigation -->
<div class="clearfix"></div>
<!-- Start of Content -->
<h1> Check out some of our Suggested Paluto!</h1>
<section class="paluto">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs1.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Sweet Chili Crab</h3>
<p>Considered as one of our year-round staples, our bright and bold #ChiliCrab packs a lot of flavor and heat! If you prefer to have it mildly spiced, our kitchen team is flexible with all types and tastes and preference.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs2.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Grilled Crab</h3>
<p>Our take on #GrilledCrab is deliciously simple and oozing with smoky flavor. Plus it's meaty and guaranteed fresh! Contact us on our Facebook fan page for booking and inquiries.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs3.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Sweet Chili Crab with Black Pepper</h3>
<p>Thankfully, crabs are always at full swing and piled high in our #seafoodrestaurant! Roll up your sleeves and get ready to indulge our #chilicrab that's deliciously drenched with garlic and herbs. We're open 'til 10:30 pm so it's never too late to satisfy your cravings for crustaceans!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End of Content -->
<div class="clearfix"></div>
<footer>
<center>
<a href="https://www.facebook.com/seafoodmarketandrestaurant/" target="_blank" title="Follow us on Facebook" class="fa fa-facebook" style="margin-bottom: 10px;"></a></center>
<p> © 2018 SABREEN'S SEAFOOD MARKET & RESTAURANT ALL RIGHTS RESERVED</p>
</footer>
</body>
HERE IS THE CSS CODE FOR MY NAV.CSS AND STYLES.CSS
/*styles.css*/
/*---Body Font--*/
@import url(https://fonts.googleapis.com/css?family=Hindi);
/*---Heading Font--*/
@import url(https://fonts.googleapis.com/css?family=Nobile);
/*---Social Font--*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
/*---Menu Gallery Font--*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #fffdf9;
font-family: 'Times New Roman', Times, serif;
font-size: 18px;
position: relative;
}
h1 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
font-size: 175%;
color: #494949;
text-transform: uppercase;
letter-spacing: 3px;
padding: 3% 0;
}
h2 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
font-size: 150%;
color: #494949;
text-transform: uppercase;
letter-spacing: 3px;
padding: 3% 0;
}
h3 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
color: #494949;
text-transform: uppercase;
letter-spacing: 1%;
}
p {
padding: 2%;
color: #4A4444;
text-align: justify;
font-size: 125%;
}
img {
max-width: 100%;
max-height: auto;
}
#banner-wrapper {
max-width: 1280px;
margin: 0 auto;
}
/*---Start Image Slider Style--*/
.slider {
width: 100%;
}
.slider1 img {
min-width: 100%;
}
.slider .bx-wrapper .bx-controls-direction a {
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
z-index: 5;
}
.slider .bx-wrapper .bx-prev {
background: #000 url("img/left-arrow-white.png") no-repeat 8px 13px;
left: 0;
opacity: 0.3;
}
.slider .bx-wrapper .bx-prev:hover {
opacity: 0.6;
}
.slider .bx-wrapper .bx-next {
background: #000 url("img/right-arrow-white.png") no-repeat 10px 12px;
right: 0px;
opacity: 0.3;
}
.slider .bx-wrapper .bx-next:hover {
opacity: 0.6;
}
/*---End Image Slider Style--*/
.reservation {
margin-top: 25px;
}
.reservation p {
width: 70%;
text-align: center;
}
.one-half {
width: 44%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
}
.one-third {
width: 28%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
}
.left-col {
width: 60%;
float: left;
margin: 4% 0 4% 4%;
}
.sidebar {
width: 26%;
float: right;
margin: 4% 4%;
}
.sidebar img {
opacity: 1;
}
.clearfix {
clear: both;
}
/*---Start Parallax Section--*/
.parallax-1 {
background: url("../images/parallaxBG.jpg") fixed 100%;
text-align: center;
max-height: 300px
}
.parallax-inner {
padding-top: 90px;
padding-bottom: 300px;
}
.parallax-2 {
background: url("https://www.w3newbie.com/wp-content/uploads/black-pattern.jpg") repeat fixed 100%;
text-align: center;
}
.parallax-inner h3, .parallax-inner p{
color: #F1F1F1;
}
/*---End Parallax Section--*/
/*Start of Menu Gallery Section*/
section.paluto {
padding: 50px 0 0 ;
}
.box-paluto {
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
background: #000;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
transition: .5s;
}
.box-paluto:hover {
transform: translateY(-30px);
}
.box-paluto .imgBox-paluto {
position: relative;
}
.box-paluto .imgBox-paluto img {
transition: .5s;
width: 100%;
}
.box-paluto:hover .imgBox-paluto img {
opacity: .5;
transform: translateY(-20px);
}
.box-paluto .content-paluto{
position: absolute;
bottom: -30px;
left: 0;
padding: 20px;
box-sizing; border-box;
transition: .5s;
opacity: 0;
}
.box-paluto:hover .content-paluto{
opacity: 1;
bottom: 0;
}
.box-paluto .content-paluto h3{
font-size: 28px;
color: #fff;
font-weight: 700;
}
.box-paluto .content-paluto p{
font-size: 15px;
color: #fff;
font-weight: 400;
}
@media only screen and (max-width: 700px){
.box-paluto{
height: auto;
max-width: 100%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.box-paluto{
max-height: 300px;
max-width: 300px;
margin: 15px 0;
}
}
/*End of Menu Gallery Section*/
/*Start of Social*/
.fa {
padding: 5px;
margin: 2px;
font-size: 15px;
width: 15px;
height: 15px;
border-radius: 25%;
text-align: center;
justify-content: center;
text-decoration: none;
border: 4px solid #d3d3d3;
transition: all 0.5s;
background: #fff;
}
.fa:hover {
-webkit-animation: expand 0.5s ease-in-out;
-moz-animation: expand 0.5s ease-in-out;
animation: expand 0.5s ease-in-out;
color: #fff;
}
@keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
@-webkit-keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
@-moz-keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
.fa-facebook {
color: #3B5998;
}
.fa-facebook:hover {
background: #3B5998;
}
/*End of Social*/
/*---Start Footer--*/
footer {
background: #fffdf9;
opacity: 0.9;
width: 100%;
/*margin-top: 5%;*/
padding: 1% 0;
overflow: auto;
}
footer p{
color: #fff;
text-align: center;
font-size: 12px;
background-image: linear-gradient(to left, #d0d5de, #001947 40%, #001947 60%, #d0d5de 100%);
padding: 7px 0;
}
iframe {
width: 60%;
height: 400px;
}
/*---Start Media Queries--*/
@media screen and (max-width: 768px) {
.slider .bx-wrapper .bx-controls {
display: none;
}
.parallax-inner {
display: none;
}
.one-third {
width: 100%;
margin: 4% 0;
}
.one-half {
display: none;
}
h1 {
font-size: 125%;
}
.left-col {
width: 100%;
margin: 0 0 3% 0;
}
.sidebar {
width: 100%;
margin: 0;
}
.sidebar img {
max-width: 75%;
height: auto;
}
h3 {
padding-top: 3%;
}
.social-container {
display: block;
}
footer{
margin-top: 15px;
}
.reservation p {
margin-top: 155px;
width: 80%;
}
iframe {
width: 80%;
height: 400px;
}
}
/*nav.css*/
@import url(https://fonts.googleapis.com/css?family=Questrial);
/*--- Nav Font --*/
/*--- Start Navigation Style --*/
.nav-outer {
width: 100%;
height: 67px;
background: #fffdf9;
position: fixed !important;
z-index: 1;
}
.nav-wrap {
max-width: 100%;
margin: 0 auto;
}
nav {
margin-top: 0;
background: #fffdf9;
font-family: 'Times New Roman', Times, serif;
}
.nav ul {
overflow:hidden;
list-style:none;
}
.nav-button:hover {
cursor:pointer;
}
.navigation {
clear: both;
width: 100%;
position: relative;
}
.nav a {
color: #494949;
text-transform: uppercase;
text-decoration:none;
}
body .nav .nav-menu li a {
display:inline-block;
margin-top: 10px;
padding:15px 20px;
color: #494949;
font-size: 19px;
}
.nav.yoga .nav-menu li.active a {
color: #494949;
text-decoration: underline;
}
.nav.yoga .nav-menu li a:hover {
color: #494949;
text-decoration: underline;
}
.nav.yoga .nav-toggled {
min-height:36px;
border-radius:6px;
margin-top: -7px;
}
.nav.yoga .nav-toggled-controls {
display:block;
height:40px;
text-align:left;
position:relative;
}
.nav.yoga .nav-toggled-title {
position:relative;
top:9px;
left:15px;
font-size:16px;
}
.nav.yoga .nav-button {
display:block;
position:absolute;
right:15px;
top:8px;
background: #0a0c42;
}
.nav.yoga .nav-button span {
display:block;
margin-top:4px;
height:2px;
background: #0a0c42;
width:24px;
}
.nav-toggled-controls{
border-bottom: 0px solid #0a0c42;
}
.nav.yoga .nav-toggled ul li a {
display:block;
width:100%;
background-color: #505E67;
text-align:left;
padding:10px 0px 10px 15px;
border-bottom:1px solid #FFF;
text-align: center;
font-size: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav.yoga .nav-toggled ul li ul a {
font-size: 15px;
text-transform: none;
}
.nav.yoga .nav-toggled ul li.active a {
background-color: #F5F5F5;
color: #505E67;
}
.nav.yoga .nav-toggled ul li a:hover {
background: #F5F5F5;
color: #505E67;
}
.nav.yoga .nav-toggled ul li {
position: relative;
}
.toggle-sm:after {
position: absolute;
right: 15px;
top: 10px;
font-size: 18px;
line-height: 25px;
}
.toggle-sm:after {
content: '+';
cursor: pointer;
}
.toggle-sm.open:after {
content: '-';
cursor: pointer;
}
.nav .nav-menu {
text-align: center;
overflow: visible;
min-height: 56px;
padding-left: 0;
margin: 0;
}
@media (min-width: 823px) {
.nav {
float: right;
}
.logo {
float: left;
}
}
@media screen and (max-width: 822px) {
body .nav .nav-menu li a {
margin-top: 4px;
}
.logo img {
max-width: 135px !important;
margin-bottom: 3px;
}
.nav-outer {
height: 21px;
}
.nav.yoga .nav-toggled-controls {
top: -40px;
margin-bottom: -36px;
}
.nav-clear {
padding-top: 37px;
margin-bottom: -15px;
}
}
.logo img {
max-height: 100px;
height: auto;
margin-left: 30px;
margin-bottom: 5px;
background-color: #002859;
z-index: 2;
position: absolute;
padding: 70px 10px 50px 10px;
background-image: linear-gradient(#253688, #060729);
}
.navigation:after {
content: "";
display: table;
clear: both;
}
.nav .nav-menu li {
display:inline-block;
padding:0px;
margin:0px !important;
position: relative;
}
.nav-button:hover {
cursor:pointer;
}
.nav .nav-toggled ul {
display:none;
margin:0px ;
padding:0px ;
position: relative;
}
.nav .nav-menu > li > ul {
position: absolute;
z-index: 10000000000;
top: 50px;
text-align: left;
background: #505E67;
width: 100%;
padding-left: 0;
display: none;
}
.nav.yoga .nav-menu > li > ul a {
padding: 11px 15px;
font-size: 18px;
font-weight: normal;
text-transform: none;
}
.nav .nav-menu > li > ul li {
position: relative;
width: 100%;
text-align: center;
}
.nav .nav-menu > li > ul > li ul {
position: absolute;
right: -100%;
top: 0;
width: 100%;
padding-left: 0;
background: #505E67;
}
.nav .nav-menu > li > ul > li ul a {
white-space: nowrap;
}
.nav ul {
overflow: visible;
}
.has-children {
position: relative;
}
.has-children:after {
content: '+';
color: #FFF;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
cursor: pointer;
}
.has-children:hover:after {
content: '-';
color: #FFF;
cursor: pointer;
}
body .nav .nav-menu li a {
padding: 15px 30px;
}
.clicker {
width: 45px;
height: 45px;
position: absolute;
right: 0;
z-index: 30000;
}
.nav-clear {
clear: both;
padding-top: 67px;
}
/*--- End Navigation Style --*/
/*--------------------MEDIA!!!---------------*/
@media screen and (max-width: 768px) {
#banner-wrapper {
position: relative;
-ms-overflow-x: hidden;
overflow-x: hidden;
}
.nav-menu {
display: none;
}
}
2 answers
solution1
0 2018-09-25 10:03:40
add your bootstrap css at the top
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
rel="stylesheet" >
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
</head>
solution2
0 2018-09-25 10:24:33
As you have not posted the full code here , I can suggest you to do this List out all the properties that are overlapping when you add the external CSS File.
for suppose i have a <div class="firstDiv" id="firstDivId"></div>
1.Overwrite the properties which are affecting using !important property.
In file1 i have
.firstDiv{
width:33%;
}
which is overridden by bootstrap css
.firstDiv{
width:100%;
}
In file1 you update the property using !important
.firstDiv{
width:33%!important;
}
2.download the css file , attach to your project then update the bootstrap.css file with :not selector
In bootstrap.css property should be like
.firstDiv:not('#firstDivId'){
width:33%;
}
Hope this may help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to ignore the specific CSS codes coming from the WordPress plugin stylesheet?
How to ignore the CSS style from the parent box?
with main css messed up bootstrap css
Bootstrap thumbnail images ignore centering css
How to ignore global css?
How to stop mobile CSS from getting overridden by main CSS
how to achieve this this horizontal line from css or bootstrap
how to horizontally inline from using bootstrap or css
How to ignore a scrollbar width in CSS?
How to ignore CSS bottom property?
Related Tags