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-->
Related
I have made a menu in wordpress (the site is [http://andreadis.loginet.gr/][1]). This menu is auto generated when user creates a menu item from wordpress. And here i am confused about how can i make it open vertical in responsive.
Header.php is
<!-- header -->
<header>
<div class="overNavPanel">
<div class="container">
<div class="col-md-12">
<div class="row overNavPanel">
<div class="col-md-2 col-sm-6" id="logo">
<img class="img-reponsive" src="/wp-content/uploads/2015/12/logo.png" alt="logo.png">
</div>
<div class="col-md-4 col-md-offset-6 col-sm-6" id="top-right-contact">
<image class="img-reponsive" src="/wp-content/uploads/2015/12/contact.png" alt="call-icon.png">
</div> <!--col-md-4 col-md-offset-7-->
</div><!--row-->
</div>
</div> <!--container-->
</div><!--overNavPanel-->
<nav id="myNavbar" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navDiv">
<div class="container">
<div class="col-md-12">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<ul id="nav" class="nav nav-pills nav-justified">
<li><?php wp_nav_menu(array('container_class'=>'nav','container'=>'container'));?></li>
</div>
</div>
</div>
</div>
</header>
<!-- /header -->
A couple of findings:
You are loading Bootstrap JavaScript twice. I guess this is why collapsing is not working. Make sure that Bootstrap JS is loaded only once.
The (non-PHP-generated) HTML structure above is not fully in line with the Bootstrap examples, so you may need to modify it to make it work properly. Here's my fiddle for your case: https://jsfiddle.net/masa671/bjv1ovbw/
The PHP-generated part: a call to wp_nav_menu() to generate a list item will not work. You need a PHP implementation that generates the correct structure for Bootstrap. This one looks promising, but I guess you are already using a Bootstrap theme for Wordpress that might also have a corresponding implementation? Which theme are you using?
you can use this plugin to create a responsive menu for you responsive-menu
or you can check this site navnav.co
there is many ready responsive navs select the one you like and apply its JS & CSS
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/
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.
So what I'm trying to do is have my navbar automatically center to anything that's in it.
What I want is:
Logo all the way on the left (pulled left)
Button all the way on the right (pulled right)
Search bar directly in the center of the navbar
What I've been having problems with is that the button can have different width (because it's a button where your username is displayed) and this moves the search bar I have making it not centered.
Here's my current code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#"><img src="./assets/img/test_logo.png" /></a>
<div class="nav-collapse collapse">
<div class="span4 offset1">
<form class="navbar-form pull-right">
<div class="input-append">
<input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
<button class="btn" type="button"><i class="icon-search"></i></button>
</div>
</form>
</div>
<ul class="nav pull-right">
<a class="button btn-active" href="" style="margin-top:5px" ><span><i class="icon-user"></i> Sign In</span></a>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Note:
The width of the navbar should be 883px. The rest of the CSS should be Bootstrap's default.
Please help!
It should work as you've described, but that isn't what your code reflects.
Add pull-left to the <a> with the logo so it floats left. Get rid of pull-right from the <form> so it's not floating. Make sure both floating elements (the <a> and <ul> are defined before the <form>).
you could float the elements, adjust the width. like in this example http://jsfiddle.net/kevinPHPkevin/smWBZ/
.logo {
float:left;
}