Hello I got question regarding setting a background-image whenever I hover on an element of my submmenu. I have the following HTML:
<div class="navbar navbar-default main-nav">
<div class="container">
<div class="navbar-header" tabindex="-1">
<button type="button" class="navbar-toggle collapsed">
</button>
</div>
<div class="collapse navbar-collapse" tabindex="-1">
<div class="nav navbar-nav" tabindex="-1">
<div class="menuitem_wrapper" tabindex="-1">
<a class="home_button not_active" href="#"></a>
<div class="dropdown-menu" tabindex="-1">
My data
</div>
</div>
<div class="menuitem_wrapper" tabindex="-1">
Menu 1
<div class="dropdown-menu" tabindex="-1">
Submenu1
Submenu2
</div>
</div>
<div class="menuitem_wrapper" tabindex="-1">
<a class="active" href="#">Menu 2</a>
<div class="dropdown-menu" tabindex="-1">
submenu1
submenu2
</div>
</div>
FAQ
Contact
Logout</div>
</div>
</div>
</div>
I know this is not the proper way to generate a menu with submenu items but despite this, how could I get my grey home button (which becomes visible after hovering on the home button) to stay visible whenever I hover on the "my data" button? Is this possible with pure CSS?
I have a demo here: JSFIDDLE
Change this:
.not_active:hover {
background-image: url(https://jira.transvar.org/secure/attachmentzip/unzip/14790/12882%5B1%5D/Home_Icon_for_IGB_pack/home_icon_grey_128x128_more_space_16x16.pn);
}
to this:
.not_active:hover, .menuitem_wrapper:hover .not_active {
background-image: url(https://jira.transvar.org/secure/attachmentzip/unzip/14790/12882%5B1%5D/Home_Icon_for_IGB_pack/home_icon_grey_128x128_more_space_16x16.pn);
}
I just added .menuitem_wrapper:hover .not_active to the same rule.
Use jQuery mouseover() and mouseout()
$(document).ready(function(){
$(".dropdown-menu a").mouseover(function(){
$("a.home_button.not_active").css("background-image", "url('https://jira.transvar.org/secure/attachmentzip/unzip/14790/12882%5B1%5D/Home_Icon_for_IGB_pack/home_icon_grey_128x128_more_space_16x16.png')");
});
$( ".dropdown-menu a" ).mouseout(function() {
$("a.home_button.not_active").css("background-image", "url('https://upload.wikimedia.org/wikipedia/commons/3/34/Home-icon.svg')");
});
});
Also make changes to CSS
.not_active:hover {
background-image: url(https://jira.transvar.org/secure/attachmentzip/unzip/14790/12882%5B1%5D/Home_Icon_for_IGB_pack/home_icon_grey_128x128_more_space_16x16.png)! important;
}
Working Example JSFIDDLE
Related
I'm using twitter bootstrap 2.3 and when I make my browser smaller it collapses correctly but when I click on the button to do the dropdown it doesn't appear in front of the other items. Here is a working demo: http://www.thehighlightnetwork.com/ I've been trying to fix it in the developer tools in Chrome but to no avail.
Here is the relevant code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><img src="http://i.imgur.com/8dN9Ck1.png" alt="small logo" style="height:50px;"></a>
<div class="nav-collapse collapse" style="height:0px;">
<ul class="nav">
<li>The Highlight Network</li>
<li>Official Blog</li>
<li>Profile</li>
<li>Logout</li>
<li>Sign Up!</li>
<li>Upload</li>
</ul>
<ul class="nav pull-right">
<li>
<div class="center-it">
<form class="form-search" action="/search" method="GET" style="margin:0; margin-top:15px;">
<input type="text" name="search_tag" placeholder="search..." class="input-medium search-query pull-right">
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
In the official demo site it pushes down all the other elements which I would be happy with or if I can simply make it so that it is in front of the other elements.
The static position of your fixed navbar is causing this, the following css will override that and fix your problem (confirmed in chrome)
.navbar-fixed-top, .navbar-fixed-bottom {
position: relative !important;
}
I am new to HTML and CSS and have started coding in the last 4 days. I found bootstrap very useful to get things moving quickly.
Here is my attempt at getting a Navbar with transparency and fixed to the top.
http://jsfiddle.net/revanur/mf5wc/4/
<!-- Top-Navigation-Bar -->
<div class="row-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" id="topbar">
<div class="container"> <img class = "brand" src="http://placehold.it/269x50" alt="SparkCharger" />
<button id="topbtn" type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<div class="nav-collapse">
<ul class="nav pull-right">
<li class="active">
<form class="navbar-search brand">
<input type="text" class="search-query" placeholder="Search">
</form>
</li>
<li> <h5> Discover </h5>
</li>
<li> <h5> Blog </h5>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><h5>Start <span class="caret"></span></h5></a>
<ul class="dropdown-menu">
<li> <h6> Login </h6>
</li>
<li> <h6> Signup </h6>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Top-Navigation-Bar -->
However, the height of the navbar seems to change based on brand image size. I have no problem with that but I notice significant spacing between the image and the navbar top and bottom. How do I change this. Also, is it possible to fix the navbar size so that the navbar does not have a mind of its own.
There are a few things affecting the height of the navbar:
div class="navbar-inner" (5px padding)
img class="brand" (10px padding)
the size of the image
You can remove the padding by:
img.brand {
padding: 0;
}
And/Or you can specify the height of the navbar:
div.navbar-inner {
height: 10px;
}
Use something like this:
.brand {height: 25px;}
Demo: Fiddle
I downloaded the bootstrap template from http://www.initializr.com/
My question is how do I keep the navbar fixed on top of the screen whenever I scroll down to the footer of my web page? To have a better idea of what I'm trying to achieve I made a screenshot.
example : On a mobile device perspective the NAVBAR is fixed
example : When I scroll down to the footer of the page I want the NAVBAR to stay fixed on top of the screen. As you can see the NAVBAR fails to stay fixed on top of the screen.
CODE:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<a class="brand" href="#"><img src="img/pldttranssmall.png"></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Product and Services
</li>
<li>
Investor Relations
</li>
<li>
Get Support
</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Search">
<button type="submit" class="btn btn-default">
<i class="icon-search icon-black"></i>Go
</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
How do I achieve this?
Just wrap the navigation bar inside a div and add these css classes to it style it as class="navbar navbar-fixed-top"
Example: http://jsfiddle.net/codovations/Uy5tt/show/
P.S: remove show from the end of the url to see the html
Update: Basically this is what they apply to the div to make it fixed on the top.
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
top: 0;
}
Is it possible to prevent the dropdown menu to dissapear when "clicking in it". Trying to use a dropdown as a container for a textarea.
e.g
<div class="row-fluid">
<div class="span12">
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
<strong id="revolver">
<i class="icon-envelope"></i> 
<span class="caret"></span>
</strong>
</a>
<ul class="dropdown-menu">
<div class="row-fluid send-message-textarea">
<div class="span12">
<textarea></textarea>
<br>
<button class="btn btn-mini"><strong>Send</strong></button>
</div>
</div>
</ul>
</div>
</div>
</div>
Edit:
I guess a copy paste of the dropdown function inside bootstrap.js and then alter the selector and remove the unwanted functionality could be an option. I took a look at https://github.com/twitter/bootstrap/blob/master/js/bootstrap-dropdown.js but I could not pinpoint exactly where the specific functionality lies. Help would be appritiated.
In your HTML, add an id to the <ul>
<ul class="dropdown-menu" id="test">
add a handler that prevents the dropdownmenu from responding to click
$(document).ready(function() {
$("#test").click(function(e) {
e.stopPropagation();
});
});
you are now able to click and edit in the textarea.
I'm having some strange issues with a bootstrap navbar. When the window is small enough, the expand button shows up as expected. However, once the button is clicked it behaves really strangely. The first click flickers the contents of the drop down, then dissapears. On the second click, the dropdown shows up normally but with no animation.
The code (as rendered by the server)
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li>Businesses</li>
<li>About Us</li>
<li>Contact</li>
<li>Advertise</li>
</ul>
<ul class="nav pull-right">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
</div>
</div>
</div>
Any thoughts?
EDIT: There will normally be an image in the brand anchor
I had this same issue and found that I had this small script block in my page which I must have copied from somewhere.
<script type="text/javascript">
$('.nav a').on('click', function () {
$(".navbar-toggle").click();
});
</script>
Removing this fixed the issue.
I'm not sure where it came from, I assume some example from Bootstrap 2.x or something.