I wanted to show the overlay while sub menu is opened using css, I have tried below thing, it's doing the trick but I am not able to get back to nav links since the overlay is on top.
.header .navbar .nav .nav-item div.big-menu {
position: absolute;
display: block;
opacity: 0;
width: 100%;
max-height: 450px;
top: 80px;
left: 0;
z-index: 399;
visibility: hidden;
overflow: hidden;
background: #ffffff;
color: #181717;
-webkit-transition: all 0.3s ease 0.15s;
transition: all 0.3s ease 0.15s;
}
.header .navbar .nav .nav-item div.big-menu .big-menu-body {
position: relative;
overflow: hidden;
background-color: white
}
.header .navbar .nav .nav-item:hover > div {
opacity: 1;
visibility: visible;
overflow: visible;
}
/* Used :after to apply overlay */
.header .navbar .nav .nav-item:hover > div:before {
content: '';
position: fixed;
z-index: auto;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" integrity="sha384-XXXXXXXX" crossorigin="anonymous"></script>
<body>
<div class="header">
<div class="container">
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sub Menu</a>
<div class="big-menu">
<div class="big-menu-body bg-img-2">
<div class="row big-menu-container">
<div class="col-md-8">
<div class="skew-text">
<div class="big-menu-nav two-col">
<div class="row">
<div class="col-md-6">
<h5>Categories</h5>
<ul class="sm-nav-item">
<li>Category Item</li>
<li>Category Item</li>
<li>Category Item</li>
<li>Category Item</li>
<li>Category Item</li>
<li>Category Item</li>
<li>Category Item</li>
</ul>
</div>
<div class="col-md-6">
<h5>Our work</h5>
</div>
</div>
<blockquote>
More than a big idea. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</blockquote>
<a href="" class="btn read-more read-more-primary">
Our Clients
</a>
</div>
</div>
</div>
<div class="col-md-4 menu-info">
<div class="info-text top-padding text-center">
<h5>FEATURED</h5>
<h3>Bla Bla</h3>
View details
</div>
</div>
</div>
<!--end big menu grid-->
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
<!--end nav-->
</div>
<!--end container-->
</div>
<!--end header-->
</body>
As you can see, its over the nav, I wanted to keep the navigation active to show other links.
Please help
Is that what you want?
Just changed top:0px to top:55px of .header .navbar .nav .nav-item:hover > div:before
$(document).ready(function(){
$(".nav-link.sub").mouseover(function(){
$(".header").css("background", "rgba(0,0,0,0.6)");
});
$(".nav-link.sub").mouseout(function(){
$(".header").css("background", "#fff");
});
});
.header{
transition:0.6s;
}
.header .navbar .nav .nav-item div.big-menu {
position: absolute;
display: block;
opacity: 0;
width: 100%;
max-height: 450px;
top: 80px;
left: 0;
z-index: 399;
visibility: hidden;
overflow: hidden;
background: #ffffff;
color: #181717;
-webkit-transition: all 0.3s ease 0.15s;
transition: all 0.3s ease 0.15s;
}
.header .navbar .nav .nav-item div.big-menu .big-menu-body {
position: relative;
overflow: hidden;
background-color: white
}
.header .navbar .nav .nav-item:hover > div {
opacity: 1;
visibility: visible;
overflow: visible;
}
/* Used :after to apply overlay */
.header .navbar .nav .nav-item:hover > div:before {
content: '';
position: fixed;
z-index: auto;
width: 100%;
height: 100%;
top: 54px;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" integrity="sha384-XXXXXXXX" crossorigin="anonymous"></script>
<body>
<div class="header">
<div class="container">
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link sub" href="#">Sub Menu</a>
<div class="big-menu">
<div class="big-menu-body bg-img-2">
<div class="row big-menu-container">
<div class="col-md-8">
<div class="skew-text">
<div class="big-menu-nav two-col">
<div class="row">
<div class="col-md-6">
<h5>Categories</h5>
<ul class="sm-nav-item">
<li>Category Item</li>
<li>Category Item</li>
<li>Category Item</li>
<li>Category Item</li>
<li>Category Item</li>
<li>Category Item</li>
<li>Category Item</li>
</ul>
</div>
<div class="col-md-6">
<h5>Our work</h5>
</div>
</div>
<blockquote>
More than a big idea. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</blockquote>
<a href="" class="btn read-more read-more-primary">
Our Clients
</a>
</div>
</div>
</div>
<div class="col-md-4 menu-info">
<div class="info-text top-padding text-center">
<h5>FEATURED</h5>
<h3>Bla Bla</h3>
View details
</div>
</div>
</div>
<!--end big menu grid-->
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
<!--end nav-->
</div>
<!--end container-->
</div>
<!--end header-->
</body>
Related
I know this type of questions has been asked, I went over them but could not solve my problem.
In my page where I am using materialize, I have a nav bar with a dropdown button but whenever i open it, it would be behind another element. I am attaching a image of it
I am attaching a image of it.
I have made a similar problem in fiddle,
https://jsfiddle.net/Illuminator0/pugy1j5b/10/
<ul id='dropdown1' class='dropdown-content'>
<li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div id="nav-wrapper">
<ul class=" brand-logo center">
<li>
<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>
I would appreciate the help.
I used the above solution to solve the problem, here's a fiddle of it
CSS code
.dropdown-content {
overflow-y: auto;
position: relative;
z-index: 1000;
}
.dropdown-content .dropdown-content {
margin-left: 100%;
position: relative;
z-index: 1000;
}
.nav-wrapper {
overflow-y: auto;
position: relative;
}
.card {
overflow: visible;
position: relative;
}
nav {
position: relative;
z-index: 9999;
}
here is the solution i just add "z-index-1" in .card class
.dropdown-content {
overflow-y: auto;
position: relative;
z-index: 1000;
}
.dropdown-content .dropdown-content {
margin-left: 100%;
position: relative;
z-index: 1000;
}
.nav-wrapper {
overflow-y: auto;
position: relative;
}
.card {
overflow: visible;
position: relative;
z-index:-1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<ul id='dropdown1' class='dropdown-content'>
<li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div id="nav-wrapper">
<ul class=" brand-logo center">
<li>
<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>
Looks like the major problem is that the div with an id of nav-wrapper should be a class. Your css looks for that class but there is none so never gets applied. Then in that class get rid of the overflow: auto and add z-index: 1000.
Here is the fiddle.
And a snippet...
.dropdown-content {
overflow-y: auto;
position: relative;
z-index: 1000;
}
.dropdown-content .dropdown-content {
margin-left: 100%;
position: relative;
z-index: 1000;
}
.nav-wrapper {
/*overflow-y: auto;*/
position: relative;
z-index: 1000;
}
.card {
overflow: visible;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<ul id='dropdown1' class='dropdown-content'>
<li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
<ul class=" brand-logo center">
<li>
<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>
I am trying to get the Navbar links inside my navbar and they are showing up under it. I am not sure what happened but I am using a flexbox because it is a requirement for the project I am working on but it moved my nav links and I am not sure why
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
height: 40px;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
The magic of flex is that it scales to the size it needs, so usually hardcoding height and width are counter purpose to the usage of flex. removing the hardcoded height fixed the issue for me
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Your navbar ist simply cut off. I removed the height and now its showing correctly.
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
I'm new to bootstrap and have tried implementing a mega menu on hover.But, the mega menu is not displaying.
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
nav ul li .dropdown:hover .dropdown-content {
display: block;
}
nav ul li a {
line-height: 59px;
-webkit-transition: background-color 0.8s;
-moz-transition: background-color 0.8s;
-o-transition: background-color 0.8s;
transition: background-color 0.8s;
}
nav ul li a:hover,
.dropdown:hover .dropbtn {
background-color: #EFF3F6;
}
nav ul li a {
position: relative;
}
nav ul li a:hover:after {
content: "";
display: block;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #7B8B93;
position: absolute;
left: 35%;
bottom: 1px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Capabilities</a>
<div class="dropdown">
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="col-lg-4">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="col-lg-4">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="col-lg-4">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our Clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-search"></i></a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
I dont know where I m getting it wrong. onHover on the nav menu items, the mega menu doesn't pop out. I have tried display:block, but it does not appear. Can somebody please help me to troubleshoot this issue. I would be immensely be grateful. Thank you
Add below styles in your css will solve your problem.
.dropdown{position:initial !important}
.nav-link:hover + .dropdown .dropdown-content{
display: block;
}
I've been struggling with one problem related to displaying a logo when a sticky header is activated. The menu I've accomplished so far works as intended, but I need to display the logo in a small version as soon the header becomes sticky and keep the options centered. Below what I've got:
And I need something like this as soon as the div becomes sticky:
Here's my code so far:
.navbar {
background-color: #fff !important;
}
.navbar .navbar-nav li a {
color: #b29b72 !important;
}
.navbar .navbar-brand {
color: #b29b72 !important;
}
.navbar .navbar-brand:hover {
color: #b29b72 !important;
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(178,155,114, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* HOMEPAGE *****************************************************/
.video-container {
padding-right: 0px;
padding-left: 0px;
}
#splash {
position: relative;
text-align: center;
height: 300px;
background-color: #878787;
}
#splash .video {
position: relative;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
border-bottom: 1px solid #eee;
}
#splash .opaque {
opacity: 0.4;
background-color: #ffffff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.menu-options {
padding-top: 12px;
}
.menu-options a {
color: #b29b72;
font-weight: 600;
font-size: 20px;
}
#menu-row {
height: 50px;
background-color: #000000 !important;
}
.menu-options ul {
margin: 0;
padding: 0;
}
.menu-options ul li {
display: inline-block;
width: 120px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Fantastic Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
<div class="container">
<div class="navbar-collapse collapse nav-content order-2">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-1 order-md-2">
<li class="nav-item">
<a class="nav-link" href="#"><img src="http://via.placeholder.com/200x110"></a>
</li>
<button class="navbar-toggler custom-toggler ml-2" type="button" data-toggle="collapse" data-target=".nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</ul>
<div class="ml-auto navbar-collapse collapse nav-content order-3 order-md-3">
<ul class="ml-auto nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="menu-row" class="sticky-top">
<div class="container">
<div class="row">
<div class="col-12 menu-options text-center">
<ul>
<li>OPTION 1</li>
<li>OPTION 2</li>
<li>OPTION 3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid video-container">
<div id="splash">
<div class="video">
<video autoplay="autoplay" poster="http://via.placeholder.com/1920x300" loop="loop" muted="muted" preload="auto">
<source src="" type="video/mp4">
<source src="" type="video/webm">
</video>
<div class="opaque"></div>
</div>
</div>
<div class="container">
<div class="row" style="height: 100vh;">
<div class="col-12">
</div>
</div>
</div>
</div>
</body>
</html>
You'll need two logos (large - standard. Small - scroll / navigation). Then do the following add the following JQuery to your code, but make sure you use the specific class names (not the ones I've used in my example).
$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
if(!logo.hasClass("sml-logo")) {
logo.hide();
logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
}
} else {
if(!logo.hasClass("lrg-logo")) {
logo.hide();
logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
}
}
});
});
.wrapper {
height: 2000px;
position: relative;
background: green;
}
header {
position: fixed;
width: 100%;
height: 50px;
background: grey;
}
.lrg-logo {
width: 300px;
height: 50px;
text-align: center;
background: red;
}
.sml-logo {
width: 200px;
height: 20px;
text-align: center;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
<div class="lrg-logo">Logo</div>
</header>
</div>
I have a weird question..
I use bootstrap for the first time and it's very awesome indeed. While coding my test website, I figured out something wrong in the monitor sizing.. and that's:
-I copied the navigation html code directly to new line
-I removed the hamburger icon for the switch toggle -show / dont show- from the second new created icon
-I modified the main content for the current element
-whenever I force small the monitor like alternativly telling the site I open from a small monitor, the second bar's element completely disappear. and since I already deleted the toggle button, I can't activate it nor doing anything but maximizing the size so it appears again.
The thing is, i want it to be completely appeared. No toggle thing, only compressing itself when its previewed from small monitor just like the navigation bar when I click on the hamburger icon
Any thoughts how to do this? Thanks and sorry for my awful annoying question. I know it's very annoying but, I just started learning this language and I may face some things in the process.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/sidebar.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" media="screen" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<nav class="navbarmain navbar navbar-default mainnav">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">S-Bolb</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Feed <span class="sr-only">(current)</span>
</li>
<li class="dropdown">
Pages <span class="caret"></span>
<ul class="dropdown-menu">
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
<li role="separator" class="divider"></li>
<li>Add Page
</li>
<li>Manage Pages
</li>
</ul>
</li>
<li>Trending
</li>
<li>co.Groups
</li>
<li>Find Friends
</li>
<li>Analytics
</li>
<li>Events
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="wrapper">
<div class="userpanel">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>Ahmed T.
</li>
Senior Designer
<br>
View my profile
<br>
<a>1</a>-<a>2</a>-<a>3</a>-<a>4</a>-<a>5</a>
<br>
<li role="separator" class="divider"></li>
Connected Networks
<li>Facebook /username
</li>
<li>Twitter /username
</li>
<li>Instagram /username
</li>
<li>Tumblr /username
</li>
<li>Behance /username
</li>
add more
</ul>
<ul class="sidebar-nav">
<li>Liked Pages
</li>
<li>App Center
</li>
<li>Games Feed
</li>
<li>Customize Profile
</li>
</ul>
<ul class="sidebar-nav">
<li>Social Groups
</li>
<li>Group 1
</li>
<li>Group 2
</li>
<li><a>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</a>
</li>
</ul>
<ul class="sidebar-nav">
<li>My Account
</li>
<li>Settings
</li>
<li>Privacy Policy
</li>
<li>Advertising
</li>
</ul>
<a class="block-button" href="#">Logout</a>
</div>
<!-- feed -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<nav class="usercontrolbar navbar navbar-default">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">view all <span class="sr-only">(current)</span>
</li>
<li class="dropdown">
close friends (3) <span class="caret"></span>
<ul class="dropdown-menu">
<li>Suzan William
</li>
<li>Boza Suman
</li>
<li>Cameron Wheeler
</li>
</ul>
</li>
<li class="dropdown">
custom category (15) <span class="caret"></span>
<ul class="dropdown-menu">
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="font-size:22px;">Welcome back, Ahmed! <span class="glyphicon glyphicon-hand-left" id="menu-toggle" aria-hidden="true"></span></a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/geometryangle.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu toggle script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
</script>
</body>
</html>
and the sidebar.css:
.row{
margin-right:0px;
margin-right:0px;
}
#wrapper {
transition: all .4s ease 0s;
height: 100%
}
#sidebar-wrapper {
margin-right: -200px;
right: 70px;
width: 150px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
}
.sidebar-nav {
display: block;
float: right;
width: 150px;
list-style: none;
margin: 0;
padding: 0;
}
#page-content-wrapper {
padding-right: 0;
margin-right: 0;
width: 100%;
height: auto;
}
#wrapper.active {
padding-right: 150px;
}
#wrapper.active #sidebar-wrapper {
right: 150px;
}
#page-content-wrapper {
width: 100%;
}
#sidebar_menu li a, .sidebar-nav li a {
color: #999;
display: block;
float: right;
text-decoration: none;
width: 150px;
background: #252525;
border-top: 1px solid #373737;
border-bottom: 1px solid #1A1A1A;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}
.sidebar_name {
padding-top: 25px;
color: #fff;
opacity: .7;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.choixMenu{
font-size: 12px;
float: right;
text-align-right;
margin-right: 1px;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#main_icon
{
float:right;
padding-right: 65px;
padding-top:20px;
}
.sub_icon
{
float:right;
padding-right: 65px;
padding-top:10px;
}
.content-header {
height: 65px;
line-height: 65px;
}
.content-header h1 {
margin: 0;
margin-right: 20px;
line-height: 65px;
display: inline-block;
}
#media (max-width:767px) {
#wrapper {
padding-right: 70px;
transition: all .4s ease 0s;
}
#sidebar-wrapper {
right: 70px;
}
#wrapper.active {
padding-right: 150px;
}
#wrapper.active #sidebar-wrapper {
right: 150px;
width: 150px;
transition: all .4s ease 0s;
}
}
The second thing is:
How can I make the border sharp? Whenever I add new rule in CSS for all the layout to be with no border, it doesn't work, why is it soft from the edges and not completely 90 degree?
Answer to the second question:
To make the corners of your navbar you need to add the .navbar-static-top class like so:
<div class="navbar navbar-default navbar-static-top">
<!-- enter code here -->
</div>
I would suggest reinstalling the css file to get the toggle functions back.
Once you have that, within the Bootstrap CSS file, you can change when the Toggle function activates, this gives you the option to call the toggle on a certain screen-size.
secondquestion, you can either set the navbar-default/inverse to navbar-static-top, or if you want it to stick to the top, change the CSS to border-radius:0px !important
Hope this helps