I am quite new on making a website with bootstrap.
My website has a fixed navbar
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
This is all going perfect in my browser. But when I resize the browser to a smaller size (instead of full size) the brandlogo is moving to much to the left and half of it dissapears on the leftside. The button (btn-navbar) is to much to the right, so its behind the scrollbar.
How can I fix this in the css? Do I need to add css to #media?
Take a look at this link: http://getbootstrap.com/examples/navbar-fixed-top/
This will help you fix your problem :-)
Hope this helps!
make sure you have all of your CSS and JS in place correctly...
Related
I have a div containing HTML5 video as the background. I displaced it using a -Z-index to overlay a logo on top. I cannot figure out why the div containing the video is placing a margin between the menu bar and itself when I include the poster attribute in the video element.
Note: This works as desired when I remove the video element.
The attached screen shot has different colors for body and background of the menu bar for demo purposes, but here is a link to my site:
http://eldonutshoppe.com/index2.html
Here is my code in question:
HTML:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed hidden" 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>
</div>
<ul class="nav navbar-nav navbar-left">
<li><a target="_blank" href="https://www.facebook.com/donutshoppe/"><img class="socialmedia" src="img/dsfb.svg"></a></li>
<li><a target="_blank" href="https://instagram.com/donutshoppe/"><img class="socialmedia" src="img/dsinstagram.svg"></a></li>
<li><a target="_blank" href="https://www.youtube.com/channel/UC7OPBnAhkrik-ZY1M2kk9Xw"><img class="socialmedia" src="img/dsyoutube.svg"></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Subscribe to our Newsletter</li>
</ul>
</div>
</nav>
<!-- Begin page content -->
<div class="container-fluid">
<div class="bg-video col-md-12 hidden-sm hidden-xs">
<video preload="auto" poster="/img/eldonutshoppe.svg" autoplay loop muted>
<source src="video/uncletonyloop.mp4" type="video/mp4"/>
<source src="video/uncletonyloop.webm" type="video/webm"/>
</video>
<div class="sslogo-video">
<img class="sslogo-big" src="img/eldonutshoppe.svg">
<br>
Browse our Record Collection
</div>
</div>
</div>
CSS:
.bg-video{
height:100vh;
padding: 0;
}
video{
width:100%;
opacity:.3;
position: fixed;
z-index: -100;
}
Referring to the image, I cannot figure out what is causing the "white space" between the menu bar and the video. (On the site itself, the "white space" is black.
I think the problem is the poster attribute in the video element, it is somehow altering the dimensions before the video starts loading and it becomes available. Since you already have the same image in another div you could try just removing the poster attribute.
Let me know if that works.
Just had a look at your site, in your app.css on line 96
change the following:
.video {
position: absolute; <-- its currently set to fixed
}
Should do the trick :)
I am new to bootstrap and am trying to make simple menu/nav.
I am trying to make contents of the menu centered along with the brand. Also when I make the screen smaller the menu items move under the brand. How can I make it so that it doesn't? There seems to be enough space in the nav to not make the items move under.
Note: I have not written any CSS for this.
https://jsfiddle.net/b9smvjn0/
HTML:
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#account-options" 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>
<h4 class="navbar-brand">Image Box</h4>
</div><!--end navbar header-->
<!--togglable menu items-->
<div class="collapse navbar-collapse" id="account-options">
<ul class="nav navbar-nav">
<li>Upload Photo</li>
<li>Deactivate Account</li>
<li>Activate Account</li>
<li>Delete Account</li>
<li>Log Out</li>
</ul>
</div><!--end toggle-->
</div><!--end container-->
</div><!--end navigation-->
I think it's because your h4 element inside the navbar-header. It's adding an extra margin on top and bottom, this is why it doesn't align.
.navbar-header h4 {margin:0;}
I removed it in your fiddle and it's working.
https://jsfiddle.net/b9smvjn0/1/
Is this what you want?
Edit
Hopefully this is what you are looking for.
Note: This is using custom css, so if you plan to stick with pure bootstrap, you'll to do in another way.
I added a div around the brand and the navbar so, we can center both elements.
Also i reduced the amount of padding on the a tag inside the navbar. This is necessary because of the amount of menu items you have.
Then i just used the technique of text-align:center; margin:0 auto; on the container div. It's inside a media(min-width:768); because when it get smaller the layout change, so we get it back to original position.
This the updated fiddle: https://jsfiddle.net/b9smvjn0/3/
To remove the extra space, you can remove the margin for the <h4>. And for centering all the <nav> content, or keeping it on the straight line, use these:
white-space: nowrap;
overflow: hidden;
Fiddle: https://jsfiddle.net/oLmnjh3p/
I have a private video site that's main aimed towards my home networks and the desktop computers, however, the site was constructed on a 1920x1080 resolution so if that's any smaller that site looks like a catastrophe. here is the code for the page.
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div style="width:66%" class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Network TV</li>
</ul>
</div>
</div>
</nav>
<div class="col-md-4 col-md-offset-3" style="width:100%; height=:100%; color:black; margin-top:13%; text-align:center; border: 0">
<div class="row center-row">
<div style="width:10%" class="col-md-4"><div style="background-color:transparetn" class="well"><p><u><h4>Season1</h4></u></p></div></div>
<div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season2<h4></u></p></div></div>
<div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season3</u></p></div></div>
<div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season4</h4></u></p></div></div>
<div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season5</h4></u></p></div></div>
</div>
</div>
What I want to know
My question is why does this not scale down properly, when the screen is smaller I want the margins to adjust to fix the screen, but instead it all just goes into a vertical list all mixed my and improperly scaled
If you are using bootstrap you have no need for all the extra inline styles, by setting inline widths to your html you are taking away what makes bootstrap "boostrap" for sizing, bootstrap has a grid system, if you follow the grid system, your site will work correctly. Please read: w3 fools has a great starting point for begginers. http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Also, after looking at your code I noticed you have col-4 set to 10% width, it does not work like that. col-4, is more like 33% if you are using the most common 12 column grid. that means by setting col-4 to 10% you are over riding bootstrap key features and is why it is not working for you.
In your example the last div should be </nav> for one thing. Along with this style tag inside of the container > style="width:66%". I would start with those things first.
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Network TV</li>
</ul>
</div>
</div>
</div><!--CHANGE TO NAV-->
I'm trying to figure out how to change the background color of a bootstrap nav bar to match the background of the element, in this case the body tag, behind it. The effect I am wanting is similar to 'background-color:transparent' but I don't want it transparent; I want the page to flow behind it still as you scroll down. I also do not want it to inherit the parent background as it is a linear-gradient. What I am looking to do is set the background of the whole nav bar as the current color behind the nav bar on the parent element behind it.
Since that didn't come out very clear, I set up an example in jsfiddle: https://jsfiddle.net/y1Lev5o6/2/
Using bootstrap resources, here is the html on the fiddle
<body style="background-image:-webkit-linear-gradient(top,#023322,#ffffff); background-repeat:no-repeat; height:1000px;">
<div class="navbar navbar-inverse navbar-fixed-top" style="background-image:none; background-color:transparent;">
<div class=" container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="color:white;">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div style="background-color: white; height: 100px;margin-top:200px;">
I don't want to see white in my nav bar</div>
<footer style="padding-top:200px;">
<p style="color:white;">© my website</p>
</footer>
</div>
If you scroll down on the results of the fiddle I think it is obvious of what I am trying to accomplish, or in this case prevent. I want all my page elements to flow behind my nav bar, but want the nav bar to pick up the color directly behind it on the body tag.
With the help of a little javascript:
$(document).ready(function(){
$(window).scroll(function(e){
var scr = $(window).scrollTop();
$('.navbar').css('background-position', '0px -'+ scr+'px');
});
});
and CSS:
.navbar{
background-image:-webkit-linear-gradient(top,#023322,#ffffff);
background-repeat:no-repeat;
background-position:top;
background-size:auto 1000px;
}
See this updated fiddle
Essentially what's going on here is the .navbar gets the same gradient backgorund, and it's position is changed/moved with the window scrolling.
My code is save at http://jsfiddle.net/qba2xgh6/1/ , it comes from the Bootstrap official website.
Below is the code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-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="index.php">My Brand</a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container main">
<p>
Hello, the main content starts here.
Hello, the main content starts here.
Hello, the main content starts here.
Hello, the main content starts here.
Hello, the main content starts here.
Hello, the main content starts here.Hello, the main content starts here.
</p>
</div>
The problem is that when I clicked the dropdown button at the right upper corner, the dropdown menu appears and covers the main content. How can I avoid this? I would like it to push down the main content.
That's because you are using the class navbar-fixed-top that makes the navbar stay fixed -- out of the flow on the document. You can:
Remove that class. But it will delete the behavior on all devices and resolutions too.
If you want to keep that for all but not for mobile then add this media query:
#media (max-width:768px) {
.main {
margin-top:0;
}
.navbar-fixed-top {
position:static;
}
}
Check this DemoFiddle
Remove the class navbar-fixed-top from the outermost <div>
You are seeing the intended behaviour for the fixed navigation. If you remove the .navbar-fixed-top class on the navigation it removes the 'stickiness' of the navigation and it'll follow the content flow.
You can a sample at http://jsfiddle.net/qba2xgh6/4/ , I also removed the margin from the .main as it's not needed anymore.
I faced this issue when I first started using Bootstrap. When you use the class navbar-fixed-top the navbar will stay at the top of the page. Remove this and then it'll work as expected.