Craig February 2016

Bootstrap causing issues with my CSS

So I've looked at the other questions on here about Bootstrap overriding original CSS files but none helped fix my problem. I put my CSS file last and no luck. I have a hamburger in the top right corner and it becomes a black square, it works but when you click on it the slide menu goes behind my grid instead of in front of it. Also my Google fonts and sizing of text is not working. My links as they are now. My script file is at the bottom of the body.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link href='https://fonts.googleapis.com/css?family=Cabin:400,700|Arvo:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="AOS-Gallery.css">

https://jsfiddle.net/vrrfd1gx/4/

Below in Aziz's answer he help fix the issue with menu showing up behind the grid but claimed Bootstrap wasn't overriding my CSS. If I go to the inspector to view my page I can see it is. As a result the demo Aziz supplies does indeed work but the font is from BS not the one I put in and the font size is wrong too. Also all my other pages for this website design without BS didn't need the added margin for the inner divs as Aziz suggests, which again makes me thing BS is affecting my CSS. Any thoughts?

Answers


Aziz February 2016

I don't think it is a problem with bootstrap, the inner divs simply have no gaps between them, you can space them out using margins:

.button div {
    height: 10%;
    margin-bottom: 10%;
    background: #000;
    cursor: pointer;
    transition: .5s;
}

Also, if you want an element to be positioned from the RIGHT side of the viewport, use right: 50px instead of left: 1000px to ensure consistency across different screen sizes

.button {
    position: absolute;
    top: 30px;
    right: 50px;
    width: 45px;
    height: 50px;
}

And lastly, your menu was showing behind the gallery, apply a higher z-index to make sure it's on top:

 .menu-in {
   -webkit-animation: menu-in .9s forwards ease;
   z-index:2;
 }

Working jsFiddle Demo

Post Status

Asked in February 2016
Viewed 3,609 times
Voted 8
Answered 1 times

Search




Leave an answer