Rookie here trying to learn code on my own.. I have ran into a problem where my Navbar-collapse now overlaps the content of my page and this time it is a problem because i'd like the background of the navbar-collapse to have background: transparent; .. My Jquery sucks but i'm thinking that it may need to be used here.. it also needs to account for the dropdown menus .. as they may need to push the body of the page down as well.. my code:
<body>
<!-- Start Navbar -->
<nav class="navbar navbar-default" role="navigation" id="myNavbar">
<div class="container">
<!-- Brand and Toggle get grouped -->
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target ="#navbar-responsive-collapse">
<span>Tap me!</span>
</button>
<img src="images/pencil-logo-80x80.png" class="navbar-brand" alt="Our Brand: Folio">
Folio
</div><!-- end navbar-header -->
<div class="collapse navbar-collapse" id="navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown hidden-sm">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services</a>
<ul class="dropdown-menu" role="menu">
<li id="borderTop">Services</li>
<li>Services Small</li>
</ul><!-- end menu -->
</li>
<!-- delete class="dropdown-toggle" data-toggle="dropdown" to make the dropdown only open on hover -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Portfolio</a>
<ul class="dropdown-menu" role="menu">
<li id="borderTop">Portfolio 2 Column</li>
<li>Portfolio 3 Column</li>
<li>Portfolio 4 Column</li>
<li>Single Column</li>
</ul><!-- end menu -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Pages</a>
<ul class="dropdown-menu" role="menu">
<li id="borderTop">About Me</li>
<li>Team Page</li>
<li>Page Sticky Header</li>
<li>Background Video</li>
<li>Preloader</li>
</ul><!-- end menu -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Blog</a>
<ul class="dropdown-menu" role="menu">
<li id="borderTop">Blog Overview Grid</li>
<li>Blog Sidebar</li>
<li>Blog Post</li>
</ul><!-- end menu -->
</li>
<li>Contact</li>
</ul><!-- end navbar-right -->
</div><!-- end navbar-responsive-collapse -->
</div><!-- end container -->
</nav><!-- end navbar -->
<!-- Start Intro -->
<div class="headerWrapper" id="intro">
<h1>Hello. I'm Folio a <strong>small</strong> creative portfolio</h1>
<p>Specialized in design and coding graphics and websites.</p>
</div><!-- end Intro -->
</body>
CSS:
/*-------------------------------
Global Styles
---------------------------------*/
body {
background: url('http://www.controltheweb.com/images/desktop-background-large/magneticField.jpg') no-repeat center center fixed;
/*-- Makes backgrnd responsive --*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#intro {
text-align: center;
margin-top: 120px;
font-family: Paytone One;
}
Hmm not sure if more css is needed but the navbar functions great .. it just is overlapping my page header like bootstrap usually does, but with background: transparent; it looks awful .. the only way i can think of doing this with css/html is using padding somehow but i think a slide effect would be alot nicer looking.. thnx in advance
Here is a bootply that shows my problem: http://www.bootply.com/n7dkI2ZpVX
If I understand the question, what you want is that the content should move down once the dropdown is opened. And should move back once nav-menu collapses. If that is right all you need to do is remove the fixed height from #myNavbar
#myNavbar {
/* height: 80px; */
margin-top: 30px;
background: transparent;
border: none;
}
Related
I am having a problem on how to make an overlay working as I want. The problem is that when I click on the burger button, the overlay covers the bootstrap navbar and even the sliding menu. What I want is that the overlay only affects the HTML body, not including the navbar and the sidebar. Moreover, I want to disable the overlay through the same button but I dont know how to manage that too. Any help. Code is below.
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
//mobile menu slide from the left
$('[data-toggle="slide-collapse"]').on('click', function() {
$navMenuCont = $($(this).data('target'));
$navMenuCont.animate({'width':'toggle'}, 350);
});
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="pull-left navbar-toggle" data-toggle="slide-collapse" data-target="#myNavbar" onclick="on()" onclick="off()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
<div id="overlay"></div>
</body>
You're not creating a stacking context for your navbars.
A stacking context is formed, anywhere in the document, by any element
in the following scenarios:
Element with a position value "absolute" or "relative" and
z-index value other than "auto".
You need to add:
navbar {
z-index: 5;
}
#myNavbar {
z-index: 5;
position: relative;
}
This will allow them to stack relative to the body and the overlay and whatever else you have. You might also move the overlay above them in the DOM, just so I guess semantically (?) it would be stacked before your navbars. But that's probably not required.
I have been encountering a problem from sometime now.Looked up with similar problems on stackoverflow.But none could help me.
Problem is that my html page is jumping, when i scroll it.
If the content is less than the total height of the page, it doesnt jump, but as the content go little bigger than the total height of the page it starts jumping
What are the possible solution, if anyone could help me a bit.
Thanks in advance.I am using bootstrap.
html
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="/welcome">
<img src="/resources/images/senabLogo.jpg">
</a>
</div>
<!-- navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Offers</li>
<li>Settings</li>
<li class="dropdown menu-item">
Language
<ul class="dropdown-menu">
<li>EN</li>
<li>SV</li>
<li>NO</li>
</ul>
</li>
</ul>
<!-- nav navbar-nav -->
<div class="col-sm-3 col-md-3 pull-right">
<ul class="LoginDetailsH">
<li>Sales</li>
<li>Log out <span class="fa fa-sign-out"> </span></li>
<li class="dropdown menu-item pull-right">
<span class="fa fa-question-circle"> </span>
<ul class="dropdown-menu">
<li>View open and closed questions</li>
<li>Ask a new question</li>
</ul>
</li>
</ul>
<!-- LoginDetailsH -->
</div>
<!-- col-sm-3 col-md-3 pull-right -->
</div>
<!-- collapse navbar-collapse -->
</nav>
<div class="container">
</div>
</body>
CSS
.navbar-fixed-top {position:relative !important;}
I have referrd to the foloowing
Prevent page from jumping while changing position of element on scroll function
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
When my web design collapsed to mobile view, the dropdown menu doesn't push down the button below it, instead the menu shows up half way down the page. This only seems to happen on pages with the carousel function and lightbox2.
Any help would be appreciated.
I have tried this which was suggested in another topic:
.navbar-header {
position: relative;
z-index: 1;
}
Here's the Navbar code:
<nav>
<div class="container-fluid">
<!-- 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="#defaultNavbar1" aria-expanded="false"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>About Me</li>
<li class="dropdown">Photography<span class="caret"></span>
<ul class="dropdown-menu">
<li>Events</li>
<li role="separator" class="divider"></li>
<li>Music</li>
<li role="separator" class="divider"></li>
<li>Nature</li>
<li role="separator" class="divider"></li>
<li>People</li>
</ul>
</li>
<li>Contact Me</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
and the scripts at the bottom`
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap-3.3.5.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="application/javascript"></script>
<script>
lightbox.option({
'resizeDuration': 600,
'wrapAround': true,
'alwaysShowNavOnTouchDevices': true,
'fitImagesInViewport': true
})
</script>`
Fixed it.
I switched css files earlier on in the day and I didn't realise a .dropdown-menu was missing from the bootstrap css.
.navbar-nav .open .dropdown-menu
I would suggest you to try putting the script tags at top ins. it might work.
On my mobile part of the site I want to show the submenu without having to click/hover the parent.
HTML:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown "><a class="dropdown-toggle" href="/">Home</a>
<ul class="dropdown-menu" >
<li>News</li>
<li>Contact
<li>About us</li>
</ul>
<li>
</ul>
</div>
I want to show the submenu without having to click or hover the parent. Codes I'm using is CSS, Javascript and Jquery so I can use one (or all) of them to make this. Using the latest version of Bootstrap to make the site (3.3.6).
EDIT
The JSFiddle: https://jsfiddle.net/uvd5jp0o/
Here you can also see I've made the submenu display on hover in jquery.
You can add the class visible-xs- to make the nav displayed in mobile browsers
Checkout the bootstrap website
http://getbootstrap.com/css/
So, for extra small (xs) screens for example, the available
.visible-- classes are: .visible-xs-block, .visible-xs-inline, and
.visible-xs-inline-block.
Try This:
DEMO
Use some piece of script :)
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul id="Drp" class="dropdown-menu visible-xs">
<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>
SCRIPT:
$(document).ready(function(){
CheckScreenSize();
});
window.onresize = function(event) {
CheckScreenSize();
};
function CheckScreenSize(){
if($(window).width()<768){
$("#Drp").addClass('visible-xs');
}else
{
$("#Drp").removeClass('visible-xs');
}
}
Or you can set a width when you whant the menu to show, like this:
window.onload = checkWindowSize;
window.onresize = checkWindowSize;
function checkWindowSize() {
if ($(window).width() < "768") { //example width of 768px
$("#bs-example-navbar-collapse-1 li").addClass('open');
}else{
$("#bs-example-navbar-collapse-1 li").removeClass('open');
}
}
Or you can use the built in class in bootstrap and add it to your ul-element like this:
<ul class="dropdown-menu visible-xs">
The codes will check the window width and only react when the width is smaller then 768px
I don't know what I'm doing wrong here but I expect it's something woefully stupid.
I'm using Bootstrap 3 in Umbraco 6.0.5 and I cannot get the toggle to work on resize down - below 770px width the nav collapses but there's no button to toggle it with, or rather something is there, as seen in code and Firebug, but not visible, in Chrome and Firefox (haven't tried IE).
There's a fiddle and the code below. I'm using http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js and http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css in the fiddle.
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<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"#">reech</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class=" dropdown">
What is reech? <b class="caret"></b>
<ul class="dropdown-menu">
<li>About this site</li>
</ul>
</li>
<li class=" dropdown">
</li>
<li>Key reech projects</li>
<li class=" dropdown">
</li>
<li>Technologies</li>
<li class=" dropdown">
</li>
<li>Complementary Activities</li>
<li class=" dropdown">
News <b class="caret"></b>
<ul class="dropdown-menu">
<li>Merseyside collective switching scheme launched</li>
<li>reech scoops top award</li>
<li>reech award nomination</li>
<li>Green Deal and Energy Company Obligation (ECO) September 2013 Statistics</li>
<li>Energy Switching Scheme</li>
<li>Project 'reeches' new milestone</li>
<li>Firms sign up for new opportunities</li>
<li>14 new jobs created for Merseyside residents</li>
<li>'reeching' out to Low Carbon and Green Energy Sector</li>
</ul>
</li>
<li class=" dropdown">
</li>
<li>reech into business</li>
<li class=" dropdown">
reech partners <b class="caret"></b>
<ul class="dropdown-menu">
<li>reech Steering Group</li>
</ul>
</li>
</ul>
</div><!--close navbar-collapse-->
</div><!--close container-->
</nav><!--Close nav-->
Update - so, I tried altering the data-target (and have altered the fiddle) to #main-nav and the id to main-nav, no joy.
The I tried putting a dash character in the button > span element, and it works. That is, the dashes display, and I can toggle the menu. But where are the icon bars?
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
</button>
And change <nav class="navbar"> to <nav class="navbar navbar-default">
Bootstrap - the toggle button will not show in mobile view
FIX:
Make these changes at: bootstrap.min.css
This fixes the outer border of the Toggle Button
.navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border-radius:4px
}
Add
border:1px solid #444;
(change color code to match your design)
.navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border:1px solid #444; /* added line */
border-radius:4px
}
This fixes the horizontal lines of the Toggle Button
.icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
}
Add
border:1px solid #444;
(change color code to match your design)
.icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
border:1px solid #444;
}
In your 1st line
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
it should be data-target="#nav-collapse" because you have <div class="collapse navbar-collapse" id="nav-collapse"> where id is nav-collapse
This should get you pointed in the correct direction. It looks like your main hiccup is your button data-target attribute is referencing a class rather than an ID. It's best to use an ID in this situation so if you call that class elsewhere in the code your not throwing curve balls at the javascript.
I also see you have several <li class="dropdown"></li> that are blank. I'm not sure if this is intentional or not, but I would refer to the structure that I've enclosed.
Hope this works for you, and best of luck!
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <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="#">Reech</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"> What is reech? <b class="caret"></b>
<ul class="dropdown-menu">
<li>About this site</li>
</ul>
</li><!-- dropdown -->
<li class="dropdown"> Key reech projects <b class="caret"></b>
<ul class="dropdown-menu">
<li>Technologies</li>
<li>Complementary Activities</li>
</ul>
</li><!-- dropdown -->
<li class="dropdown"> Key reech projects <b class="caret"></b>
<ul class="dropdown-menu">
<li>Technologies</li>
</ul>
</li><!-- dropdown -->
</ul><!-- nav navbar-nav -->
</div><!-- collapse navbar-collapse -->
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>