On responsive menu bar I have close and open menu when page is less than 1120px. When I click on the close width of the primary-nav turn to 0 px.
and not coming to its previous size on page resizing.
The html and css code are as given below.
.primary-nav li a{
color:black;
font-size:15px;
font-family:sans-serif;
}
.primary-nav .clickhere a{
font-weight:bold;
color:red;
}
header a img{
padding:10px;
}
.opennav{
display:none;
}
.primary-nav{
width:80%;
}
#media only screen and (max-width: 1100px) {
.primary-nav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 5px;
right: -0%;
background-color: #111;
overflow-x: hidden;
transition: .5s;
}
.primary-nav li .closenav{
color:white;
width:250px;
text-align:right;
padding-right:40px;
margin-top:10px;
cursor: default;
}
.primary-nav li a{
width:220px;
color:wheat;
}
.opennav{
display:block;
position:fixed;
left:91.3%;
top:-1%;
}
}
<!doctype html>
<html>
<head>
<title>bloodropes</title>
<!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->
<meta name="title" content="Bloodropes | Homepage" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/stylesheet/home.css" rel="stylesheet" type="text/css">
<script>
function openNav() {
document.getElementById("primary-nav").style.width = "250px";
}
function closeNav() {
document.getElementById("primary-nav").style.width = "0px";
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<header>
<a href="/">
<img src="https://www.google.co.in/logos/doodles/2017/indias-independence-day-2017-6586914957164544-s.png" alt="bloodropes">
</a>
</header>
</div>
<div class="col-md-10">
<h1 onclick="openNav()" class="opennav">☰</h1>
<nav class="navbar">
<ul class="nav navbar-nav primary-nav " id="primary-nav" >
<li>
<h1 onclick="closeNav()" class="closenav">☰</h1>
</li>
<li>
Giving blood
</li>
<li>
about blood
</li>
<li>
Amazing stories
</li>
<li>
News
</li>
<li>
Contact us
</li>
<li>
About us
</li>
<li class="clickhere">
click here to give Blood
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
I want to change to width of primary as it was before the click on close.
You could look at using jQuery, and using the resize function to check if the browser is below 1120px, something similar to...
$(document).ready(function(){
$(window).on("load resize",function(e){
docWidth = $( document ).width();
if(docWidth >= 1120) {
$( "#primary-nav").removeClass("mobile").addClass("desktop"); //set some CSS to 'desktop' class which controls desktop style
}
else {
$( "#primary-nav").removeClass("desktop").addClass("mobile"); //set some CSS to 'mobile' class which controls mobile style
}
});
});
Related
Hi I created a Search Bar and wrapped it inside a div and have given it the max-width of 500px (100% with to the search Input) but don't know why max width is not working and I search the Stack Overflow and found a link Why would max-width not work on this? and tried this but it didn't worked for me
So can anyone please tell me why its not working and how to make it work :)
Any kind of help is highly Appreciated
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
body{
font-family:arial;
}
header{
width: 100%;
padding:20px 20px;
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
}
.menu-container{
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
}
.search-input-container{
width:100%;
max-width:500px;
}
input[type="search"]{
border-radius:500px;
padding:5px 10px;
width:100%;
}
ul li{
list-style:none;
}
ul{
margin:10px;
}
button{
outline:none;
border:none;
padding:8px 15px;
}
a{
text-decoration:none;
}
.submenu-items{
position:absolute;
top:100%;
border:2px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
<!-- Logo Wrapper -->
<div class="logo">
<img src="" alt="Test Logo">
</div>
<!-- Search Wrapper || Issue Area-->
<div class="search-container">
<form action="get">
<div class="search-input-container">
<input type="search" class="search">
</div>
</form>
</div>
<!-- Search Wrapper Ends ↑ -->
<div class="menu-container">
<ul>
<li>
Help
</li>
</ul>
<ul>
<li>
Campagians
</li>
</ul>
</div>
<div class="buttons-container">
<button class="Login-btn">Log in</button>
<button class="signup-btn">Sign up</button>
</div>
</nav>
</header>
</body>
</html>
Instead of max-width, try using width: clamp() (MDN)
I think in your case it would be something like:
.search-input-container {
width: clamp(150px, 400px, 500px);
}
Here 150px is the minimal size,
400px - is the ideal size, that the element wants to be,
and 500px - is the maximum possible size. so it can't grow bigger then that.
That way the input will try to be 400px, but if there is no space - it will shrink down up to 150px.
I have got a code for navbar which is working perfectly... Also i have got the code for a collapsable side bar which is also working perfectly. But now i dont understand how to add these two together so that i get a page with navbar and sidebar together.
This is my code for navbar - (complete with html):
<html>
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
<!-- Font styles -->
<style type="text/css">
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
</style>
</head>
<body style="background-color:#E6E6FA">
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
</body>
</html>
Those links in the head tag - i got it by simply googling.
Also, my sidebar code is here -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
But not now. how do I combine these? I want a page which will have both the top navbar and the sidebar. I have all combinations of pasting the codes but with no luck. What i have latest now - after combining these two is this -
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<link rel="stylesheet" href="styles.css">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
<!-- Sidebar nav -->
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<!-- Sidebar Ends -->
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
By combining it like this, The side bar is working correctly but the top navbar is just a big white block. Nothing in there.
Divide both the sections differently. Put both in one row and give col-2 to the sidebar side and col-10 to the nav-bar side. This way you'll be having a side and nav-bar both side by side, you can also use the nav-bar side for creating a normal webpage. All the best!
First of all, your missing an opening style tag just after your <title>both</title>. (You have a closing /style tag just before your nav). This will apply inline styles for the time being. You should see what you want to achieve now.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
/* styles */
</style>
</head>
But ultimately, you need to copy these styles into a CSS file and then link the CSS file in your HTML like this: <link rel="stylesheet" href="css/styles.css">. That is presuming, your stylesheet is called "styles.css" and is inside a 'CSS' folder.
Have a look at the HTML link tag for linking your external CSS file.
On my Ruby on Rails application, I've finally gotten around to figuring out a sidebar. Now, I'm just having issues with the background hover color. I'm not quite sure how to change this. Here's the CSS for the sidebar thus far:
body,html,.row-offcanvas {
height:100%;
}
body {
padding-top: 50px;
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color:#fff;
float: left;
height:100%;
position:relative;
overflow-y:auto;
overflow-x:hidden;
}
#main {
height:100%;
overflow:auto;
}
/*
* off Canvas sidebar
* --------------------------------------------------
*/
#media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width:calc(100% + 220px);
}
.row-offcanvas-left
{
left: -220px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
Here's the _sidebar.html.erb partial that gets rendered into each page on my rails app:
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<h3></h3>
<ul class="nav nav-pills nav-stacked">
<li class="active">Section</li>
<li><%= link_to 'Customers', Customers_path %></li>
<li><%= link_to 'Projects', projects_path %></li>
</ul>
</div>
</div>
For some reason though, unlike the demo that I obtained this code from, the background color when I hover each link in the sidebar is grey and the text turns white, making it extremely hard to read.
Not only that, but I've also tried to paste this JavaScript code into a separate file.js, and calling it after each page:
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
The classes doesn't get toggled as it looks like it should. So I'm having two issues:
I can't seem to get the hover/text color change when I highlight a link
I can't toggle the "class="active"" when I click on one of the links.
Both examples came from: http://www.bootply.com/mL7j0aOINa
Edit
As requested, here's the output of the page:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link data-turbolinks-track="true" href="/assets/bootstrap_custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/customers.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/projects.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<meta content="authenticity_token" name="csrf-param" />
<meta content="6nUnsGwrHCTVOf/90d6aHJrG+m7lnv7g2MpOix06j2M=" name="csrf-token" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.navbar -->
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<h3></h3>
<ul class="nav nav-pills nav-stacked">
<li>Customers</li>
<li>Projects</li>
</ul>
</div>
</div>
<div id="main">
<div class="col-md-12">
<h1 align="center" class="page-header"></h1>
#deleted this part for example #
</table>
</div>
</div>
</div><!--/row-offcanvas -->
<script type='text/javascript'>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
</body>
</html>
Here's the answer to the linked code:
$(document).ready(function() {
$('#sidebar .nav-pills a').click(function() {
$('#sidebar .nav-pills li.active').removeClass('active');
$(this).parent().addClass('active');
});
});
For starters, there is no [data-toggle] attribute being defined, so your click handler was never called. Secondly, the way you wrote your class toggle, every single button would toggle (You'd always have either one active and the rest not, or all of them except that button active and that one not).
We need to see the HTML output from the erb.
Additionally, I don't see any code that this jquery selector would apply to:
$('[data-toggle=offcanvas]')
Bootstrap is generally designed to be overridden with whatever settings you want.
#sidebar > div > ul > li:hover {
color: black;
background-color: gray;
}
should help you out - replace black and gray with whatever colors you want.
TRY
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
color: red!important;
background-color: yellow!important;
}
Please add above css and let me know is it hover problem solved or not??
javascript
$('#sidebar .nav-pills a').click(function() {
$('#sidebar .nav-pills li.active').removeClass('active');
$(this).parent().addClass('active');
});
I have a <div> element, containing a <ul> with four <li> elements. What I need to do is set the <li> to display in horizontal orientation, and within the <div>. When I apply the JTouch class=toolbar to my <div>, what I see happening however is the the <li> elements do not even appear within the perimeter of the <ul> and both the <ul> and <li> seem to move outside of the parent <div>. How can I fix this situation please?
Image of problem (Bottom right are the list elements instead of appearing within the div and ul)
<html>
<head>
<style type="text/css" media="screen">
#import "../../jqtouch/jqtouch.css";
</style>
<style type="text/css" media="screen">
#import "../../themes/apple/theme.css";
</style>
<script src="../../jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<!--
Tweet consumption in progress:
-->
<link rel="stylesheet" href="clock.css" type="text/css" media="screen" charset="utf-8" />
<!--
Initialization:
-->
<script type="text/javascript" charset="utf-8">
$.jQTouch({
icon: 'icon.png',
startupScreen: 'img/startup.png'
});
</script>
<style type="text/css">
.toolbar2
{
background: green;
height: 30;
}
#toolbarbottom ul li
{
display:inline;
float: left;
padding: 3px 5px;
}
#toolbarbottom ul
{
background-color: Green;
background-color: Purple;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var ulhtml = "<ul>";
$.getJSON("http://twitter.com/status/user_timeline/AJEnglish.json?count=20&include_entities=true&callback=?", function (data) {
$.each(data, function (i, item) {
ulhtml += "<li class='arrow'>" + item.text + "</li>";
});
ulhtml += "</ul>";
$("#tweets").html(ulhtml);
});
});
</script>
</head>
<body>
<div id="jqt">
<div id="home">
<div id="toolbartop" class="toolbar">
<h2>
Tweet </h2>
+
</div>
<h2>
Most Recent Tweet</h2>
<div id="tweets">
</div>
<div id="toolbarbottom" class="toolbar" style="position: fixed; bottom: 0px; left: 0px;
width: 100%;">
<div style="background-color:Black;">
<ul >
<li id="active"><a id="current" href="#add" class="button">News</a></li>
<li>Updates </li>
<li>Contact Us</li>
<li>Website </li>
</ul>
</div>
</div>
<div class="info">
This is a demo for jQTouch.
</div>
</div>
<div id="info">
<div class="toolbar">
<h1>
About</h1>
Cancel
</div>
<div class="info">
This is a demo for jQTouch.
</div>
</div>
</div>
</body>
</html>
Float all li to left and give padding to them.
I implement it in html. Have a look and change accordingly in your code.
<style type="text/css">
.toolbar ul li{float:left; padding:3px 5px;}
.toolbar ul {list-style-type:none;
</style>
Try:
.toolbar ul{
display: inline;
list-style-type: none;
}
I just want to add a side menu that links to various pages on my site. I would like to use image buttons or simple hrefs that the user clicks on to navigate. I think I need to use a div somehow ?
Thanks
You can use a div element and float it left with CSS.
HTML:
<div id="nav">
<ul>
<li>A Link</li>
<li>Another Link</li>
</ul>
</div>
<div id="content">
<p> Here's some stuff </p>
</div>
CSS:
#nav {
width: 20%;
float: left;
background-color: gray;
}
#content {
width: 80%;
}
I would also run through the HTML and CSS tutorials at HTML Dog. It will make your life so much easier.
Listamatic has various examples of how to style a list of links
HTML :
<!Doctype html>
<html projectReviver="leftmenu.html">
<head>
<title>My Left Menu</title>
<link rel="StyleSheet" href="design.css" type="text/css" />
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav>
<div id="main">
<ul>
<li>First page</li>
<li>2<sup>nd</sup>page</li>
</ul>
</div>
</nav>
</body>
</html>
design.css :
#mainu ul {
list-style: none;
background-color: red;
}
#nav {
width: 20%;
float: left;
background-color: red;
}
#content {
list-style: none;
}