jQuery slideToggle direction ! Abnormal behaviour - javascript

Hello I have manually made a toggle navigation button that kicks in at 980px on my project. It works fine, it displays the navigation.
However, when I try to slideToggle the menu to make it show in a more elegant way, the direction of the height growht is from bottom to top.
I have attached a video with the behaviour. Here it is: https://www.screencast.com/t/wAkkHiRP5h
A jsFiddle with the functionality can be found here: https://jsfiddle.net/grimhilt/7x49x6sk/
The HTML is:
<nav id="main-navigation" class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a href="#navbar-brand-centered" class="main-nav-trigger">
<span>
<em aria-hidden="true"></em>
</span>
</a>
<div id="logo" class="navbar-brand navbar-brand-centered">
<a href="/">
<img src="assets/img/logo.png" alt="logo" class="img-responsive">
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar-brand-centered">
<ul class="nav navbar navbar-nav navbar-left">
<li>ALbums</li>
<li>Boxes</li>
<li>DVD Cases</li>
<li>Shop</li>
</ul>
<ul class="nav navbar navbar-nav navbar-right">
<li>About us</li>
<li>Journal</li>
<li>Contact</li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
The CSS:
#main-navigation.nav-open #navbar-brand-centered,
#navbar-brand-centered {
/*
show primary nav - mobile only
:target is used to show navigation on no-js devices
*/
display: block;
}
#main-navigation #navbar-brand-centered {
position: absolute;
background-color: #9e865f;
z-index: 2;
top: 100px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
text-align: center;
border: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
The jQuery is:
var mainHeader = $('#main-navigation');
mainHeader.on('click', '.main-nav-trigger', function(event){
// open primary navigation on mobile
event.preventDefault();
mainHeader.toggleClass('nav-open');
$( "#navbar-brand-centered" ).slideToggle( "slow" );
});
How can I make the #navbar-brand-centered height animate from top to bottom as it should? Thanks a bunch!

Just remove these lines:
mainHeader.toggleClass('nav-open');
$('#navbar-brand-centered').toggleClass('is-visible');
and add display:none to the main-navigation id
var mainHeader = $('#main-navigation');
mainHeader.on('click', '.main-nav-trigger', function(event) {
// open primary navigation on mobile
event.preventDefault();
// mainHeader.toggleClass('nav-open');
// $('#navbar-brand-centered').toggleClass('is-visible');
$("#navbar-brand-centered").slideToggle("slow")
});
#main-header {
position: absolute;
min-height: 100px;
z-index: 10;
top: 0;
left: 0;
width: 100%;
display: table;
}
#main-navigation {
display: none;
display: table-cell;
vertical-align: middle;
padding: 45px 0;
margin-bottom: 0;
background-color: #151725;
border: none !important;
}
#main-navigation.nav-open #navbar-brand-centered,
#navbar-brand-centered ul:target {
/*
show primary nav - mobile only
:target is used to show navigation on no-js devices
*/
display: block;
}
#main-navigation #navbar-brand-centered {
position: absolute;
background-color: #9e865f;
z-index: 2;
top: 100px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
text-align: center;
border: none;
/*-webkit-backface-visibility: hidden;*/
/*backface-visibility: hidden;*/
}
#main-navigation.nav-open #navbar-brand-centered {
display: block;
}
#main-navigation .main-nav-trigger {
float: right;
display: inline-block;
height: 100%;
text-transform: uppercase;
right: 0;
}
#main-navigation .main-nav-trigger em,
#main-navigation .main-nav-trigger em::after,
#main-navigation .main-nav-trigger em::before {
/* this is the menu icon */
display: block;
position: relative;
height: 2px;
width: 22px;
background-color: #9e865f;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="main-header">
<nav id="main-navigation" class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a href="#navbar-brand-centered" class="main-nav-trigger">
<span>
<em aria-hidden="true"></em>
</span>
</a>
<div id="logo" class="navbar-brand navbar-brand-centered">
<a href="/">
<img src="assets/img/logo.png" alt="logo" class="img-responsive">
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar-brand-centered">
<ul class="nav navbar navbar-nav navbar-left">
<li>ALbums</li>
<li>Boxes</li>
<li>DVD Cases</li>
<li>Shop</li>
</ul>
<ul class="nav navbar navbar-nav navbar-right">
<li>About us</li>
<li>Journal</li>
<li>Contact</li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>

Ok so i think the key here is understanding what the .slideToggle() does.
It will toggle between display:block; when shown and display:none; when hidden. It does this with a sliding animate on the height of the element.
In your code you are also messing with the display properties:
$('#navbar-brand-centered').toggleClass('is-visible');
mainHeader.toggleClass('nav-open');
So your adding display:block; then the jQuery fucntion is turning toggling it.
So if you remove this, it works. see eaxmple:
var mainHeader = $('#main-navigation');
mainHeader.on('click', '.main-nav-trigger', function(event){
// open primary navigation on mobile
event.preventDefault();
//mainHeader.toggleClass('nav-open');
//$('#navbar-brand-centered').toggleClass('is-visible');
$( "#navbar-brand-centered" ).slideToggle( "slow" )
});
#main-header {
position: absolute;
min-height: 100px;
z-index: 10;
top: 0;
left: 0;
width: 100%;
display: table;
}
#main-navigation {
display: table-cell;
vertical-align: middle;
padding: 45px 0;
margin-bottom: 0;
background-color: #151725;
border: none !important;
}
#main-navigation.nav-open #navbar-brand-centered,
#navbar-brand-centered ul:target {
/*
show primary nav - mobile only
:target is used to show navigation on no-js devices
*/
display: block;
}
#main-navigation #navbar-brand-centered {
position: absolute;
background-color: #9e865f;
z-index: 2;
top: 100px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
text-align: center;
border: none;
/*-webkit-backface-visibility: hidden;*/
/*backface-visibility: hidden;*/
}
#main-navigation.nav-open #navbar-brand-centered {
//display: block;
}
#main-navigation .main-nav-trigger {
float: right;
display: inline-block;
height: 100%;
text-transform: uppercase;
right: 0;
}
#main-navigation .main-nav-trigger em,
#main-navigation .main-nav-trigger em::after,
#main-navigation .main-nav-trigger em::before {
/* this is the menu icon */
display: block;
position: relative;
height: 2px;
width: 22px;
background-color: #9e865f;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header id="main-header">
<nav id="main-navigation" class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a href="#navbar-brand-centered" class="main-nav-trigger">
<span>
<em aria-hidden="true"></em>
</span>
</a>
<div id="logo" class="navbar-brand navbar-brand-centered">
<a href="/">
<img src="assets/img/logo.png" alt="logo" class="img-responsive">
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar-brand-centered">
<ul class="nav navbar navbar-nav navbar-left">
<li>ALbums</li>
<li>Boxes</li>
<li>DVD Cases</li>
<li>Shop</li>
</ul>
<ul class="nav navbar navbar-nav navbar-right">
<li>About us</li>
<li>Journal</li>
<li>Contact</li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>

Related

How can I position an element at the bottom of the page?

I'm working on my portfolio website and I'm not that good with CSS as of now this social bar is coming like this in between and I want it to go down like the bottom of the page
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
.social {
/* //position my socials to bottom left */
position: absolute;
scale: 0.09;
bottom: 0;
left: 0;
margin-top: 100%;
margin-left: 40px;
width: 0%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
.social li {
list-style: none;
}
.social li a {
display: inline-block;
margin-left: 40px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover {
transform: scale(0.65) translateY(-15px);
}
<body>
<section class="showcase">
<header>
<h2 class="logo">
EAzZY/Madhur</h2>
<div class="toggle"></div>
</header>
<video src="pexels-rostislav-uzunov-7513671.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>👋 I am Madhur</h2>
</div>
<ul class="social">
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
</ul>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<section id="home"></section>
<section id="about">
<h1>about</h1>
</section>
<section id="contact">
<h1>contact</h1>
</section>
</body>
So without seeing your html I don't know how exactly where your social media bar is. I see you are using absolute positioning which can get goofy if the parent container it is in is not 100% height of the window. Which may be happening here. See my example below. If you want it to sit at the bottom of the screen and the screen does not scroll you will have to make the parent container the height of the screen.
.full-height {
width: 100%;
height: 100vh;
background-color: black;
overflow-x: hidden;
position: relative;
}
.social {
width: 200px;
height: 50px;
background-color: blue;
position: absolute;
bottom: 20px;
left: 20px;
}
<div class="full-height">
<ul class="social"> </ul>
<div>
It would be better to have your html code as well. But assuming the situation, I guess it might be like this:
<div class="container">
<ul class="social">
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
</ul>
</div>
Your CSS code which works, adjust it like this
/* Your container should have position relative and a height of the viewport */
.container {
position: relative;
border: 1px solid red;
height: 15rem;
}
.social {
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
z-index: 1;
}
.social li {
list-style: none;
}
.social li a {
display: inline-block;
color : #fff;
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover {
transform: scale(0.65) translateY(-15px);
}
to do that you can use absolute positioning.
we set our chosen element position to absolute and its container position to relative.
so you choose body as its container and set position for body to relative.
You can change the position of social class to fixed instead of absolute.

How to auto hide nav bar when a link is clicked?

Trying to build my first project, a restaurant website but having some trouble with toggling the nav bar. The nav bar links direct the user to the specified section, but the nav bar remains open after that section is reached/ How do I get it to close after clicking on a link?
This is the JavaScript I'm using:
//select element function
const selectElement=function(element){
return document.querySelector(element);
};
let menuToggler=selectElement('.menu-toggle');
let body=selectElement('body');
menuToggler.addEventListener('click',function(){
body.classList.toggle('open');
});
the HTML of the header/navbar section :
<script src="https://unpkg.com/scrollreveal" charset="utf-8"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav" id="navbar">
<div class="menu-toggle" id="menu-toggle">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<img src="" alt="">
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Menu
</li>
<li class="nav-item">
Order Online
</li>
<li class="nav-item">
Make a Reservation
<li class="nav-item">
Contact Us
</li>
</ul>
</nav>
</div>
</header>
<!-- Header ends-->
CSS of the header, using font awesome
.nav{
height: 7.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle{
color: #fff;
font-size: 2.2rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 2.5rem;
cursor: pointer;
z-index: 1800;
}
/*to hide x of nav bar*/
.fa-times{
display: none;
}
.nav-list{
list-style: none;
position: fixed;
top: 0;
left: 0;
width: 70%;
height:100vh;
background-color: var(--main-font-color-dark);
padding: 4.4rem;
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 1850;
transform: translateX(-100%); /*hides nav bar*/
transition: transform .5s;
}
/*before nav clicked*/
.nav::before{
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.8);
z-index: 1000;
opacity: 0;
trasform:scale(0);
transition: opacity .5s;
}
.open .fa-times{
display: block;
}
/*hides hamburger icon on clicking it*/
.open .fa-bars{
display: none;
}
.open .nav-list{
transform: translateX(0);
}
.open .nav::before{
opacity: 1;
transform: scale(1);
}
let navbar= document.getElementById("navbar")
let link= document.getElementById("link-a")
let showMenu= document.getElementById("show-menu")
link.addEventListener('click',function(){
document.getElementById("navbar").style.display = "none"
});
showMenu.addEventListener('click',function(){
document.getElementById("navbar").style.display = "flex"
});
#navbar{
height: 40px;
width: 100%;
background: red;
}
<div id="navbar" >
<a id="link-a">Click me to hide menu</a>
</div>
<div id="show-menu"> Show menu</div>
small demo to toggle menu

Collapsable sidebar / navigation menu

I'm coding a website, i have a navigation bar on top of it, and a sidebar on the left. I want to turn this Fiddle into this one. It can use CSS, JQuery, JavaScript and Bootstrap, when you click the icon, the sidebar drags out to the right. And when you click it again, it collapse to the left.
<ul id="navbar">
<li class="title" id="sidebar_switch"><i class="fa fa-bars" aria- hidden="true"></i></li>
<li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
<li class="title">Title</li>
</ul>
please have a look at the following solution based on your code using CSS3 translate:
HTML:
<div class="sidebar">
<p>
This sidebar goes all screen down, and if you scroll the webpage, the sidebar stays at the same place everytime, the scro
</p>
</div>
<div class="content">
<ul id="navbar">
<li class="title" id="sidebar_switch"><i class="fa fa-bars" aria-hidden="true"></i></li>
<li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
<li class="title">Title</li>
</ul>
<div class="main">
aaaaaaaaaa
</div>
</div>
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
font-family: sans-serif;
overflow: hidden;
}
a {
text-decoration: none;
}
.title {
float: left;
display: block;
padding: 14px 16px;
}
#navbar {
font-weight: bold;
text-align: center;
float: left;
background-color: #333;
color: white;
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
.sidebar{
position:fixed;
top:0px;
left:0px;
width:100%;
color:red;
}
.slide{
-webkit-transform: translate3d(25%,0,0);
}
.content{
width:100%;
height: 30em;
position:absolute;
left:0px;
top:0px;
background: white;
-webkit-transition:all .2s linear;
}
.content .slide{
-webkit-transform: translate3d(25%,0,0);
}
i{
cursor: pointer;
}
JS:
$('i').click(function(){
$('.content').toggleClass('slide');
});
JS Fiddle Demo

Make nav bar scroll when user has zoomed in browser

I was wondering if there was a way to add a scroll to the nav bar when the user has a zoomed in browser.
Currently, I have my nav bar set to:
position: fixed;
left: 0;
top: 0;
Along with a javascript code that makes it stick to the side when the user scrolls on the page.
However, say the user has a browser that is zoomed in 150% or more, half of the nav bar gets cut off and the user is not able to see the other options in the nav bar. Is there a way to add a scroll when the user has a zoomed in browser?
Here is my code,
HTML:
<header>
<div class="logo">
<a href="index.html">
<img src="img/logo.png"/>
</a>
</div><!-- end logo -->
<div id="menu_icon"></div>
<nav>
<ul>
<div class="transition">
<div class="sideBar">
<li>About</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Resume</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Skills</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Portfolio</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Map Gallery</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Thesis</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Contact</li>
</div>
</div>
</ul>
</nav><!--end sidebar-->
<div class="footer clearfix">
<ul class="social clearfix">
<li><img src="img/email.png"></li>
<li><img src="img/linkedin.png"></li>
<li><img src="img/twitter.png"></li>
<li><img src="img/facebook.png"></li>
</ul><!-- end social -->
<div class="rights">
<p>Copyright © MD</p>
</div><!-- end rights -->
</div ><!-- end footer -->
</header><!-- end header -->
CSS:
/* Header */
#media (min-width:1100px) {
header {
display: block;
position: fixed;
left: 0;
top: 0;
width: 260px;
min-height: 100%;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
header .logo {
margin-top: 50px;
margin-left: -50px;
}
header nav ul {
display: block;
overflow: hidden;
margin-top: 35px;
margin-left: -15px;
list-style: none;
}
header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
}
header nav ul li a {
color: #000000;
font-family: "raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
}
header nav ul li a:hover {
color: #8AE6B8;
}
header nav ul li a:active {
color: #CC99FF;
}
.transition {
width:50%;
height: 30px;
position: relative;
transition: 0.5s;
}
.transition:hover {
width:100%;
height: 30px;
position: relative;
transition: 0.5s;
}
.sideBar {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
header .footer {
margin-top: 30%;
}
header ul.social {
position: relative;
list-style: none;
margin-bottom: 5px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .7s ease; /* Transition for Webkit browsers */
}
header ul.social li {
display: block;
float: left;
position: relative;
margin: 0 15px 15px 4px;
}
header ul.social li a {
display: block;
width: 30px;
height: 30px;
background-position: 0 0;
}
header .rights p {
color: #000000;
font-family: "raleway-regular", arial;
font-size: 11px;
letter-spacing: 2px;
line-height: 18px;
}
header .rights a {
font-family: "raleway-bold", arial;
font-weight: bold;
text-decoration: none;
}
Here is the jsfiddle:
https://jsfiddle.net/n2zb3pnz/
Even on the js fiddle it doesn't show the full nav bar because it is too zoomed in.
Fiddle: https://jsfiddle.net/n2zb3pnz/5/
header {
overflow: auto;
bottom:0;
}
A few issues here..
The <header> html tag is normally used as a container element for "navigational aids" for some containing element (in your case <body>). From the docs:
The HTML Element represents a group of introductory or
navigational aids. It may contain some heading elements but also other
elements like a logo, wrapped section's header, a search form, and so
on.
.. So, it's not semantically incorrect, but think of it's typically usage as being the top portion of a "frame" or box on your page (not the sidebar nav)
Your navbar overflow property is set to hidden - which prevents the scrolling that you are looking for. It also has no parent element aside from the doc body, so unless you want the scrolling on the navbar itself, you'll need to add a parent with overflow: auto;.
Example:
html, body{
height: 1000px;
width: 1000px;
}
.content{
height: 100%;
width: 100%;
overflow: auto;
background-color: pink;
}
.header {
display: block;
position: fixed;
left: 0;
top: 0;
width: 260px;
min-height: 100%;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
.header .logo {
margin-top: 50px;
margin-left: -50px;
}
.header nav ul {
display: block;
overflow: hidden;
margin-top: 35px;
margin-left: -15px;
list-style: none;
}
.header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
}
.header nav ul li a {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
}
.header nav ul li a:hover {
color: #8AE6B8;
}
.header nav ul li a:active {
color: #CC99FF;
}
.transition {
width:50%;
height: 30px;
position: relative;
transition: 0.5s;
}
.transition:hover {
width:100%;
height: 30px;
position: relative;
transition: 0.5s;
}
.sideBar {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
.header .footer {
margin-top: 30%;
}
.header ul.social {
position: relative;
list-style: none;
margin-bottom: 5px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
/* For Webkit browsers */
filter: gray;
/* For IE 6 - 9 */
-webkit-transition: all .7s ease;
/* Transition for Webkit browsers */
}
.header ul.social li {
display: block;
float: left;
position: relative;
margin: 0 15px 15px 4px;
}
.header ul.social li a {
display: block;
width: 30px;
height: 30px;
background-position: 0 0;
}
.header .rights p {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 11px;
letter-spacing: 2px;
line-height: 18px;
}
.header .rights a {
font-family:"raleway-bold", arial;
font-weight: bold;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="header">
<div class="logo"> <a href="index.html">
<img src="img/logo.png"/>
</a>
</div>
<!-- end logo -->
<div id="menu_icon"></div>
<nav>
<ul>
<div class="transition">
<div class="sideBar">
<li>About
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Resume
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Skills
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Portfolio
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Map Gallery
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Thesis
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Contact
</li>
</div>
</div>
</ul>
</nav>
<!--end sidebar-->
<div class="footer clearfix">
<ul class="social clearfix">
<li><img src="img/email.png">
</li>
<li><img src="img/linkedin.png">
</li>
<li><img src="img/twitter.png">
</li>
<li><img src="img/facebook.png">
</li>
</ul>
<!-- end social -->
<div class="rights">
<p>Copyright © MD</p>
</div>
<!-- end rights -->
</div>
<!-- end footer -->
</div>
<!-- end header -->
</div>

Centering navbar-brand image with centered navbar

I'm just learning Bootstrap 3 and I want to use that in my website so it's still comfortable to access from mobile devices.
I want to achieve something like this:
but this is as far as I get.
This is the code:
jsfiddle
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:30px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: inline-block;
margin:auto;
}
#media (min-width: 768px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-left: 1px solid #f2f2f2;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}
#media (max-width: 767px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<img src="image/nav_logo.png"/>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Product</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<div class="social">
<a class="pull-left icon" href="#" data-icon = "f"></a>
<a class="pull-left icon" href="#" data-icon = "i"></a>
</div>
</div>
</div>
</body>
</html>
I would have done this:
nav {
width: 100%;
}
.img-holder {
width: 50px;
height: 50px;
margin: 0 auto;
background-color: red;
position: relative;
}
ul,li {margin:0;padding:0;}
ul {
width: 304px;
position: absolute;
top: 20px;
}
li {
width: 150px;
text-align: center;
float: left;
display: inline-block;
border: 1px solid #d8d8d8;
}
.left-ul {
left: 50%;
margin-left: -350px;
}
.right-ul {
right: 50%;
margin-right: -350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="img-wrapper">
<ul class="left-ul">
<li>ABOUT</li>
<li>PRODUCT</li>
</ul>
<div class="img-holder"></div>
<ul class="right-ul">
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
Just add this to your css
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
max-width: 480px; /**change the max width to what ever you want you can add it in media query too*/
margin: 0 auto; /**center the menu*/
}
live Demo
I haven't tried it myself but you could try using input group classes: bootstrap: align input with button.
In general, if you know the height of a block element, if you set its line height to that height you'll get one line that is centered vertically in that space; just watch out for items going to two lines or more, then it breaks.
You will need to make a few changes to both your CSS and HTML.
HTML-wise, make all the items (inlcluding the image), navbar li items and remove the left and right navbar classes.
Then you will need to center the navbar using in its uncollapsed state by applying text-align on the parent and unfloating the children, using:
#media (min-width: 768px) {
.navbar .navbar-collapse {
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
}
Demo Fiddle
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height: 30px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: inline-block;
margin: auto;
}
#media (min-width: 768px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-left: 1px solid #f2f2f2;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}
#media (max-width: 767px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse ">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li class="divider-vertical"></li>
<li>Product
</li>
<li>
<a href="#" class="navbar-brand">
<img src="image/nav_logo.png" />
</a>
</li>
<li>About
</li>
<li class="divider-vertical"></li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="social">
<a class="pull-left icon" href="#" data-icon="f"></a>
<a class="pull-left icon" href="#" data-icon="i"></a>
</div>
</div>
</div>

Categories

Resources