I use foundation 6 to build my website. Only a problem occurs when I shrink the size of my window.
Picture of my website
Does somebody know how to fix this?
An answer is appreciated.
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#"><b>Pimg</b>
</a>
</h1>
</li>
<!-- 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>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li> <div class="entypo-home entipo"></div></li>
<li> <div class="entypo-picture entipo"></div></li>
<li> <div class="entypo-upload entipo"></div></li>
<li> <div class="entypo-user entipo"></div></li>
</ul>
<ul class="left">
<li>Log out</li>
<li class="has-form">
<div class="row collapse">
<div class="medium-8 columns">
<input type="text" placeholder="Search...">
</div>
<div class="medium-4 columns">
Search
</div>
</div>
</li>
</ul>
</section>
</nav>
Related
I'm trying to get the logo and the nav bar links on the same line. The logo will appear by itself when it resizes to mobile.
This is the current:
Currently on two lines.
This is the html behind it:
<!-- header Area Start-->
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-12">
<div class="logo">
<a href="index-2.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-lg-10 text-right col-md-9 col-12">
<div class="responsive_menu"></div>
<div class="mainmenu-area">
<ul id="nav">
<li>Home <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Rocket Home </li>
<li>Gradient Home </li>
</ul>
</li>
<li>Domain</li>
<li>Hosting <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Hosting </li>
<li>Team </li>
<li>About us</li>
<li>Testimonial</li>
<li>FAQ</li>
</ul>
</li>
<li>Pages <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Team </li>
<li>About us</li>
<li>Testimonial</li>
<li>FAQ</li>
<li>Service</li>
<li>Blog Details</li>
<li>404 Page</li>
<li>Coming Soon</li>
</ul>
</li>
<li>Blog</li>
<li>Support</li>
</ul>
</div>
<div class="search">
<span class="search-trigger"><i class="fa fa-search"></i></span>
<div class="search-box">
<form action="#">
<input type="text" name="s" placeholder="Search..">
<div class="submit-btn">
<input type="submit" value="Go">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- header Area end-->
Any suggestions on what I can do to make them all on one line?
Maximum size of the column in bootstrap is 12. Bootstrap adds padding and margin by default, so try using col-lg-8 and see what happens.
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3">
<div class="logo">
<a href="index-2.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-lg-8 text-right col-md-9">
<div class="responsive_menu"></div>
<div class="mainmenu-area">
Good morning folks, this is only my 2nd question on here, so please bear with me and my minimums:
I just wrote up this lengthy message of how I put the ID and class commands in a section instead of a container, and why the section all the sudden overwrote my css height style. I then figured why not replace the # with a . in the CSS file, and voila, it worked again.
However, i know have a new problem. I have a fixed-top bootstrap navigation bar, and when i click on section #2, named Intro, the page scrolls down only a few pixels to display the first line of text. What i had intended was for the site to display the entire intro container. Any suggestions?
I hope this makes sense:
<body id="page-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container" id="navigation">
<div class="row">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#page-top">Home</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#intro">Intro</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-push-1">
<h1>Welcome to TestZat</h1>
Lorem....
</div>
</div>
</div>
</section>
<section id="login" class="login-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-push-1">
<h1>Finde das Login script hier</h1>
</div>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="container" id="contact-section">
<div class="row">
<div class="col-md-10 col-md-push-1" id="contact">
Section content TBD
</div>
</div>
</div>
</section>
Now it will work fine...just remove id from container.
<body id="page-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div id="navigation">
<div class="row">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#page-top">Home</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#intro">Intro</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</div>
</nav>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-push-1">
<h1>Welcome to TestZat</h1>
Lorem....
</div>
</div>
</div>
</section>
<section id="login" class="login-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-push-1">
<h1>Finde das Login script hier</h1>
</div>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="container" id="contact-section">
<div class="row">
<div class="col-md-10 col-md-push-1" id="contact">
Section content TBD
</div>
</div>
</div>
</section>
I am trying to create a new site template based on Zurb's Foundation 5 that has two menus - a top menu and a left menu. That is working for medium and large sizes, but for 'small' I'm trying to hide the top menu with a top-right "hamburger", and then the left menu to work in a similar manner but from the top-left. This is what it looks like at the moment:
The top right works fine, except only the 'hamburger' menu-icon is clickable. The "MENU" text next to it, is not.
The top left has a couple of problems. Only the text that I add appears and is clickable ("TOG" here). The menu-icon does not appear. I guess I could replace "TOG" with "PAGES" as a workaround.
Second, when I click on it to open the menu, it pushes the top bar down one row to cover the title and leaving a white space at the top. Ie.:
Here's my code (very much work in progress - logos will be replaced with images, etc):
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="fixed">
<nav class="top-bar " data-topbar role="navigation">
<section class="left-small hide-for-medium-up">
<a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
</section>
<section class="middle tab-bar-section hide-for-medium-up">
<h1>LOGO</h1>
</section>
<ul class="title-area">
<li class="name">
<h1 class="hide-for-small">Logo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li>Search</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Articles</li>
<li>Constituents</li>
<li>Engineers</li>
<li>Shipping</li>
<li>Locomotives</li>
<li>Rolling Stock</li>
<li>References</li>
<li>Forums</li>
</ul>
</section>
</nav>
</div>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>LNER</label></li>
<li>Gresley</li>
<li>Thompson</li>
<li>Peppercorn</li>
</ul>
</aside>
<section class="main-section">
<div class="row">
<div class="large-2 medium-3 columns">
<div class="hide-for-small">
<div class="sidebar">
<nav>
<ul class="side-nav">
<li><label>LNER</label></li>
<li><a class="active" href="gresley.shtml">Gresley</a></li>
<li>Thompson</li>
<li>Peppercorn</li>
<li class="divider"></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">
<h1>Sir Nigel Gresley</h1>
Does anyone have any thoughts as to what is causing my problems?
As far as i do understand you're trying to use Foundation's Off-canvas (menus) in a manner it is not intended.
It seems you are looking for a mobile menu which can be toggled.
Off-canvas (menus) are a layout structure. When the menu shows up the complete layout moves to the left / right. For that reason you content should be wrapped in the Off-canvas (menus) structure:
From http://foundation.zurb.com/docs/components/offcanvas.html:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
...
</ul>
</aside>
<!-- main content goes here -->
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
See the <!-- main content goes here --> in the above. You can try to rebuild your example as follows:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="fixed">
<nav class="top-bar " data-topbar role="navigation">
<section class="left-small hide-for-medium-up">
<a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
</section>
<section class="middle tab-bar-section hide-for-medium-up">
<h1>LOGO</h1>
</section>
<ul class="title-area">
<li class="name">
<h1 class="hide-for-small">Logo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li>Search</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Articles</li>
<li>Constituents</li>
<li>Engineers</li>
<li>Shipping</li>
<li>Locomotives</li>
<li>Rolling Stock</li>
<li>References</li>
<li>Forums</li>
</ul>
</section>
</nav>
</div>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle hide-for-medium-up" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu hide-for-medium-up">
<!-- whatever you want goes here -->
<ul class="off-canvas-list">
<li><label>LNER</label></li>
<li>Gresley</li>
<li>Thompson</li>
<li>Peppercorn</li>
</ul>
</aside>
<!-- main content goes here -->
<section class="main-section">
<div class="row">
<div class="large-2 medium-3 columns">
<div class="hide-for-small">
<div class="sidebar">
<nav>
<ul class="side-nav">
<li><label>LNER</label></li>
<li><a class="active" href="gresley.shtml">Gresley</a></li>
<li>Thompson</li>
<li>Peppercorn</li>
<li class="divider"></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">
<h1>Sir Nigel Gresley</h1>
</div>
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Possible also how to make bootstrap off canvas nav overlap content instead of move it will help you further.
I had downloaded a bootstrap template which has a dropdown menu in middle(mobile version).
Like this:
http://postimg.org/image/58hmpb8f5/
But i want dropdown menu on the top-right corner of my mobile screen
Like this : http://postimg.org/image/5fkeraou1/
This is my html code so far:
<header id ="top" class="mTop">
<div class="topHead">
<div class="container">
<div class="row">
<div class="topMenu">
<ul class="span12 topContact">
<li class="addresTop"><span class="icon-map-marker"></span>456 Jl.Pacar, Singapore</li>
<li class="mailTop"><span class="icon-envelope"></span>Office#Plasma.com</li>
<li class="phoneTop"><span class="icon-phone"></span>(+1) 321-9876520</li>
</ul>
</div>
</div>
</div>
</div>
<div class="headContent">
<div class="container">
<div class="row">
<div class="span4">
<div class="brand">
<img src="images/logo.png" alt="Logo">
</div>
</div>
<div class="span8">
<div class="menu" id="steak">
<nav>
<ul class="navMenu inline-list" id="nav">
<li class="current">Home</li>
<li>About</li>
<li>Service</li>
<li>Our Team</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="clearfix"></div>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
dont you want to use the latest boostrap instead? the latest bootstrap which is 3.3.1 has the navigation that you need.
code in bs3.3.1 is something like this
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
for bootstrap 2, the basic navigation where in you will have a top right menu in mobile view will be
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a 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>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
</div>
</div>
I was reading the tutorial described here http://foundation.zurb.com/docs/components/topbar.html for creating a horizontal form in the top nav bar.
I downloaded the foundation zip and added in the index.html the following:
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>Top Bar Title </h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-form">
<div class="row collapse">
<div class="small-8 columns">
<input type="text">
</div>
<div class="small-4 columns">
Search
</div>
</div>
</li>
</ul>
</section></nav>
What I am getting is this:
while I am expection this:
Any idea why the input text and the search button are not aligned?