I am newbie to bootstrap css. Facing probelm in adjusting height of header and footer.
code for footer:
<div id="footer">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">What is thenWat?</li>
<li>How does it work?</li>
<li>Feedback</li>
<li>Contact us</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
here is codepen with added css:
Link to codepen
similarly link to header: link to header demo
Can someone tell me how to reduce the height or footer?
I tried with reducing height in header footer class but no change.
What is the logic behind editing bootstrap elements?
You can change the height of the header in the Customize section on Bootstrap official site:
http://getbootstrap.com/customize/#variables-navbar
Looking for the variable #navbar-height.
Example:
http://codepen.io/anon/pen/sHLmJ
Related
I wish to create a sticky topbar in Foundation 6.
In foundation 5 this was easy; simply add the "sticky" class to the top bar.
In Foundation 6 I believe you have to use the new "sticky" attribute (http://foundation.zurb.com/sites/docs/sticky.html) like so:
<div data-sticky-container>
<nav class="top-bar sticky" data-topbar role="navigation" data-sticky>
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Website Name</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li class="active">Home</li>
<!-- ... -->
</ul>
</div>
</nav>
</div>
However the top bar looks weird as it doesn't take the full width of the webpage.
What is the correct way of creating a sticky topbar in Foundation 6?
I found a solution and i hope you will enjoy it .
what i find solution you can use this freely anywhere in page and it will work like foundation 5.
foundation 6 is just bit tricky in sticky option okay here is code.
<div id="try">
<nav class="sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-top-anchor="try" data-btm-anchor="destroy:bottom" data-margin-top="0" data-margin-bottom="0">
<div class="row columns">
<div class="top-bar-left">
love
</div>
<div class="top-bar-left">
love
</div>
<div class="top-bar-left">
love
</div>
</div>
</div>
</nav>
</div>
as you can i see i add a parent div like "try" you must have to do it to tell the sticky where sticky have to start so i used data-anchor-top="try" ok but if you only add this and leave it will go on top just scroll a page just a bit . for more i added data-btm-anchor="destroy:bottom" else your settings .
for bottom anchor you just have to add a div
<div id="destroy">
finsihed
</div>
better this id you used in footer or use footer id if you want sticky have to move until end of page else anything you like hope you understand .
The bug has been fixed in the 6.2.2 update of foundation for sites
My problem is - footer is coming on top of every form.
My base.html.twig looks like this:
<div class="footer navbar-default navbar-fixed-bottom" id="footer">
<footer class="container" >
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Regulamin</li>
<li>Polityka prywatności</li>
<li>Kontakt</li>
</ul>
</div>
</footer>
And its the look of the page footer
I think the answer would be similar to the case with the navbar-fixed-top. Could you try and set padding-bottom: 70px to your body element?
As it stated in doc
Have you tried to place this in your footer? clear:both;
This is troubling because the only reason I want a topbar is for smaller screens. The dropdown works fine in medium and large, but disappears on smaller screens. I've read it needs to be inside a 12-width column, but that doesn't seem to help. It actually introducted another (minor) problem where the bar no longer fills the screen's width. The dropdown is only 4 characters, how could it be too large? What am I missing here?
<div class="row">
<div class="fixed small-12 medium-12 large-12 column">
<nav class="top-bar" style="color: white;" data-options="is_hover:false" data-topbar="">
<ul class="title-area">
<li class="name"></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
Menu
<ul class="dropdown">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
large:
small:
It still needs some tweaking, but I fixed it. I added
style="display: none;"
to
<ul class="title-area">
It looks like they were both trying to occupy the same space.
I've read it needs to be inside a 12-width column...
I really don't think that this is right; that is the reason for the problem you introduced.
Actually I would change
<div class="fixed small-12 medium-12 large-12 column">
to
<div class="fixed">
If want it to show for small screens only then you could do like this
<div class="fixed show-for-small-only">
Also don't forget to reinitialize or reapply listeners as per documentation (at the very bottom of the page).
$(document).foundation();
and
$(document).foundation('topbar', 'reflow');
Also note the list items should contain links. Change
<li>Test</li>
<li>Test</li>
<li>Test</li>
to
<li>Test</li>
<li>Test</li>
<li>Test</li>
It's not exactly the same, but maybe helpful. I use top-bar for medium and larger screens, and I use tab-bar for small screens.
You can find inspiration on my website. Feel free to inspect it. It's also on GitHub.
It is based on the Zurb-Foundation 5 documentation. Shouldn't be too difficult to cope with I hope.
Also noticed you are missing the mobile menu icon.
Should be an li in the title-area
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
I'm trying to tweak an existing Twitter Bootstrap navigation bar to include a sign-out item, which is implemented as a form:
<div class='navbar'>
<div class='navbar-inner'>
<div class='container'>
<a class='brand'>Test</a>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><form >Sign Out</form></li>
</ul>
</div>
</div>
The logout link gets rendered differently than the rest of the navigation items. I'm sure this is a simple fix for someone knowledgeable in Twitter Bootstrap, but I'm pretty lost and would appreciate a push in the right direction.
I have a JSFiddle demonstrating the issue here.
The <form> tag is disrupting the bootstrap CSS if you inspect the bootstrap code you can see the selector for the a styles are only targeting direct descendants of the <li> in the nav
.navbar .nav > li > a
I am not sure the indended application of the form is but a real easy fix is to wrap the entire navbar with the form.
<form>
<div class='navbar'><div class='navbar-inner'>
<div class='container'>
<a class='brand'>Test</a>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li>Sign Out</li>
</ul>
</div>
</div>
</form>
Try This
<li>Sign Out</li>
remove the form tags
Check here JSFiddle
I am new Bootstrap and have been trying to get my head around documentation but finding it a bit confusing.
My page has three blocks: a main header, a side navigation, and a main content.
I could easily do a layout with CSS but I am using Bootstrap and wanted to use this to do a responsive layout.
On a regular screen I would like it to be as follows (where header takes full width):
[HEADER]
[NAV][MAIN]
Then on a small screen:
[HEADER]
[NAV]
[MAIN]
But on a smallscreen I would like nav to be collapsed. My nav is "nav nav-list bs-docs-sidenav" and I am not sure how to get that effect with this.
Thanks very much for any help.
Here is the html. Not that it gives you much more info.
<body>
<header>
<h1>title</h1>
</header>
<nav>
<ul id="nav" class="nav nav-list bs-docs-sidenav" >
<li><a class="parent">item 1</a>
<ul class="bs-docs-sidenav" style="display:none;">
<li>
<a href="#">
subitem 1
</a>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</nav>
<main class="content">
<p>content</p>
</main>
</body>
The answer is to use col--
This tells you how many columns the block should take up on different size screens.
Still would like the menu box to shrink into 1 item on a small screen, but this is good enough.
<header class="row col-xs-12">
</header>
<nav class="row col-xs-12 col-sm-4 ">
</nav>
<main class="row col-xs-12 col-sm-8">
</main>