i have this code for navbar all works perfectly but when i try to replaced the text by an image the image does not displaying.
here's the code:
<img src="DAR.png" class="img-responsive"><b class="caret"></b>
<ul class="dropdown-menu">
<li>Sign-in</li>
<li>Sign-up</li>
</ul>
You can add a image inside link. check out this fiddle. And make sure that path to the image is correct. If the path is right it should work. I changed your image and its working now.
<img src="https://s13.postimg.org/pzvk4df07/1475139047_three_bars.png" class="img-responsive"><b class="caret"></b>
<ul class="dropdown-menu">
<li>Sign-in</li>
<li>Sign-up</li>
</ul>
I think your trying to add an image to your navbar. If so you will need to add the image with css inside your nav. Remove your img link. You can do this :
<b class="caret"></b>
<ul class="dropdown-menu">
<li>Sign-in</li>
<li>Sign-up</li>
</ul>
Inside your css add this :
#nav {
background-image:url('DAR.png');
}
Related
I have the code below for my nav bar. I want the text in the "Download Freebies" item to change color when the mouse is hovered over it. I am only editing an existing template and there's some css already written for it in the style sheet (for "single-freebie" and "freebie-box"). What can I add (and where) to make the text "Download Freebies" change color to blue when the mouse is hovered over it.
PS: I've already tried the ":hover" and maybe one or two other "solutions" I found online. The color isn't changing and the border of the "Download Freebies" instead jumps upwards or sideways when hovered. I know I am doing something wrong but can't figure out what it is. I am happy to post more code if you specifically request anything you want to look at for me.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li >Home</li>
<li>About</li>
<li>Download Freebies</li>
<li><div class="single-freebie">
Upload resources</li>
<li>
</li>
</ul><!-- / ul -->
</div><!-- /.navbar-collapse -->
You can use this or you can use JavaScript. I think both will meet your needs.
<li ><a href="index.html"
onMouseOver="this.style.color='#000'"
onMouseOut="this.style.color='#333'">Home</a></li>
<li><a href="about.html"
onMouseOver="this.style.color='#000'"
onMouseOut="this.style.color='#333'">About</a></li>
I’m messing around with HTML and I wanted to ask if it was possible to make a gallery within a gallery like so...
<ul class=‘gallery’>
<li class=‘image’><img></li>
<li class=‘image-collection’>
<ul class=‘sub-gallery’>
<li class=‘image’><img></li>
<li class=‘image’><img></li>
</ul>
</ul>
Better Use divs intead of UL LI.
Use sub-gallery div within the gallery div
So basically, I can't seem to change the color of the caret above my dropdown during the hover of the first-child element.
I am using Bootstrap3, the dropdown code is below:
JSFiddle
Nav dropdown
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Drop1 </li>
<li>Drop2 </li>
</ul>
</li>
</ul>
Anyway, I want the caret on top to be colored on hover for the first-child "li" element:
Example
Any ideas on how to change the color of the caret when the first element is hovered over?
Unfortunately you can't do that with just CSS. You have two options I think.. The ugly one - use JavaScript, or you can change the location of the carret to sit inside first element, then:
.dropdown-menu li:first-child:hover:after {...}
I would like to use a Font Awesome arrow instead of the default Bootstrap arrow for the dropdown menu link. I've added the Font Awesome arrow and it looks the way I want (on the left), but still there is the default Bootstrap arrow on the right. How can I get rid of it? I can't say I've tried anything yet as I keep checking and I don't find anything to be removed anywhere.
<ul class="nav navbar-nav">
<li class="dropdown drop-li">
<a href="#" class="dropdown-toggle menu-link" data-toggle="dropdown">
<i class="fa fa-angle-down arrow-down"></i>O Festiwalu <b class="caret"></b>
</a>
<ul class="dropdown-menu drop-one">
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
</ul>
This is how it looks: http://postimg.org/image/id3jbf27x/
Why not deleting <b class="caret"></b>?
If you are using Firefox, you can press STRG + I (I for Inspection) to inspect your html Code and see why something is here (Click on the Element in the Main Page) or even not here (Look at the CSS in the right bottom and select via the left bottom).
I'm using the Twitter Bootstrap (v2.1.1) with a PHP site. I'm generating the navigation bar dynamically in a php script as the navigation bar will have different content if the user is logged in or out of the site.
I would like to align the last dropdown menu to the right of the screen but haven't been able to so far. Here's a jsFiddle showing a simplified version:
http://jsfiddle.net/fmdataweb/AUgEA/
I would like the Menu 2 drop down to be right aligned. The code the for last dropdown is the same as for other dropdowns:
<li class="dropdown pull-right">
Menu 2<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
I've tried chaging it to:
<li class="dropdown pull-right">
but that makes no difference. Anyone know how to pull the dropdown menu to the right like you can with forms and <p> text?
You need to change the .pull-right class to ul element instead of li.
HTML
<ul class="nav pull-right">
<li class="dropdown">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
Version 2.1.1
I rewrote your code including only necessary JavaScript plugins (bootstrap-dropdown.js), the latest version of Twitter Bootstrap (2.1.1) and support for responsive design.
http://jsfiddle.net/caio/gvw7j/
If you see the responsive menu in the above link, you can see the "wide result" in this link:
http://jsfiddle.net/caio/gvw7j/embedded/result/
.pull-right is defined by:
.pull-right {
float: right !important;
}
Version 3.1.1
There were no changes in this class. You might see the helpers classes section.
However, the documentation recommends using the class .navbar-right because it has some specific optimizations, unlike the pull-right class.
If you came here trying to right-align a regular bootstrap .dropdown-menu and NOT a .nav, and are using Bootstrap 3, the correct class to add is .dropdown-menu-right
Here's the bootstrap documentation:
<ul class="dropdown-menu dropdown-menu-right">
...
</ul>
For those using Bootstrap 3, .navbar-right would do the trick.
For eg.,
<ul class="nav navbar-nav navbar-right">
.
.
</ul>
Instead of pulling the li element to the left, simply contain that element which you wish to be right aligned within its own ul list and pull that instead like so:
HTML
<ul class="nav pull-right">
<li class="dropdown">
Menu 2<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
Demo: http://jsfiddle.net/AUgEA/1/