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?
Related
I am trying align it so that it will be tests as heading, then gibberish 1, 2, 3 on same row under it. i don't know what I'm doing wrong. right now it only shows as gibberish 1 under it on the left. can someone please help me out?
<div class="container">
<div class="row" id="tests">
<div class="test col-md-12">
<h2>tests</h2><br>
<ul class="col-md-4">
<li>
gibberish 1
</li>
<li>
gibberish 1
</li>
<li>
gibberish 1
</li>
<li>
gibberish 1
</li>
</ul>
<ul class="col-md-4">
<li>
gibberish 2
</li>
</ul>
<ul class="col-md-4">
<li>
gibberish 3
</li>
</ul>
</div>
</div>
</div>
Wrap your ul on one div with class name row like
<div class="row">
<ul class="col-md-4">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
I am trying align it so that it will be tests as heading, then gibberish 1, 2, 3 on same row under it. i don't know what I'm doing wrong. right now it only shows as gibberish 1 under it on the left. can someone please help me out?
<div class="container">
<div class="row" id="tests">
<div class="test col-md-12">
<h2>tests</h2><br>
<div class="row"><!-- Add This -->
<ul class="col-md-4">
<li>
gibberish 1
</li>
<li>
gibberish 1
</li>
<li>
gibberish 1
</li>
<li>
gibberish 1
</li>
</ul>
<ul class="col-md-4">
<li>
gibberish 2
</li>
</ul>
<ul class="col-md-4">
<li>
gibberish 3
</li>
</ul>
</div> <!-- Add This -->
</div>
</div>
</div>
I am trying to replicate the following codepen navigation bar although I have a simple logo on the left and two links on the right. The framework used is Zurb Foundation: https://codepen.io/IamManchanda/pen/LymroM?editors=1000
So far I cannot seem to get the menu responsive. When I use a large window, the mobile menu stays put and will not toggle like in the pen. Any ideas how to replicate this?
Template:
<div class="title-bar" data-responsive-toggle="navbar" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="navbar"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="navbar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">
<img id="logo" src="./assets/img/logo4white.png" alt="logo">HANYU.CO
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li id="home"><router-link class="link align-left" to="/">Home</router-link></li>
<li id="logout" v-if="this.$cookies.get('user')" #click="logout"><a>Logout</a></li>
</ul>
</div>
</div>
Thanks in advance!
I realized I was not calling $(document).foundation(); in the JavaScript. Oops!
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>
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 am using nav-pills from bootstrap 3 to display my image banner on the corresponding tab. I want to have an unordered list on the "#contact-us" (Corporate, americas/caribbean, africa/middle east, europe, asia/australia) on top of the banner image and have both the text and image to be responsive. I can get the list on top of the image, but once I shrink the browser the list would run out of the banner image.
What do I need to do in my css so that my text would stay within the banner even when i am shrinking the image?
Below is my html.
Thanks in advance!
<div class="banner-tabs">
<div class="container">
<ul class="nav nav-pills tab-titles" id="pills-first">
<li>About Us</li>
<li>Careers</li>
<li class="active">Contact Us</li>
</ul> <!-- nav nav-pills -->
</div> <!-- container -->
<!-- Content -->
<div class="tab-content">
<div class="tab-pane" id="about-us">
<img src="../images/delete-1.png" class="tab-banner" />
</div> <!-- about us -->
<div class="tab-pane" id="careers">
<img src="../images/delete-2.png" class="tab-banner" />
</div> <!-- careers -->
<div class="tab-pane active" id="contact-us">
<img src="../images/delete-1.png" class="tab-banner">
<div class="continents">
<p>Click to view:</p>
<ul>
<li id="corporate"><a>Corporate</a></li>
<li id="americas-caribbean"><a>Americas/Caribbean</a></li>
<li id="africa-middle-east"><a>Africa/Middle East</a></li>
<li id="europe"><a>Europe</a></li>
<li id="asia-australia"><a>Asia/Australia</a></li>
</ul>
</div> <!-- continents -->
</div>
</div> <!-- row -->
</div> <!-- corporate-content -->
perhaps you can provide something like a codepen example ?
Use this as a base : http://codepen.io/alogonzac/pen/vOKELp
<div class="banner-tabs">...</div>