I have a problem with Foundation 4 rendering on a small screen.
When on a local server i have the following html code, my custom css is turned of and so is my cutom js. All the needed libraries are loaded correctly as is the foundation library:
Why isnt my topbar showing in a very small browser window?
Below is a html snippet:
<div class="row show-for-touch show-for-portrait show-for-small">
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>title</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><h4>Dungeon</h4></li>
<li><h4>Pricing information</h4></li>
<li><h4>Contact</h4></li>
</ul>
</section>
</nav>
</div>
You won't be able to see your bar in a small browser if you add this visibility class: show-for-touch, which displays only on a real mobile environment.
If you like to see on a small browser, simply remove this class:
<div class="row show-for-portrait show-for-small">
It works on this plunk.
Related
This is my website code in HTML 5 In this code we make some sections as u see header banner and nav As I dont understand why we write Header Banner And Nav separately while in same Code And whats the main reason behind making these sections? And I dont understand That Banner Code Why we Use Banner Code?
<!-- Header -->
<header id="header">
<div class="logo container">
<div>
<h1>Malik Waqar Azim</h1>
<br><br>
<p>Bachelors in Software Engineering</p>
</div>
</div>
</header>
<!-- Nav -->
<nav id="nav">
<ul>
<li>Home</li>
<li class="current">About Me</li>
<li>Contact Me</li>
</ul>
</nav>
<!-- Banner -->
<div id="banner-wrapper">
<section id="banner">
<h2>About Me</h2>
<p>I am currently pursuing bachelors in software engineering at UET Taxila.</p>
<p>I completed my intermediate and matriculation from Fauji Foundation College Lalazar</p>
</section>
</div>
Different sections in html5 language are like boxes for some content. HTML5 language make structure of document of your webpage. Every web browser has their own standard CSS style. If you didn't link custom style, it use this one to know how to show the html elements.
This banner is div - box in which there are informations about you. In this example you have id of div. The 'id' attribute is neccessery if you want to set some styles for this particular box.
I am using the materializecss framework from materializecss.com. I have a simple image that I place above the navbar from materializecss and there is a small white space. I checked the source and there is no margin, padding or border at all. The space goes away if I put the navbar above the image so I am not sure what the problem is.
<img id="header" src="/public/images/header.gif" alt="Header"/>
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile</li>
<li>Skills</li>
<li>Projects</li>
</ul>
</div>
</nav>
I am not using any other css besides the materializecss css file. Any ideas? I don't think that css has any margins anywhere as I don't see it when viewing the source for any of the elements.
Edit: Here is a jsfiddle: http://jsfiddle.net/0tL9up9s/ The list elements aren't appearing because I haven't copied over the javascript but you can still see the white space between the image and the navbar.
OK, I think it has to do with the fact that the image is display:inline and therefore has dimensions that include the line-height.
Setting your image to display: block will correct this issue.
CSS
#header { display:block; }
Or (HTML)
<img id="header" src="/public/images/header.gif" style="display:block" alt="Header"/>
Your fiddle: http://jsfiddle.net/0tL9up9s/1/
Adding a html {line-height: 0} to the end of the materialize.css file seems to fix the problem. I have no idea if it will break any other functionality though, so be careful.
http://jsfiddle.net/8ppt5zou/1/
<img id="header" style="display:block;" src="http://www.thousandwonders.net/covers/89/Bryce.Canyon.National.Park.jpg" alt="Header" >
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile
</li>
<li>Skills
</li>
<li>Projects
</li>
</ul>
</div>
</nav>
I've recently started using bootstrap 3 and I'm really loving the grid system.
I am however stuck trying to implement the following layout.
Is it possible to create something like that with bootstrap?
I have read on the documentation about Column wrapping, is that the way to go?
What would be the best approach to achieve it?
What people often forget when using bootstrap is that it is fully customisable. You can use your own css to size and position divs as long as your css code goes after bootstrap.
Here is something similar to what you are trying to achieve: fiddle
<div id="wrapper" class="">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
I don't think that you can do it only with bootstrap.
You should probably use https://github.com/desandro/masonry that solves this exact problem.
Bootstrap uses float to position your columns, while Masonry compute absolute position to put the div on the right place.
You can still use Bootstrap for defining responsive behaviour of your column (the width propriety)
My website has some serious issues when you resize it to the medium and small views. It looks great at full screen and mobile view but has some serious issues in the browser when you shrink it down to medium and below. I've used foundation but also mixed in some non-foundation code that I think is causing some issues, such as the container. I also suspect there is something wrong with the top nav bar, because that looks off at shrunk views as well. There is a lot of code to look at but i will post some snippets here as well as link to the main site so you can look through the full code.
Here is some of the top bar and also I have a container which is not part of the grid which might be throwing things off, as well as a weird header element that I coded some css for and if removed throws it off as well. Basically, my code is a bit of a mess, and I will be cleaning it up best I can once I figure out what is causing a lot of this mess up when the browser is resized. (ps. to see the rest of the code and css, please visit www.omegadesignla.com and inspect element, or ask me to paste a specific part, thanks! )
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/primarylogo.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<li>Promotional Items</li>
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
<div class="row">
<div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
</div>
</header>
From debugging your site with firebug i see that the logo in the left top corner is a png with 720px width. Although you have class .logo width: 40% it makes the .title-area 720px width which breaks the layout.
try following additions to css:
.title-area {
max-width: 40%; //or whatever you need for your layout. px will work there, too
}
.title-area .logo {
width: 100%;
height: auto;
}
I'd also rewize the png to the needed size to save some kB to download.
I hope that helps.
I am trying to get my head around Zurb Foundation's Top Navigation bar. I struggled to get it working first time around when I was including the navigation mark-up via a js include. When I copied the code into each html page it suddenly worked. This was fine, but I have added a new section to my site where the pages are dynamically formed with ruby.
The actual issue is that when a screen is small, the drop-down menu at the top right of the page stops working.
On the front page of my site, the navigation works on a small screen: Mac Media Production home page, however on this page: Mac Media Production Hosting page, the navigation bar no longer operates correctly, and as far as I am aware the mark-up is the same:
<!-- Header and Nav -->
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name">
<h1>
<a href="http://www.mac-media.co.uk">
mac media
</a>
</h1>
</li>
<li class="toggle-topbar"></li>
</ul>
<section>
<!-- Top Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="active" href="http://www.mac-media.co.uk/index.html">Menu</a>
<ul class="dropdown">
<li><label>Pages</label></li>
<li>Home</li>
<li>Contact Us</li>
<li class="divider"></li>
<li><label>Our Services</label></li>
<li>Web Design</li>
<li>Photo</li>
<li>Video</li>
<li>Hosting</li>
<li>Emails</li>
<li>Domain Names</li>
<li class="divider"></li>
<li><label>Existing Clients</label></li>
<li>Control Panel</li>
<li>Webmail Login</li>
</ul>
</li>
<li class="divider hide-for-small"></li>
</ul>
</section>
</nav>
Can anyone help please!?
In ZURB Foundation 3, this line:
<li class="toggle-topbar"></li>
should be changed to:
<li class="toggle-topbar"></li>
This is just a placeholder for jQuery
Official Docs: http://foundation.zurb.com/old-docs/f3/navigation.php