I tried to center the burger icon in the navbar.
it's kinda centered for small mobile devices but when it gets to bigger devices like tablets,
the icon goes upper way. it doesn't stay centered.
how can I do this responsively for different screens?
<!DOCTYPE html>
<html>
<head>
<style>
.centerBurger {
display: flex;
justify-content: center;
}
.centerBurger {
width: 100%;
text-align: center;
}
.centerBurger {
margin: 0;
position: absolute;
top: 50%;
left: 56.5%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
.centerBurger {
display:block;
cursor:pointer;
max-width:100%;
height:auto;
}
.burgerCenter{
margin:0 auto;
left: 50%;
position: relative;
transform: translateX(-50%);
}
</head>
<body>
<!-- Top Navigation Menu -->
<div class="topnav">
<img src="header.png" width="25%">
<!-- Navigation links (hidden by default) -->
<div id="myLinks">
Startseite
Über uns
Leistungen
Referenzen
Kontakt
Datenschutz
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="icon centerBurger" onclick="myFunction()">
<i class="fa fa-bars centerBurger"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
I tried to center it different ways.
I used this css rules one after one. one time directly for the attribute and after that I gave the icon a parent div like this:
<div class="centerBurger">
a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</div>
and tried to set the rules to the parent div.
but sadly it didn't work.
I expected the burger icon would be centered.
i'm pretty new to coding and my English isn't the best as well.
so i wanna apologize for this first.
If anyone could tell me what my fault was or how I could solve this I would appreciate it very much.
Thank you very much!
Add align-items: center; to your very first .centerBurger
Try the following:
<style type="text/css">
.topnav *:not(.centerBurger) { float: left; }
.topnav .centerBurger { display: block; width: fit-content;
margin-left: auto; margin-right: auto; }
.topnav #myLinks { display: none; }
</style>
The first rule lets all navigation bar elements other than the .centerBurger float (to the left) in the navigation bar. Without it, the .centerBurger would appear on a row beneath the <a href="index.html">.
The second rule makes the .centerBurger a centered block within the navigation bar. Instead of width: fit-content, you can also use the width of the burger image in px (which I assume is known).
Alternatively, try
<style type="text/css">
.topnav { text-align: center; }
.topnav *:not(.centerBurger) { float: left; }
.topnav #myLinks { display: none; }
</style>
Thank you for answering my question.
i tried different possibilities now finally i replaced the <i> tag with an <img src="burgericon.svg> and now it works fine.
The code looks like this now:
´´´´
<div class="topnav">
<img src="header.png" width="25%">
<!-- Navigation links (hidden by default) -->
<div id="myLinks">
Startseite
Über uns
Leistungen
Referenzen
Kontakt
Datenschutz
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<img src="bars-svgrepo-com.svg" class="svg">
</a>
</div>
My CSS style sheet doesn't seem to be working?
Anyone know why?
Code:
/* my css style sheet named "style" */
/* CSS Selector applicable to all elements which in this case are my html margin padding and box size */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
display: flex;
align-items: center;
padding: 20%;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drake</title>
<!-- Name of my website -->
<link rel="stylesheet" type="text/css" media="screen, projection" href="style.css">
<!-- Link to my css style sheet -->
</head>
<body>
<div class="navbar">
<!-- Navigation bar class created -->
<!-- May have to potentially change variable name-->
<div class="logo">
<!-- Logo class with navigation created -->
<img src="https://logo.clearbit.com/spotify.com" width="125px " alt="owl logo">
<!-- owl logo inserted and resized -->
</div>
<nav>
<!-- Naviagation element created .... -->
<ul>
<!-- Along with an ordered list of different pages subject to change -->
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
</div>
</body>
</html>
If possible, could you please specify what result is expected or what are trying to achieve?
If you would like to make navigation "sticky" so it would be always visible to users even if they scroll down the page, then as an option you could try to add to your .navbar class CSS this:
.navbar {
position: fixed;
width: 100%;
}
If you are trying to put the nabber in the top left corner of the screen, you can remove the padding: 20% from your "navbar" class (.navbar).
I have a navbar with logo on left and a navbar-right (float: right) on the far right which contains a dropdown as the first element and some other elements. The dropdown menu is large and responsive.
What I'd like to be able to do is prevent the dropdown from disappearing when I hover over the dropdown and move the cursor left in navbar (towards the logo). The dropdown should remain open as long as the cursor is still in the navbar. So this should not happen -
JS Fiddle - http://jsfiddle.net/gva90uks/10/embedded/result/
Code - http://jsfiddle.net/gva90uks/10/
I've tried adding left-padding to the dropdown-menu when the menu is open, but the padding has to be dynamic based on window size otherwise it pushes the logo. So I'm looking for better solutions rather than adding the padding.
I'm okay with both js and css based solutions.
I would use flexbox and flex-grow, like below.
This because flexbox allows elements to grow bigger (or shrink smaller) if there is space. So the drop-down link (the parent <li>-element) will at default styling be the width of the text on the link But when we hover over the link, the <li>-element will grow as much as possible, i.e. all the way to the brand, causing the drop-down not to hide when hovering over the top bar (which now contains the much bigger <li> (dropdown) element).
.navbar .container-fluid {
display: flex;
}
.navbar .container-fluid .navbar-collapse {
flex-grow:2;
}
.mega-menu {
position: absolute;
right: 0;
left: 0;
/*padding: 27px 0;*/
}
.navbar-right {
display: flex;
justify-content: flex-end;
width: 100%;
}
#menu-area {
display: flex;
}
#menu-area .dropdown-toggle {
margin-left: auto;
}
.dropdown-toggle:hover + .dropdown-menu, .dropdown-menu:hover {
display: block;
margin-top: 0;
}
.menu-large:hover {
flex-grow: 2;
}
.dropdown-toggle:hover {
flex-grow: 2;
}
.dropdown-toggle {
text-align: right;
}
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse" id="">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown menu-large">
Dropdown <span class="caret"></span>
<div class="dropdown-menu mega-menu">
<div class ="container">
<ul class="list-unstyled">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</li>
<li>Another Link</li>
</ul>
</div>
</div>
</nav>
I have pinned up/sticky navigation menu bar on top of my page and some tables. To make tables more interactive I use jQuery's DataTables. Before using jQuery everything was OK. Now, whenever I scroll down every table covers my menu and I can't even click on it for navigation.
Here is my pinned up/sticky navigation menu bar code, thank you for your help in advance.
CSS:
.sticky { position: fixed; height: 2.2em; width: 100%; top: 0; left: 0; background-color: rgb(224,224,224); }
.sticky li { display: inline-block; }
.sticky * { display: inline; }
HTML:
<div class="sticky">
<reportname>reportname</reportname>
<ul>
fly to:
<li> <a href=#Samples> Samples </a> </li>
<li> <a href=#Navigation> Navigation </a> </li>
<li> <a href=#Tables> Tables </a> </li>
<li> <a href=#Plots> Plots </a> </li>
</ul>
<reporthead>reporthead</reporthead>
</div>
For tables I use
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" />
<script>
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
and
<table id="example" class="display" cellspacing="0" width="100%">
Solved by adding
z-index: 9999;
to the
.sticky { ... }
I'm attempting to make a nav bar that appears at the bottom of the viewable page when the site is first loaded, then as the user scrolls down, the nav bar scrolls up, and eventually becomes fixed to the top. I'm using Bootstrap, just like this site, but I can't figure out how this site did it. Any help?
Here's the site with the nav bar I'm trying to emulate: http://www.blastprocessor.co.uk/
Here's my navigation html and css code:
HTML:
<div class="navbar navbar-fixed-top" id="navbar">
<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 nav-pills">
<li class="active">Home</li>
<li>Services</li>
<li>Contact</li>
</ul><!-- /.nav -->
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
And here's my CSS:
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.navbar .nav > li a{
color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > li {padding:2em;}
.navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);}
.navbar .nav, .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
padding:0 2em;
}
.navbar-inner {text-align:center;}
.navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}
I was searching for this very same thing. I had read that this was available in Bootstrap 3.0, but I was having no luck in actually implementing it. This is what I came up with and it works great. Very simple jQuery and Javascript.
Here is the JSFiddle to play around with... http://jsfiddle.net/CriddleCraddle/Wj9dD/
The solution is very similar to other solutions on the web and StackOverflow. If you do not find this one useful, search for what you need. Goodluck!
Here is the HTML...
<div id="banner">
<h2>put what you want here</h2>
<p>just adjust javascript size to match this window</p>
</div>
<nav id='nav_bar'>
<ul class='nav_links'>
<li>Sign In</li>
<li>Blog</li>
<li>About</li>
</ul>
</nav>
<div id='body_div'>
<p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>
Here is the CSS...
html, body {
height: 4000px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
#body_div {
top: 0;
position: relative;
height: 200px;
background-color: green;
}
#banner {
width: 100%;
height: 273px;
background-color: gray;
overflow: hidden;
}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
//the below css are for the links, not needed for sticky nav
.nav_links {
margin: 0;
}
.nav_links li {
display: inline-block;
margin-top: 4px;
}
.nav_links li a {
padding: 0 15.5px;
color: #3498db;
text-decoration: none;
}
Now, just add the javacript to add and remove the fix class based on the scroll position.
$(document).ready(function() {
//change the integers below to match the height of your upper div, which I called
//banner. Just add a 1 to the last number. console.log($(window).scrollTop())
//to figure out what the scroll position is when exactly you want to fix the nav
//bar or div or whatever. I stuck in the console.log for you. Just remove when
//you know the position.
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() > 550) {
$('#nav_bar').addClass('navbar-fixed-top');
}
if ($(window).scrollTop() < 551) {
$('#nav_bar').removeClass('navbar-fixed-top');
}
});
});
Note (2015): Both question and the answer below apply to the old, deprecated version 2.x of Twitter Bootstrap.
This feature of making and element "sticky" is built into the Twitter's Bootstrap and it is called Affix. All you have to do is to add:
<div data-spy="affix" data-offset-top="121">
... your navbar ...
</div>
around your tag and do not forget to load the Bootstrap's JS files as described in the manual. Data attribute offset-top tells how many pixels the page is scrolled (from the top) to fix you menu component. Usually it is just the space to the top of the page.
Note: You will have to take care of the missing space when the menu will be fixed. Fixing means cutting it off out of your page layer and pasting in different layer that does not scroll. I am doing the following:
<div style="height: 77px;">
<div data-spy="affix" data-offset-top="121">
<div style="position: relative; height: 0; width: 100%;">
<div style="position: absolute; top: 0; left: 0;">
... my menu ...
</div>
</div>
</div>
</div>
where 77px is the height of my affixed component.
//in html
<nav class="navbar navbar-default" id="mainnav">
<nav>
// add in jquery
$(document).ready(function() {
var navpos = $('#mainnav').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('#mainnav').addClass('navbar-fixed-top');
}
else {
$('#mainnav').removeClass('navbar-fixed-top');
}
});
});
Here is the jsfiddle to play around : -http://jsfiddle.net/shubhampatwa/46ovg69z/
EDIT:
if you want to apply this code only for mobile devices the you can use:
var newWindowWidth = $(window).width();
if (newWindowWidth < 481) {
//Place code inside it...
}
Bootstrap 4 - Update 2020
The Affix plugin no longer exists in Bootstrap 4, but now most browsers support position:sticky which can be used to create a sticky after scoll Navbar. Bootstrap 4 includes the sticky-top class for this...
https://codeply.com/go/oY2CyNiA7A
Bootstrap 3 - Original Answer
Here's a Bootstrap 3 example that doesn't require extra jQuery.. it uses the Affix plugin included in Bootstrap 3, but the navbar markup has changed since BS2...
<!-- Content Above Nav -->
<header class="masthead">
</header>
<!-- Begin Navbar -->
<div id="nav">
<div class="navbar navbar-default navbar-static">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="divider"></li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
..
</li>
<li>
..
</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
Working demo/template: http://bootply.com/69848
This worked great for me. Don't forget to put a filler div in there where the navigation bar used to be, or else the content will jump every time it's fixed/unfixed.
function setSkrollr(){
var objDistance = $navbar.offset().top;
$(window).scroll(function() {
var myDistance = $(window).scrollTop();
if (myDistance > objDistance){
$navbar.addClass('navbar-fixed-top');
}
if (objDistance > myDistance){
$navbar.removeClass('navbar-fixed-top');
}
});
}
Use Bootstrap Affix:
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active">Basic Topnav</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</body>
</html>
You could use position: sticky
#navbar {
position: sticky;
top: 0px;
}
The #navbar should be a direct child of the body though.
For Bootstrap 4, a new class was released for this. According to the utilties docs:
Apply the class sticky-top.
<div class="sticky-top">...</div>
For further navbar position options, visit here.
Also, keep in mind that position: sticky; is not supported in every browser so this may not be the best solution for you if you need to support older browsers.
In answer to Shubham Patwa: This way, the page is "jumpy" soon as the class "navbar-fixed-top" applies. That's because the #mainnav is throwen in and out of the document's DOM flow. This can result in an ugly UX if the page has a "critical height", jumping between fixed and un-fixed #mainnav position.
I altered the code this way, which seems to work fine (not pixel-perfect, but fine):
$(document).ready(function() {
var navpos = $('#mainnav').offset();
var navheight = $('#mainnav').outerHeight();
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('#mainnav').addClass('navbar-fixed-top');
$('body').css('marginTop',navheight);
}
else {
$('#mainnav').removeClass('navbar-fixed-top');
$('body').css('marginTop','0');
}
});
I have found this simple javascript snippet very useful.
$(document).ready(function()
{
var navbar = $('#navbar');
navbar.after('<div id="more-div" style="height: ' + navbar.outerHeight(true) + 'px" class="hidden"></div>');
var afternavbar = $('#more-div');
var abovenavbar = $('#above-navbar');
$(window).on('scroll', function()
{
if ($(window).scrollTop() > abovenavbar.height())
{
navbar.addClass('navbar-fixed-top');
afternavbar.removeClass('hidden');
}
else
{
navbar.removeClass('navbar-fixed-top');
afternavbar.addClass('hidden');
}
});
});