I can't find what i should modify in bootstrap to change the mouse-over background color of elements in a navbar. This is the element i want to change:
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
#Html.ActionLink("Distribusjonsenhetsadministrasjon", "Dea", "Home")
</li>
</ul>
</div>
I managed to change the normal background color and text color without any problem. But not the mouse-over background color, i tried to change every possible hover connected to a nav class i could find in the css.
try this
.navbar-nav>li:hover{
color: #333;
background-color:red;
}
Related
Good afternoon! I'm currently working on a navbar but the menu that pops up on from clicking on the hamburger icon (which shows all the links/navigation-items as a smaller screen widths) is a little too gaudy/not really good on a presentation level. How can I customize that dropdown menu to look better? HTML code is below:
<nav id="navigation" class="navbar navbar-expand-sm">
Brand
<button id="hamburger-icon" class="navbar-toggler" data-toggle="collapse" data-target="#collap-menu">
<span class="navbar-toggler-icon"><img src="D:\code\yannijewelry\images\evileyepng.png"></span>
</button>
<div id="collap-menu" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li><a class="nav-link" href="#">Etsy</a></li>
<li><a class="nav-link" href="#">Facebook</a></li>
<li><a class="nav-link" href="#">Instagram</a></li>
</ul>
</div>
</nav>
What element do I target, or rather, how can I customize a better dropdown menu? I noticed the hamburger icon, when clicked, also pushes the navbar elements up when it shows
Its hard to know exactly how to advise you on styling since we can't see exactly what styles you're currently viewing with just the HTML. Utilizing the core Bootstrap CSS, I can approximate your view and advise accordingly.
Let's say you want to change the background and text color of each of your menu items:
#collap-menu li{
background: #666;
padding-left: 20px;
}
#collap-menu li a{
color: #fff;
}
This would set your menu items to a gray background with white text with a little additional spacing for the text. You can replace the colors here with the branding colors of your website. Any changes beyond changing the text and color would need to be specifically outlined in your request.
I would like to have a mouse-over that highlights my li using the themed bootstrap color. However, list-group-item is overriding the background style to white.
This is for a component that will be used by multiple people and who knows what they will set their bg-primary as? So I don't really want to force a specific color.
Is there any way to override the cascade for this case and have bg-primary override list-group-item instead of the other way around?
Here is a fiddle showing the problem:
https://jsfiddle.net/scottieslg/5bqtr8dn/1/
<div class='container'>
<ul class='list-group'>
<li class='bg-primary list-group-item'>Test1</li>
<li class='list-group-item'>Test2</li>
<li class='list-group-item'>Test3</li>
</ul>
</div>
This is the code i'm using to make the pills in my navbar active..
<ul class="nav nav-pills">
<li class="<%= 'active' if current_page?(root_path) %>"><% yield (:home)%><%= link_to "Home", root_path%></li>
however it uses the default blue color as "active" how should i change this?
this is what i have in my css already
.nav>li>a:hover,
.nav>li>a:focus{
background-color: #5c8a36;}
even with this (the color should be green) it still shows up as the default blue color
Add the following line (.nav>li>a.active,) to your css:
.nav>li>a.active,
.nav>li>a:hover,
.nav>li>a:focus {
background-color: #5c8a36;
}
You don't have a <a> there!
.nav>li:hover,
.nav>li:focus,
.nav>li:focus {
background-color: #5c8a36;
}
<ul class="nav nav-pills">
<li class="">
Home
</li>
</ul>
The accepted answer didn't work for me. I changed a bit and now working.
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #5c8a36;
}
I would like to disable the nav-pill hover effect on just one item, the link that changes the language of the page, in my navbar. What is the best way to achieve this using either a bootstrap class or CSS?
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right">
<li class="language language-active disabled">NL</li>
<li class="language language-nonactive language-right">EN</li>
<li class="approach-li">Diensten</li>
<li class="about-li">Over ons</li>
<li class="qa-li">Vragen</li>
<li class="about-li">Contact</li>
<li class="navbarpadding">
<form action="afspraak.html">
<button class="btn navbar-btn btn-primary2">Afspraak maken</button>
</form>
</li>
</ul>
</div>
Looking at your html using the class: ".language-nonactive"
You can these styles to go along with it, this will remove the hover of the grey background:
.nav>li.language-nonactive>a:hover, .nav>li.language-nonactive>a:focus {
background-color: transparent;
}
Here is a jsfiddle to show what I've done:
http://jsfiddle.net/ho1sgm1e/
Additionally you could you something like this with jquery:
$(document).ready(function() {
/*disable non active tabs*/
$('.nav li').not('.active').addClass('disabled');
/*to actually disable clicking the bootstrap tab, as noticed in comments by user3067524*/
$('.nav li').not('.active').find('a').removeAttr("data-toggle");
});
source: Bootstrap tabs pills disabling and with jQuery
Furthermore, utilising the disbaled class will effectively disable the button.
Using CSS:
.nav .language-nonactive a:hover {
background:rgba(0,0,0,0);
}
Demo
I have a dropdown menu that I am using and can't quite get it to work.
<ul id="nav" class="dropdown dropdown-linear dropdown-columnar">
<li>Home</li>
<a href="http://www.example.com/products/index.php"><li class="dir">Products
<ul>
<li class="dir">Buckyballs</li>
<li class="dir">Calico Critters</li>
<li class="dir">Games</li>
<li class="dir">Magnetics</li>
<li class="dir">Playmobil</li>
<li class="dir">Quercetti</li>
</ul>
</li></a>
<li>Calendar</li>
...
</ul>
The menu is white with red text and then changes when I hover over them from red background to white text. However, when I hover over Products, the whole thing goes red when I hover over the li tag, and the text only goes white when I hover over it. But when I hover over what drops down, it's all red again. See the Navigation bar at redballoontoystore.com . Any help?
Add
.dir:hover a {
color: white!important;
}
to your css code. The !important is probably optional if you place the rule in the right place.
I'm pretty sure that if you switch the nesting of list item elements with your anchor tags, this will fix your issue:
<li class="dir">Buckyballs</li>