I want to create a navbar for my Website but if i add transition to the links on mobile mode, it dont animates
My HTML
<header>
<nav>
<span class="navvisible">
<span class="toggler"><i class="fa-solid fa-bars"></i></span>
<span class="header_nav">
Logo
</span>
</span>
<div class="nav_bar">
<a class="active" href="#home">Home</a>
what
ThaHell
</div>
</nav>
My CSS
#media screen and (max-width: 700px) {
.toggler {
font-size: 1.2em;
padding-right: 10px;
display: inline;
}
div.nav_bar {
transition: all 1s;
height: 0;
display: none;
padding: 10px 70px;
}
header nav div a {
display: block;
text-align: center;
font-size: 18px;
}
.nav_bar.activenav{
display: block;
height: auto;
}
header {
width: 100%;
}
.active {
padding-bottom: 2px;
}
.navvisible {
padding-bottom: 10px;
}
}
The funktions of div.nav_bar and .nav_bar.activenav dont work. The class .activenav is toggled by JS.
Navbar active
Navbar
If i click on the 3 Bar Icon, the JS code will add the class .activenav to the div.nav_bar
I just want a transition effect.
I tried it with height and absolute positions but they didnt worked.
Try this
.nav_bar.activenav {
animation: appearing .3s linear;
}
#keyframes appearing {
0% {
height:0;
}
100% {
height:auto;
}
}
Related
I am trying to make a simple social network website. I am using a top navigation panel and a side navbar.
The problem I am facing is that I am not able to add any components in the blank area that you are able to see in the image.
This is my HTML body with the CSS I am using:-
//css code for sidebar
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #D96AA7;
--secondary-color: #422C73;
--complimentary-color: #88BFB5;
--contrast-color: #F2E527;
--light-color: #D2A9D9;
}
.container {
background: #191919;
min-height: 100vh;
font-family: Montserrat, sans-serif;
}
nav a {
font-size: 40px;
color: #fff;
text-decoration: none;
padding: 20px;
text-align: center;
}
nav {
position: fixed;
left: 0;
z-index: 50;
display: flex;
justify-content: space-around;
flex-direction: column;
height: 100vh;
background: var(--secondary-color);
}
section {
position: absolute;
top: 0;
height: 100vh;
width: 0;
opacity: 0;
transition: all ease-in .5s;
display: flex;
justify-content: center;
align-items: center;
}
/* Styles applied on trigger */
section:target {
opacity: 1;
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
section:target h1 {
opacity: 0;
animation: 2s fadeIn forwards .5s;
}
#first {
background:var(--primary-color);
}
#second {
background: var(--complimentary-color);
}
#third {
background: var(--contrast-color);
}
#fourth {
background: var(--light-color);
}
#keyframes fadeIn {
100% { opacity:1 }
}
//css code for top navigation
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<body>
<style>
a {
text-decoration: none;
color: white;
}
</style>
<!--this is the top navigation bar-->
<div class="topnav" id="myTopnav">
Home
Chit-Chat
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!--this is side navbar-->
<nav>
<a href="#first"
><abbr title="PROGRAMMING"
><img src="assets/programming.jpg" height="100" ,width="100" /></abbr
></a>
<a href="#second"
><abbr title="SINGING"
><img src="assets/singing.jpg" height="100" ,width="100" /></abbr
></a>
<a href="#third"
><abbr title="DANCING"
><img src="assets/dancing.png" height="100" ,width="100" /></abbr
></a>
<a href="#fourth"
><abbr title="PAINTING"
><img src="assets/painting.jpg" height="100" ,width="100" /></abbr
></a>
</nav>
<div class="container">
<section id="first">
<div class="outer">
<div class="inner">
<label>Back</label>
</div>
</div>
</section>
<section id="second">
<div class="outer">
<div class="inner">
<label>Back</label>
</div>
</div>
</section>
<section id="third">
<div class="outer">
<div class="inner">
<label>Back</label>
</div>
</div>
</section>
<section id="fourth">
<div class="outer">
<div class="inner">
<label>Back</label>
</div>
</div>
</section>
</div>
</body>
my side navbar opens a div with a close button for now in it as you might be able to see
but I don't understand where I should put the code I want in the blank space.
if I am adding it after my side navbar code it is displaying it in a space under the blank area.
I am using the code for the side navbar from the internet, that is why i am not able to figure it out
pls help
How could I turn this navbar I made using CSS into Hamburger menu for mobile ? It needs to be responsive. I first tried using bootstrap but I'd like it to use CSS
Here's my codepen : https://codepen.io/Softee/pen/WNZpXGa
Thanks in advance for your help!
Here's the code :
header {
background: #583760;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
max-height: 90px;
margin-left: 60px;
float: left;
padding: 10px;
}
nav {
margin-right: 60px;
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 40px;
padding-top: 50px;
}
nav a {
color: white;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: black;
}
#nav:not(:target) {
right: -100%;
transition: right 1.5s;
}
#nav:target {
right: 0;
transition: right 1s;
}
<header>
<div class="container">
<img src="images/GameStar-Blanc.png" alt="logo" class="logo">
<nav>
<ul>
<li>A LA UNE </li>
<li>L'ACTUALITE</li>
<li>GUIDES ET ASTUCES</li>
<li>PROCHAINEMENT</li>
</ul>
</nav>
</header>
First of all, you will have to refactor the global CSS by using flex and grid which are the standard for responsive design. It is way more simple and powerful than using floats and other ancient stuff:
<header class="header">
<img src="..." />
<nav> ... </nav>
</header>
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 20px 60px;
}
With justify-content: space-between you tell the container that the elements inside of it (.logo and nav) will be spaced, the first (logo) at the left and the second (nav) at the right, no need to use float. The property works only if you set display: flex. With align-items: center; you tell the flex container how you want to vertically align your items.
Then, you can assign a class to ul and populate it as follows:
.list {
display: grid;
grid-auto-flow: column;
list-style-type: none;
column-gap: 20px;
padding: 0;
}
Here you're telling to <ul> element that all the <li> elements inside of it, should compose a grid of n columns as many <li> elements and that you want 20px of space between each of them. The property column-gap works only if you set display: grid. The padding should always be 0 or the browser will add some padding by default. You don't want it so you specify 0.
Now, you can use a powerful combo to set the width of the list items by creating a class and assigning it to your <li> elements:
.listItem {
width: min-content;
white-space: nowrap;
}
Here you're just telling to the list items that their width should be automatic, based on the words length. With white-space: nowrap you're telling to the list items that you never want the text to start a new line after a space. For example, "GUIDES ET ASTUCES" will always be placed on a single line. At the same time you're also setting the width for each column of the grid created before.
Now, create a button and wrap it together with the logo in a new div:
<div class="mobileHeader">
<img src="images/GameStar-Blanc.png" alt="logo" class="logo">
<button class="hamburger">Menu</button>
</div>
Basically, this will be your mobile header with the logo on the left and the button on the right. The menu will be placed below.
Create a global CSS rule and tell the button you never want to display it:
.hamburger {
display: none;
}
Now for the mobile menu, you should change the appearance of the <nav> container and all its child element that you want to change. From now on your code should be wrapped around a media query, place the media queries at the bottom of your CSS file or at least, below the rules defined before:
#media screen and (max-width: 800px) {
// CSS code
}
Create another CSS rule targeting all the devices with a max resolution of 800px:
#media screen and (max-width: 800px) {
.hamburger {
display: block;
}
}
In short, you just said: "The menu button should always be hidden, but when a device has a width from 0 to 800px, I want to display it.
Now create another rule inside the media query #media screen and (max-width: 800px) and do the same you did for the header:
.mobileHeader {
width: 100%;
display: flex;
justify-content: space-between;
}
Basically you want that a certain width, the header is something like:
Now you should have two elements inside your <header>, <div> and <nav>, let's create a rule and tell the header that you would like to display those elements one below the other:
.header {
flex-direction: column;
padding: 20px;
}
Basically it is just like grid-auto-flow: row for grids.
Now do the same for the list, this time you want the opposite, you want that all the items will compose a grid with n rows and just one column:
.list {
grid-auto-flow: row;
list-style-type: none;
row-gap: 40px;
column-gap: 0;
justify-items: center;
}
With justify-items: center you're instructing the list to center the list items. It works only with display: grid, since you set display: grid in a global rule, you don't need to write it again as long as you don't need to change it.
Now assign a class to your <nav> and enter another rule in the media query:
.menu {
display: none;
}
Since your menu should be hidden when an user visits the website on mobile, it should be set on display: none by default.
Now, set a rule to target only devices with a width of 801 px and more with (min-width: 801px):
#media screen and (min-width: 801px) {
.menu {
display: block !important;
}
}
No matter what, you always want the menu to be displayed for devices which have a resolution wider than 800px.
Now, if you shrink your window the mobile menu should be vanished and here you need a bit of JS to open and close it, I am not going into the details since your question is totally related to CSS and I will only confuse you by going deeper but you will find everything in the pen I made for you.
https://codepen.io/alienopolis/pen/NWapXWZ
Finally, I would recommend you to take this free tutorial which covers everything you need to know about responsive design with CSS:
https://www.freecodecamp.org/news/css-flexbox-and-grid-tutorial/
HTML
<header class="header">
<div class="mobileHeader">
<img src="images/GameStar-Blanc.png" alt="logo" class="logo">
<button onclick={openMenu()} class="hamburger">Menu</button>
</div>
<nav class="menu">
<ul class="list">
<li class="listItem">A LA UNE </li>
<li>L'ACTUALITE</li>
<li>GUIDES ET ASTUCES</li>
<li>PROCHAINEMENT</li>
</ul>
</nav>
</header>
CSS
body {
width: 90%;
height: 800px;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
background: #583760;
align-items: center;
padding: 20px 60px;
}
.logo {
color: white;
}
.list {
display: grid;
grid-auto-flow: column;
list-style-type: none;
column-gap: 40px;
}
.listItem {
width: min-content;
white-space: nowrap;
}
nav a {
color: white;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: black;
}
.hamburger {
display: none;
}
#media screen and (min-width: 801px) {
.menu {
display: block !important;
}
}
#media screen and (max-width: 800px) {
.header {
flex-direction: column;
padding: 20px;
}
.mobileHeader {
width: 100%;
display: flex;
justify-content: space-between;
}
.hamburger {
display: block;
}
.menu {
display: none;
}
.list {
grid-auto-flow: row;
list-style-type: none;
row-gap: 40px;
column-gap: 0;
justify-items: center;
}
}
JS
const menu = document.querySelector(".menu");
let open;
function openMenu() {
if (open) {
menu.style.display = "none";
open = false;
} else if (!open) {
menu.style.display = "block";
open = true;
}
}
Responsive means you'll use media queries.
If your current CSS represents the way you want the menu to look on the desktop, then you wrap that menu-related css within a media query, which matches whatever your definition of desktop is.
something like:
/* not-menu-related generic css here ... */
/* menu-related css that should be used on both desktop/mobile here ... */
#media screen and (min-width:240px) and (max-width:480px) {
/* all your current (desktop) menu-related css here */
}
After that, you can make a similar #media .... { ... } block for mobile, and add the relevant CSS in there that makes it look whatever way you prefer there.
threw this together using #media and display:block, display:none hope it helps
header {
background: #583760;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
max-height: 90px;
margin-left: 60px;
float: left;
padding: 10px;
}
nav {
margin-right: 60px;
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 40px;
padding-top: 50px;
}
nav a {
color: white;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: black;
}
#nav:not(:target) {
right: -100%;
transition: right 1.5s;
}
#nav:target {
right: 0;
transition: right 1s;
}
.hamburgerIcon {
display: none;
}
#media only screen and (max-width: 600px) {
.hamburgerIcon {
display: block;
}
.hamburgerIcon div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
nav a {
display: none;
}
}
<header>
<div class="container">
<img src="https://via.placeholder.com/60" alt="logo" class="logo">
<nav>
<ul>
<li>A LA UNE </li>
<li>L'ACTUALITE</li>
<li>GUIDES ET ASTUCES</li>
<li>PROCHAINEMENT</li>
<li>
<div class='hamburgerIcon'>
<div></div>
<div></div>
<div '></div>
</div>
</ul>
</nav>
</header>
also see w3schools.com/howto/howto_js_mobile_navbar.asp for further help building the nav if you need
Here's a solution with minimal JS.
You'll want to adjust your CSS for smaller screen sizes and use a media query for your larger screen sizes styles like, #media only screen and (min-width: 768px).
Then you'll want to add a click event to your nav to toggle an "open" class and style accordingly:
document.getElementById('navigation').onclick = () => {
document.body.classList.toggle('nav-open')
}
:root {
--header-height: 100px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
position: relative;
background: #583760;
height: var( --header-height);
}
header::after {
content: '';
display: table;
clear: both;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
height: 100%;
}
.container img {
height: 100%;
}
.hamburger {
color: white;
font-size: 36px;
user-select: none;
}
nav {
cursor: pointer;
}
nav a {
color: white;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
nav ul {
position: fixed;
top: 100px;
right: 0;
height: 100%;
width: 100%;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px;
margin: 0;
list-style: none;
background: #583760;
display: none;
}
nav ul li {
padding: 10px 0;
}
.nav-open nav ul {
display: flex;
}
#media only screen and (min-width: 768px) {
.logo {
max-height: 90px;
margin-left: 60px;
float: left;
padding: 10px;
}
.hamburger {
display: none;
}
nav {
margin-right: 60px;
float: right;
}
nav ul {
display: block;
padding: 0;
position: relative;
top: unset;
right: unset;
height: unset;
}
nav li {
display: inline-block;
margin-left: 40px;
}
nav a:hover {
color: black;
}
#nav:not(:target) {
right: -100%;
transition: right 1.5s;
}
#nav:target {
right: 0;
transition: right 1s;
}
}
<header>
<div class="container">
<img src="https://via.placeholder.com/150" alt="logo" class="logo">
<nav id="navigation">
<div class="hamburger">≡</div>
<ul id="navigationItems">
<li>A LA UNE </li>
<li>L'ACTUALITE</li>
<li>GUIDES ET ASTUCES</li>
<li>PROCHAINEMENT</li>
</ul>
</nav>
</header>
I'm trying to create a multi-screen compatible navbar (mainly mobile and desktop users). I have created the styling I want for the navbar, however, I have a minor problem: When expanding the navbar on medium devices (768px or below) and then close it, if the user changes the resolution size to > 768px, the side navbar doesn't show.
function sideNavAction() {
let sidenav = document.getElementById("sideNavBar");
console.log(window.getComputedStyle(sidenav).display);
if (window.getComputedStyle(sidenav).display == "none") {
sidenav.style.display = "block";
} else {
sidenav.style.display = "none";
}
}
html,
body {
height: 100%;
margin: 0 !important;
padding: 0 !important;
font-family: "Poppins", sans-serif;
}
.mobile-nav {
height: 70px;
width: 100%;
position: fixed;
background-color: darkblue;
color: grey;
}
.nav-brand {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: #1a1a27;
}
.nav-heading {
display: inline-block;
}
.nav-heading h2 {
color: white;
white-space: nowrap;
}
.nav-icon {
text-align: center;
}
.sidenav {
display: none;
height: 100%;
width: 280px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: width 0.5s;
}
.sidenav .nav-brand {
padding: 25px 20px;
height: 50px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.sidenav .nav-heading h2 {
margin: 0;
color: white;
white-space: nowrap;
opacity: 1;
max-width: 0;
transition: 0.16s;
}
#expand-icon {
transition: transform 0.5s;
}
#sidenav-links {
margin: 15px 0px;
}
.sidenav-links a {
padding: 10px 18px;
display: block;
text-decoration: none;
color: #9697aa;
white-space: nowrap;
}
.link {
display: inline-block;
font-size: 20px;
padding-left: 15px;
vertical-align: middle;
color: #9697aa;
opacity: 1;
max-width: 100vw;
}
.active {
background-color: #1b1b28;
}
.active i {
color: #5d78ff;
}
.active .link {
color: white;
}
.fas {
vertical-align: middle;
}
#media only screen and (min-width: 768px) {
.mobile-nav {
display: none;
}
.sidenav {
display: block;
}
.sidenav .nav-brand {
display: flex;
}
.sidenav:not(:hover) {
width: 75px;
}
.sidenav:not(:hover) .nav-heading h2 {
opacity: 0;
max-width: 0;
visibility: hidden;
transition: 0.1s 0.2s;
}
.sidenav:not(:hover) #expand-icon {
transform: rotate(180deg);
}
.sidenav-links a:hover {
background-color: #1b1b28;
color: #5d78ff;
}
.sidenav-links a:hover .link {
color: white;
transition: none;
}
.sidenav:not(:hover) .link {
opacity: 0;
max-width: 0;
visibility: hidden;
transition: 0.1s 0.2s;
}
}
#media only screen and (max-width: 768px) {
.sidenav .nav-brand {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Online CV</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<link
href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/6cc49d804e.js"
crossorigin="anonymous"
></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="mobile-nav">
<div class="nav-brand">
<div class="nav-heading">
<h2>Navbar</h2>
</div>
<div class="nav-icon">
<button onclick="sideNavAction()">
<i id="collapse-icon" class="fas fa-fw fa-bars fa-2x"></i>
</button>
</div>
</div>
</div>
<div class="sidenav" id="sideNavBar">
<div class="nav-brand">
<div class="nav-heading">
<h2>Navbar</h2>
</div>
<div class="nav-icon">
<i id="expand-icon" class="fas fa-fw fa-angle-double-left fa-2x"></i>
</div>
</div>
<div class="sidenav-links">
<a class="active" href="#">
<i class="fas fa-fw fa-id-card fa-2x"></i>
<p class="link">Link 1</p>
</a>
<a href="#">
<i class="fas fa-fw fa-graduation-cap fa-2x"></i>
<p class="link">Link 2</p>
</a>
<a href="#">
<i class="fas fa-fw fa-briefcase fa-2x"></i>
<p class="link">Link 3</p>
</a>
<a href="#">
<i class="fas fa-fw fa-smile-beam fa-2x"></i>
<p class="link">Link 4</p>
</a>
</div>
</div>
</body>
</html>
I realize that my JS function is the cause of this, as it sets the display of the side nav to 'none', but I am unable to think of an elegant solution.
A couple of things.
Inline eventlisteners are frowned upon.
Better to listen for click events via Javascript.
You added a stye of display: none; and there is no eventListener or media query to change it once the width increased beyond the threshold.
This codepen has the above adjustments:
https://codepen.io/riza-khan/pen/poJEOYE?editors=1111
And should work as intended.
However, I added a media query and targeted the nav class with a !important tag. That should, ideally, never be done. I would suggest, removing the !important and playing around with the code until it works without it.
Hope this helped.
Thanks to #chriskirknielsen, I was able to come up with this solution which fixed the problem I was having.
/* --- Function to Open/Close Mobile Nav --- */
function sideNavAction() {
let sidenav = document.getElementById("sideNavBar");
if (sidenav.classList.contains("sidenav-mobile-visible")) {
sidenav.classList.remove("sidenav-mobile-visible");
} else {
sidenav.classList.add("sidenav-mobile-visible");
}
}
Then added this in my css file
.sidenav-mobile-visible {
display: block;
}
Why aren't you using Bootstrap "navbar" component? This is the solution to your problem.
Bootstrap navbar is responsive for desktop and mobile devices. You are not required to mention screen sizes there in pixels. Here is the link of the Bootstrap library. You have to just integrate Bootstrap to your html document via Bootstrap CDN on the given link.
https://getbootstrap.com/docs/4.4/components/navbar/
Good day,
I am trying to make my first responsive layout with the help of the Bootstrap Framework.
As a base layout I have taken an example template and I am now trying to modify this template.
I have added the following:
<div class="row col-xs-12 col-md-6 border1" id="HeadBar">
This is not showing up
</div>
Here I want to place the page header (logo and company title)
My CSS code :
#HeadBar {
background-color: #ffffff;
height: 10%;
width: 100%;
position: relative;
display: block;
}
#HeadBar h1 {
margin: 0px;
padding: 10px;
}
The problem is.. The #HeadBar doesn't show up at all.
Let alone being responsive.
Adding a H1 tag does make it visible. But I want it to be visible without any additions.
I hope that anyone could see my errors.
I know this is very basic. But I need to get a hang of it
https://jsfiddle.net/ferencik/zb50wgve/
Still need some addition, like adding z-index:1001 (or any value more than 1000 because you have class navbar-static-top in your nav - it have z-index:1000 - which overlap your #HeadBar) in #HeadBar
#HeadBar {
background-color: #FFF;
width: 100%;
position: relative;
display: block;
height: 10%;
z-index: 1001;
}
Add z-index: 9999; to the css.
Fiddle
Instead of using z-index, i would recommend fixing your position issues which are the actual cause of the problem.
I would also remove the class .row from the #headBar div. .row is used for margins within a container and shouldn't be use on the parent container itself.
On .navbar, I have set the position back to initial as it was always fixing to the top of the parent instead of finding its place below the previous sibling.
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
margin: 0px;
padding: 0px;
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
position: initial;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 20px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: 10px;
margin-left: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0;
/* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 768px) {
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 0px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
#media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}
#HeadBar {
background-color: #ffffff;
height: 10%;
width: 100%;
position: relative;
display: block;
}
#HeadBar h1 {
margin: 0px;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="navbar-wrapper">
<div class="container">
<div class="col-xs-12 col-md-6 border1" id="HeadBar">
This is not showing up
</div>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
JSFiddle
With bootstrap, you have to separate row DIVs with col-... ones, like this:
<div class="row" id="HeadBar">
<div class="col-xs-12 col-md-6 border1">
Something to show
</div>
</div>
Because col-... divs use float system, and row allows to clear your DOM.
By the way, using % for height with a static or relative position does not work. You have to use pixels, em or what you want.
#HeadBar {
background-color: #ffffff;
min-height: 50px; // example
width: 100%;
position: relative;
display: block;
}
or simply use fixed or absolute property to set a pourcentage value:
#HeadBar {
background-color: #ffffff;
height: 10%;
width: 100%;
position: fixed;
left: 0;
top: 0;
display: block;
}
Hope it will help !
CSS
Change
Add the property in class .navbar-wrapper .navbar
float:left;
width:100%
See the fiddle https://jsfiddle.net/zb50wgve/4/
OR
Structural changes
Add wrap up of .row for #HeadBar.
and remove the class row from #HeadBar
Code:
<div class="row">
<div class=" col-xs-12 col-md-6 border1" id="HeadBar">
This is not showing up
</div>
</div>
See fiddle : https://jsfiddle.net/zb50wgve/5/
First, question to solve this is what are you trying to achieve?
this element with text should be fixed? static?
Second, the element with class row must wrap the elements with col-something-number
Thrid, If the nav is static don't break the nav component just add a div on top, see this fiddle https://jsfiddle.net/6evtc3ry/
Simply use a div instead of applying all kind of classes just use #headbar as you are using
<div id="HeadBar" class="">
This is not showing up
</div>
This will work well
You can use this,
#HeadBar
{
display:inline-flex;
height:10%;
width:100%;
}
I wish to make my navbar slide down, when the Login button is clicked on - something like this website: https://getroxi.com/ (when the SignUp button is clicked on). This is what I was currently able to get : https://gyazo.com/cd1d3a23fd41229deb673c3f25076c22
One thing I have been able to do is make it slide down, but the section that is supposed to appear above, is currently behind the navbar. I did this by adding the inline css position: relative. But I want the navbar to be transparent and the login div to appear only on the option click.
Here is the HTML for the navbar :
<nav class="navbar" data-spy="affix" style="position: relative;">
<div class="container-fluid">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="/"><img src="images/deloitte.png"></a>-->
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a id="toggleLogin" href="#">Sign in</a><li>
<li>Our Network</li>
</ul>
</div>
</div>
</div>
</nav>
Here is the Javascript I am using :
/* FX.Slide */
/* toggle window for the login section */
/* Works with mootools-release-1.2 */
/* more info at http://demos.mootools.net/Fx.Slide */
window.addEvent('domready', function(){
$('login').setStyle('height','auto');
var mySlide = new Fx.Slide('login').hide(); //starts the panel in closed state
$('toggleLogin').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
$('closeLogin').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});
});
And here is the CSS :
nav.navbar {
margin: 0;
left: 0;
right: 0;
position: fixed;
top: -100%;
border-radius: 0;
transition: 300ms;
-webkit-transition: 300ms;
border: none; }
#media screen and (max-width: 767px) {
nav.navbar {
position: static;
top: 0;
} }
nav.navbar div.container-fluid {
background-color: rgba(96, 96, 96, 0.2);; }
nav.navbar button.navbar-toggle span.icon-bar {
color: #002776;
border-color: #002776;
background-color: #002776; }
nav.navbar a.navbar-brand {
color: #002776;
font-weight: 700;
font-size: 22px;
padding-top: 20px;
padding-bottom: 20px; }
nav.navbar a.navbar-brand img {
width: 125px; }
#media screen and (max-width: 767px) {
nav.navbar a.navbar-brand {
padding-top: 7px;
padding-bottom: 7px;
font-size: 16px; } }
nav.navbar ul.nav li a {
color: #FFFFFF;
transition: 300ms;
-webkit-transition: 300ms;
line-height: 24px;
font-size: 22px;
padding-top: 25px;
padding-bottom: 25px; }
nav.navbar ul.nav li a:hover {
color: ;
background-color: #000; }
#media screen and (min-width: 768px) {
nav.navbar.affix {
position: fixed;
top: 0;
z-index: 100; } }
nav.navbar div.container-fluid.top-nav-collapse {
padding: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
background: #000;
}
#media (min-width:769px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
ul.nav > li:hover {
background:#000;
}
Help will be appreciated :)
How about something like this https://jsfiddle.net/koeqLmcL/
HTML
<div class="navigation text-center">
<h3>This is navigation</h3>
</div>
<div class="content">
<button class="show-nav">Nav</button>
<h3>This is content</h3>
</div>
CSS
body {
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
position: relative;
}
.navigation {
z-index: 1;
width: 100%;
padding: 15px 0;
background: black;
color: white;
position: absolute;
}
.content {
z-index: 10;
background: green;
height: 100vw;
padding: 20px 50px 100px;
width: 100%;
color: white;
transition: all 0.4s ease-in;
position: absolute;
}
.margin-top {
margin-top: 90px;
transition: all 0.4s ease-in;
}
JS
$('.show-nav').click(function() {
$('.content').toggleClass('margin-top');
})
Of course you will modify this by your needs and code but you get the idea