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" />
Related
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>
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
I have Bootstrap 3 integrated into my web application. I am trying to style secondary/drop-down menus from the main nav so the items are displayed inline. The Bootstrap 3 class for this is <ul class="list-inline"> (that obviously being the nested one), but it is not working.
I see the associated CSS rules come through in Chrome devtools, so it's not a cache issue. The class and rules are being applied, and the declaration is not being overridden (no strike-through line). The markup structure is as follows:
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="navbar navbar-nav">
<li class="dropdown open">
<a class="dropdown-toggle" data-toggle="dropdown" href="/item1">Item 1</a>
<ul class="dropdown-menu list-inline">
<li>SubItem 1</li>
<!-- Some more secondary nav <li>'s here... -->
</ul>
</li>
<!-- Some more primary nav <li>'s here... -->
</ul>
</div>
There are many style rules being applied to the various classes here, so I'm only pasting in the CSS for the nested <ul>...
.dropdown.open .dropdown-menu {
margin-top: 3em;
background-color: #525252;
}
/* I didn't write any of these styles - maybe Bootstrap's? */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 10000;
<strike>display: none;</strike>
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
<strike>background-color: blah blah</strike>
<strike>border: blah blah</strike>
border: 1px solid rgba(0, 0, 0, 0.15);
background-clip: padding-box;
}
...and the child list items...
.list-inline > li:first-child {
padding-left: 0;
}
.list-inline > li {
display: inline-block;
<strike>padding-left: 5px;</strike>
padding-right: 5px;
}
I have also tried manually adding display: inline and inline-block, as well as float: left, but nothing has worked. If it's relevant, I'm using Sass (SCSS) for the CSS, and the Sass 3.2.3 and Bootstrap gems (this is a Rails app). The styles are all compiling into one big application.css file using #import directives.
I have an inline stylesheet that is cascading really strangely.
I have a menu made with a <ul> and I want to make it so that when a user is on a page, the background color of the current page link on the <li> is green. I did this by creating an ID with background-color: #288E3A;, but despite placing it after the ID for the menu, I cannot make the current <li> turn green. The only way I can get it to work is to use !important, but I cannot bring myself to use that solution. -shudder-
I have a feeling this is probably something really simple I am missing. Can someone explain where I went wrong?
#menu ul {
padding: 15px;
list-style-type: none;
}
#menu ul li {
background-color: #363636;
margin: 0px 0px 15px;
line-height: 50px;
padding: 0px 5px 0px 5px;
}
#current_page ul li {
background: #288E3A /*!important*/;
}
<div id="menu">
<p>MAIN MENU</p>
<div id="button_container">
<ul>
<li id="current_page">HOME</li>
<li>CAR LOANS</li>
<li>AUTO LOAN REFINANCING</li>
<li>AUTO CALCULATORS</li>
<li>TOOLS AND RESOURCES</li>
</ul>
</div>
</div>
<div id="content_container">
<img src="img/cf_mobile_website-4.jpg" />
</div>
your css is incorrectly specifying the element, what you want is this :
#menu ul li#current_page{
background:#288E3A;
}
Better yet you could use css to specify the first child so you wont need to add a custom id:
#menu ul li:first-child{
background:#288E3A;
}
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