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>
Related
I have multiple divs with bootstrap tabs (using collapse) side by side as you can see here:
https://codepen.io/MichaelBootstrap/pen/wvMZOob
<div id="mgvo-content">
<div id="mgvo-main" class="mgvo-tab">
<ul class="nav nav-tabs mgvo-submenu mgvo-main-submenu">
<li class="active"><a data-toggle="tab" href="#mgvo-main-m1">Hauptmenu</a></li>
<li class="mgvo-submenu-item"><a data-toggle="tab" href="#mgvo-main-m2">Menu 1</a></li>
</ul>
<div class="mgvo-tab-content tab-content">
<div id="mgvo-main-m1" class="tab-pane fade in active">
</div>
<div id="mgvo-main-m2" class="tab-pane fade mgvo-tab-content-item">
</div>
</div>
</div>
<div id="mgvo-side1" class="mgvo-tab">
<ul class="nav nav-tabs mgvo-submenu">
<li class="active"><a data-toggle="tab" href="#mgvo-side1-m1">Home</a></li>
<li class="mgvo-submenu-item"><a data-toggle="tab" href="#mgvo-side1-m2">Menu 1a</a></li>
</ul>
<div class="mgvo-tab-content tab-content">
<div id="mgvo-side1-m1" class="tab-pane fade in active">
</div>
<div id="mgvo-side1-m2" class="tab-pane fade mgvo-tab-content-item">
</div>
</div>
</div>
<div id="mgvo-side2" class="mgvo-tab">
<ul class="nav nav-tabs mgvo-submenu">
<li class="active"><a data-toggle="tab" href="#mgvo-side2-m1">Home</a></li>
<li class="mgvo-submenu-item"><a data-toggle="tab" href="#mgvo-side2-m2">Menu 1b</a></li>
</ul>
<div class="mgvo-tab-content tab-content">
<div id="mgvo-side2-m1" class="tab-pane fade in active">
</div>
<div id="mgvo-side2-2" class="tab-pane fade mgvo-tab-content-item">
</div>
</div>
</div>
</div>
For large sceens thats fine, but of cause, on smaller screens if have to collapse the 3 tab bars to one (an one mobile to a burger menu). Collapse the tabs to one isn't a big thing, ever tab bar contain all entry s and based on sm, md, xl they are displayed.
But i'm worry about how to move the content (which can be a form with current unsaved changes) from one tab bar to the first on.
The first idea: set up a Java Script with triggers each window size change and find out if a breakpoint is hit, if, then move the content with jquery from one tab bar to the other. But watch each change of window ist little bit ineffient.
Has any one a better idea? May using CSS an Bootstrap4 only? (Some mixin, CSS before/after)
Concrete questions: How can collapse side1 und side2 (see codepen) into the first tab bar on smaler screens. May the solutions does not "move" anythink but change some views.
I'd didn't need a complete coding, an idea will be fine.
(one option will may be, the the upper tab bars are not 3 diffent bars but only one which if formated to look like 3 (with some align ..) but thats just a guess ..
I don't know if it is exactly good practice but you can always use the .d-none class in bootstrap to hide elements based on breakpoints and d-block to show them.
For example
.d-xl-none
Hides an element only in the extra large breakpoint.
The downside would be having to repeat some elements.
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
In Bootstrap version 3.2.1 to edit and delete links was right, after the upgrade to 3.3.0 right didn't get to level.
Class media-right is not suitable for this purpose, it's necessary, that block had no effect on the text below:
http://i.gyazo.com/b114acc7ce9ea2163511e2ebce600136.png
<div class="media">
<div class="media-body">
<ul class="list-inline small pull-right">
Put a div with style="clear:both" after ul closing tag.
e.g.
<ul class="list-inline small pull-right">
....
</ul>
<div style="clear:both;"></div>
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>
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