This question already has answers here:
Does :before not work on img elements?
(16 answers)
Closed 6 years ago.
I'm trying to put pseudo-element ::before with img but it just won't show. ( Is Bootstrap messing with it?)
I did look at other answers and tried to put content = "something" but it still won't show.
I also tried display: block too but it will still stay invisible.
Here's the HTML
<header class = "header container-fluid navbar navbar-fixed-top navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Anime</li>
<li>Manga</li>
<li>Games</li>
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li>
<a data-toggle="modal" data-target="#myModal" >Log-In</a>
</li>
<li>Sign-Up</li>
<li role="separator" class="divider"></li>
<li>Watch Paralax</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</header><!-- end of header-->
<!-- MAIN IMAGE -->
<div class = "container">
<img class = "img-responsive main-pic" src="http://vignette4.wikia.nocookie.net/naruto/images/d/dc/Naruto's_Sage_Mode.png/revision/latest?cb=20150124180545" alt = "naruto">
</div>
Here's the CSS
img{
margin-top:70px;
border-radius:10px;
}
img::before{
content:"This is not working";
color:black;
font-size:200px;
}
The before and after properties don't work on img elements for most browsers. See here - Does :before not work on img elements?
It is the same reason in my answer of other post.
From the specification.
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.
Related
This question already has answers here:
Change navbar color in Twitter Bootstrap
(12 answers)
Closed 5 years ago.
So this is the HTML I have right now. I am trying to change specific links in the navbar. The "font-family", "line-height", and "font-size" all work, but the color of the links will not change.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="resources/assets/yf_logo.svg">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Programs</a>
<ul class="dropdown-menu">
<li>Shelter</li>
<li>Drop-ins</li>
<li>Street Outreach</li>
<li>Community Partners</li>
<li>FAQ</li>
</ul>
</li>
<li class="textstyle16">Get Involved</li>
<li class="textstyle16">About</li>
<li class="textstyle16">Contact</li>
<li class="textstyle18">Donate</li>
</ul>
</div>
</div>
</nav>
Here is my first css
.textstyle16 {
font-family:"montserrat-regular";
font-size:18px;
line-height:21px;
color:#474747;
here is my second css
.textstyle18 {
font-family:"montserrat-regular";
font-size:18px;
line-height:21px;
color:#ffffff;
}
You need to use color: (not font:).
You need to use .textstyle16 a or .textstyle16 a:link as a selector. The links are child elements of the .textstyle16 elements, they don't have that class themselves, and there is a color declaration for a tags in the browsers default styles which applies if you don't use these selectors.
It is probably being overwritten elsewhere in your code. Add !important to the color definition. If this correct the color, then yes, it's being overwritten somewhere in your styles.
Right-click the link and "inspect" the link in Google Chrome or Firefox. You'll be able to see which styles are being applied to the link specifically.
Example:
I have a website running with Bootstrap. I'm trying to get an image to match its container's height (it's huge right now). I've seen make an image fit its container by setting the image height to the containers height but it's not working. My best guess as to why is because it's inside a link:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="/">K7DXS</a>-->
Here's the image:
<a class-"navbar-brand" class="k7dxslogo" href="/"><img src="/k7dxsblink.gif" class="k7dxslogo" alt="K7DXS" /></a>
The rest of the code:
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Linux</li>
<li>Ham Radio</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Partner Sites</li>
<li>External Links</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My relevant style.css:
.k7dxslogo {
height: 100%;
}
Why isn't it working, and how do I fix it?
EDIT: To be clear, I do NOT want to set a definite height for anything. To do so would make it so that the site is not responsive.
Add "img-responsive" class to your HTML img tag.
Set a defined height for navbar-brand
ever since I entered the code for a dropdown menu, scrollspy only hovers over the work items in the drop-down. It does not apply to the other a elements. I'm pretty sure I have the right data target. Thoughts? (I've tried referencing the code on the bootstrap documentation, w3, and another person's site. I must be missing something.)
<body data-spy="scroll" data-target=".navbar">
<div class="container-fluid">
<nav class="navbar navbar-inverse, navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="home navbar-brand">
Home
</div><!-- end home -->
</div><!-- end navbar-header -->
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
"Work"
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Work 1</li>
<li>Work 2</li>
</ul>
</li>
<li>FAQ</li>
<li>Contact
</li>
</ul>
</div><!-- nav -->
</div><!-- / nav container -->
</nav><!-- / navbar -->
This is probably too late for the original poster - but in case anybody else comes across this, the problem was probably because the target divs (or etc elements) of the dropdown links were hidden. According to Bootstrap's official documentation for ScrollSpy:
"Non-:visible target elements ignored
Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted."
(http://getbootstrap.com/javascript/#scrollspy)
This means if your dropdown link targets are invisible (i.e. hidden), the SpyScroll plugin won't work on them.
A workaround would be to add some hidden menus to the dropdown with the href id of some other empty elements just above and below your desired section. It may not be clear to understand my point, if anyone needs further clarification, please let me know and I'll be happy to elaborate :-)
I need move bootstrap elements of row div to the bottom of the page and make it responsive.
I tried add position:absolute to row class, but didn't worked so well.
How can i do this?
jsfiddle
I assume you are trying to absolutely position the element with the id bottom-list.
In order to make it go to the bottom of the page add
bottom:0;
to the selector.
In this way you specify the offset of the absolutely positioned element from the bottom of the containing element.
If however in your layout one of the parent elements has a CSS property
position: relative;
then this may work differently.
Hence I suggest the outermost container element i.e. .container must be absolutely positioned with bottom:0;
Edited fiddle: https://jsfiddle.net/fz93cgxd/4/
If you need to have a Responive bootstrap navbar fixed on bottom you may need to start with Bootstrap navbar itself then add your custom style on it
like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<nav class="navbar navbar-default nav-justified fixed-bootm navbar-fixed-bottom">
<div class="container-fluid ">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-tabs nav-justified">
<li class="active">01 INTRO <span class="sr-only">(current)</span></li>
<li>02 WORK</li>
<li>03 ABOUT</li>
<li>04 CONTACTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Note: all those code is with bootstrap style I didn't write a single line of CSS
Now you can start adding your custom styles
So I am trying to change the color of the navbar. I have worked with HTML and CSS, but havent really made design changes before. And for some reason I cannot figure out for the life of me how to make changes to this html/css template I downloaded.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">CandyCode</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>About
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I am not really sure what to change in the CSS. Essentially I would like to change the navbars color to #77bbb0. I can show more code, but I think for the sake of clarity, you can check out the code here: http://startbootstrap.com/blog-home.
Thank for helping a design noob!
The easiest way is to give the HTML element in question an id and then add the CSS rule:
#the_id_i_gave_it { background:#77bbb0; }
However, if you can't or don't want to edit the markup, you can chain together the various classes on the element to give your rule high specificity:
.navbar.navbar-inverse.navbar-fixed-top { background:#77bbb0; }
As long as those classes don't change that should be specific enough to get just the div you want and no others.