So I am using bootstrap to generate a hover style when hovering over a navbar link. This works fine until you use IE9 and are too fast, the style stays "hovered", even when not hovering the item anymore.
Like this I can get multiple items in my menu in the "hovered" style which shouldn't be happening.
My code:
<ul class="nav nav-list">
<!-- ko foreach: router.activeItem().sidebar.links -->
<li data-bind="visible: visible" class="special">
<a data-bind="attr: { href: hash, title: title }"
data-toggle="tooltip"
data-placement="right">
<i class="menu-icon fa fa-5x" data-bind="css: icon"></i>
</a>
</li>
<!-- /ko -->
</ul>
The bug:
I have tried alot of things like adding another class like this:
.noHoverForThis {
color: inherit !important;
}
This does not work for some reason.
Same for overriding the whole bootstrap class didn't work for me, unless I failed hard writing this...
.navbar .nav-list > li:hover > a,
.navbar .nav-list > li > a:hover {
background-color: #e7e7e7 !important;
color: inherit !important;
}
Keep in mind the bug only occurs in IE9.
Any help would be very welcome!
EDIT: Interesting to know: I am using ACE Theme
www.wrapbootstrap.com
So I finally figured it out.
The code that should be used to fix this issue and override the hover state is:
.no-skin .nav-list > li:hover > a {
background-color: rgb(248, 248, 248) !important;
color: #585858 !important;
}
.nav-list > li::before {
width: 0;
height: 0;
display: none;
}
And then include it in the Index.cshtml of durandal
<!--[if lte IE 9]>
<link rel="stylesheet" href="../../Content/IEHacks.css" />
<![endif]-->
This will override the hover of the ace theme using bootstrap v3.2
Related
I have an a tag and a li inside it. The a tag colors the list items innterText. How can I nullify its effects on the color of its content and also remove the underline?
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>asd</li>
</ul>
</body>
</html>
It is invalid to have <a> inside <ul> tag in the way you did, and it's also won't pass the W3C validation. However, If I understand your question, you may try this:
<ul>
<li>
<a href="#">
<ul>
<li>asd</li>
</ul>
</a>
</li>
</ul>
In order to remove the underline, you can do:
ul li a {
text-decoration: none;
color: #b61c1c; /* For Example */
}
Fiddle
Try this:
a {
background-color: transparent;
}
a:hover {
text-decoration: none;
}
You can style it like this:
<a style="text-decoration: none; color: #TheColorYouWant"></a>
Use CSS. this removes underlines from a and li elements:
a, li {
text-decoration: none !important;
}
Just add your style according to your requirements inside this class "a:-webkit-any-link". for example if you want to remove underline then just add "a:-webkit-any-link{text-decoration: none;}".
Note: Here we are using '-webkit-' for Chrome browser.
I have a problem with w3css. When I add a link to a w3css navigation bar, it will come with a line break.
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet">
<div class="w3-bottom" style="margin-bottom: 1px">
<ul class="w3-navbar w3-red" style="float: clear;">
<li style="margin-left: 2px">
Powered by w3css and fontawesome |
</li>
</ul>
</div>
I would like everything to be on one line. I hope you can help me, thanks. :)
//Cripi
This is a snippet of code that comes from the W3 css file you've included
.w3-navbar li a, .w3-navitem, .w3-navbar li .w3-btn, .w3-navbar li .w3-input {
display: block;
padding: 8px 16px;
}
If you edit the display property on that to be inline-block then things work as you'd expect.
Here is the code and an example link
.w3-navbar > li > a {
display:inline-block !important;
}
You need the "!important" to overwrite their stylesheet which would have priority otherwise.
http://codepen.io/hoonin_hooligan/pen/Mpwqwm
You have to change the display: block behavior to display: inline behavior. (And remove the padding to make it look less weird.) I used !important to make sure the browser accepts that specific value; you should replace this with a higher specificity selector, the same specificity selector later in the pageload so it overwrites the old value or change the css file of the current selector.
.w3-navbar li a{
display:inline !important;
padding: 0px !important;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-bottom" style="margin-bottom: 1px">
<ul class="w3-navbar w3-red" style="float: clear;">
<li style="margin-left: 2px">
Powered by
<a href="https://www.w3schools.com/w3css/">
w3css
</a> and
<a href="http://fontawesome.io/">
fontawesome
</a> |
</li>
</ul>
</div>
I am working with PrimeFaces and trying to edit the background color of my tabView menu items but am unable to do so.
This is what is required:
I am adding the styleClass attribute in xhtml. (Writing "..." instead of the long lists of attribute values that are not relevant to the problem.)
<p:tabView styleClass="menu" value="..." dir="..." dynamic="true" activeIndex="...">
<p:ajax event="tabChange" listener="..." />
<p:tab >
<div> .... </div>
</p:tab>
</p:tabView>
The html generated is:
<div id="tabView" class="..... menu">
<ul class="...." role="tablist">
<li class="...." role="tab" aria-expanded="true">
Menu Item 1
</li>
<li class="...." role="tab" aria-expanded="true">
Menu Item 2
</li>
</ul>
<div class="ui-tabs-panels">
<div > ..... </div>
</div>
The class menu is defined as following. The commented lines are the ones I have tried but give different results than required.
.menu {
font-family: Open Sans;
/* first attempt:
background-size: 5px;
background-color: #fff;
*/
/* second attempt:
background: linear-gradient(180deg, #FFF 10px, #ebeff2 100%);
*/
/* third attempt:
background-color: #fff;
*/
}
.menu ul li {
background-color: #fff;
background-image: url(../resources/images/menu_sep.png);
}
The output is this:
From what I understand, the problem is that the html generated applies my menu class to the <div> element, not the <ul>. Is there any way of adding this class to the <ul> tag? I have tried adding styleClass="menu" to the <p:ajax> and <p:tab> tags, but that does not work.
The Primefaces version is 3.5.
One way to apply the style class to the <ul /> element is to override the default TabView renderer. But i think this is a little bit excessive. Why not using the style class menu as an anchor only and create some style with a css selector like .menu > ul to style the list item under the <div /> element like you already did with the <li /> elements with your .menu ul li style?
I have a NavBar in my web-app using Ruby on Rails and Twitter Bootstrap.
The NAVBAR looks well in the browser as:
But, the Navbar breaks when I look up the web-app in the browser on my Galaxy Note.
Snippet from app/views/layouts/application.html.erb
<div class="masthead">
<h3 class="active">WebsiteName</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact Us</li>
<% if current_user %>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<strong><%= current_user.name %></strong>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Sign out</li>
</ul>
<% end %>
</ul>
</div>
</div>
</div>
</div>
The CSS for the NAVBAR is borrowed primarily from:
Justified Nav Example - http://getbootstrap.com/2.3.2/examples/justified-nav.html
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
How can I fix this? I am learning Responsive CSS these days, and have no idea how to fix it.
UPDATE:
Please note that the above problem has been fixed.
But I found something wrong when this got fixed though. If I decrease the size of window too much, the navbar gets broken. The User part goes outside the navbar. The issue is also reflected in the Bootstrap example too.
I'm attaching the screenshots which showcase the issue. To see it yourself, simply decrease the window size in the Bootstrap navbar example.
The problem is that the "Contact Us" link is wrapping. Notice that, in the Bootstrap example, the navbar does not have links with multiple words.
Add white-space: nowrap; to the .navbar .nav li a class.
Here is a functioning demo. All you have to do is resize the width of the frame to test.
The demo contains 2 navbars:
The first navbar with the issue fixed.
The second reproduces the faulty behavior to isolate the cause at the "Contact us" link, by setting its style attribute to "white-space: normal;" thus overriding the fix.
Also note that you have a </li> missing before <% end %>.
define the heihgt of .navbar .nav 40px and add overflow: hidden;
Your bootstrap file loading should look like the following to make the responsive work:
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-responsive.css" />
Here is the plunker - http://plnkr.co/edit/WZ6cqCcXaLuOCXnZdCa6?p=preview
Is there a CSS way so that when I click on One or Two, it becomes class="active" for One or Two and removed from Home?
You can highlight each link with CSS alone, but not by using classes. Rather, use the :target pseudo class: http://codepen.io/pageaffairs/pen/kqoma
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
ul, li, div {margin: 0; padding: 0;}
ul {
list-style: none;
overflow: hidden;
padding: 10px;
}
li {
float: left;
margin: 0 20px 0 0;
}
li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #08c;
border-radius: 20px;
}
li a:hover, li a:target {
background: #08c;
color: white;
}
</style>
</head>
<body>
<h1>Hello <code>:target</code>!</h1>
<div class="header">
<ul class="nav nav-pills">
<li class="active">
Home
</li>
<li>
One
</li>
<li>
Two
</li>
</ul>
</div>
</body>
</html>
You will need to edit the html somehow, css doens't have the ability to change an elements class. You could write a little function to js to do this on a click event and remove the class from the old menu item and add it to the newly selected menu item.
like this:
http://plnkr.co/edit/6B5v2KrZonuI33dJySS6?p=preview
You can so this with jQuery, following this format:
switch (window.location.pathname) {
case '/THE_URL_HERE':
$('.nav-home').addClass('active');
break;
case '//THE_URL_HERE':
$('.nav-one').addClass('active');
break;
case '//THE_URL_HERE':
$('.nav-two').addClass('active');
break;
}
And add classes to your HTML:
<h1>Hello Plunker!</h1>
<div class="header">
<ul class="nav nav-pills">
<li class="nav-home">
Home
</li>
<li class="nav-one">One</li>
<li class="nav-two">Two</li>
</ul>
</div>
Not using CSS exclusively. Behavioral features, such as linking, and modification of the DOM are outside the scope of CSS.
However, you could construct the links to modify the query string of the URL (e.g. ?item=one) and use the resulting GET values to set classes on your navigation.
Or use javascript.
use :target it's more flexible if it's to make a menu without javascript