I've been trying out materialize and when working on the nav bar, depending on how long the logo is, it will overflow outside the div as shown in the snippet if you were to shrink the window. How would you fix this?
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Quiz Manager</title>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper">
Test Brand Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</header>
</body>
Add the following to your script:
$(document).ready(function () {
$('.sidenav').sidenav();
});
Related
I'm new to web developing and I'm trying to create a navigation bar with Bootstrap 5.1.3.
I'm trying to perfectly center "Postal Office", but as you can see it seems to be pushing out to the right. I've tried doing something like mx-auto but it doesn't help. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Post Office</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<!--Navigation-->
<div class="m-4">
<nav class="navbar navbar-expand-sm navbar-light" style="background-color: #e3f2fd;">
<div class="container-fluid">
<ul class="nav navbar-nav me-auto">
Home
Mail
Pricing
Contact Us
</ul>
Postal Office
<ul class="nav navbar-nav ms-auto">
<li class="nav-item dropdown">
Account Options
<div class="dropdown-menu dropdown-menu-end">
My Account
Database Access
Sign Out
</div>
</li>
</ul>
</div>
</nav>
</div>
</body>
Output: img
This is because your left data contain more data & space then right your left data contain 262.17 with 4 column and your right data contain 148.05 with 4 column
look like
40
40
40
262.17
110.08
148.05
This solution works because I am splitting the navbar into two navbars. I noticed that regardless of any <center></center> or other HTML/CSS trickery, if you place your text into the navbar with centering, it will be centered with relation to the navbar and not the actual html document.
You probably noticed that the text you desired to put into the center ("Post Office") was centered with respect to the elements already located in the navbar. This is why your text was always shifted slightly to the right — your text had equal spacing between itself and the leftside elements of the navbar and between itself and the rightside elements of the navbar. This is why when we break down the navbar into two navbars, then we can insert centered text that is globally centered to the webpage, as you desired.
The only downside I see to my method is scaling, which you may have to play around with more.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Post Office</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<style>
<!-- START CHANGE-->
<!-- Added CSS elements as suggested by https://stackoverflow.com/questions/45691242/centering-my-text-in-bootstrap-navbar but pretty sure it would work without this-->
.nav {
display: flex;
justify-content: center;
list-style: none;
}
<!-- END CHANGE-->
</style>
</head>
<body>
<!--Navigation-->
<div class="m-4">
<nav class="navbar navbar-expand-sm navbar-light" style="background-color: #e3f2fd;">
<div class="container-fluid">
<ul class="nav navbar-nav me-auto">
Home
Mail
Pricing
Contact Us
</ul>
</div>
<!-- START CHANGE -->
<!-- Split Navbar into two, so that centering is "global" and not relative to the navbar elements -->
<center>Postal Office</center>
<!-- END CHANGE -->
<div class="container-fluid">
<ul class="nav navbar-nav ms-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle"
data-bs-toggle="dropdown">Account Options</a>
<div class="dropdown-menu dropdown-menu-end">
My Account
<a href="database-access.php" class="dropdown-item">Database
Access</a>
Sign Out
</div>
</li>
</ul>
</div>
</nav>
Here is the result which the OP desired: Centered title in a Bootstrap navbar
I have this code and I want to use the "menu icon" in the code, but it did not appear, and I did not know why?
And this file contains a set of instructions containing the icon and other things, and as it is clear, the icon was placed in the Navbar, but it did not appear
<html DOCTYPE="html5">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Using Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<h1>Portfolio</h1>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Process</li>
<li>Testimony</li>
<li>Contact</li>
</ul>
<box-icon name="menu" type="solid"></box-icon>
</nav>
</header>
<script src="https://unpkg.com/boxicons#2.0.9/dist/boxicons.js"></script>
<script src="app.js"></script>
</body>
</html>
It seems element with attribute name="menu" has not attribute type="solid". However, element with attribute name="menu" has attribute type="regular" .
Removing type="solid" or swapping it to type="regular" will make it work.
<box-icon name="menu" type="regular"></box-icon>
<box-icon name="menu"></box-icon>
check demo in Full Page
put your boxicons script in <head></head> tag and it will start working here is the working demo update me if any change is required.
<html doctype="html5">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Using Flexbox</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/boxicons#2.0.9/dist/boxicons.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav>
<div class="logo">
<h1>Portfolio</h1>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Process</li>
<li>Testimony</li>
<li>Contact</li>
</ul>
<box-icon name="menu" type="solid"></box-icon>
</nav>
</header>
</body>
</html>
I solved the problem by adding the "Font Awesome" library
I created a simple F6 app for sites and tried to copy-paste code snippets to display menu with icons. Why id doe not work neither in the topbar menu not in the off-canvas menu section? Here is the HTML code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FDashboard</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="responsive-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li><span>Three</span> <i class="fi-list"></i></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<div class="off-canvas-wrapper">
<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Your menu or Off-canvas content goes here -->
<!-- Menu -->
<ul class="vertical menu icons icon-left">
<li><i class="fi-list"></i> <span>One</span></li>
<li><i class="fi-list"></i> <span>Two</span></li>
<li><i class="fi-list"></i> <span>Three</span></li>
<li><i class="fi-list"></i> <span>Four</span></li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<h1>Welcome to Foundation</h1>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/dist/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Adding the below lines to app.scss hasn't solved the problem:
#include menu-base;
#include menu-expand;
#include menu-align;
#include menu-direction($dir);
#include menu-icon-position;
#include menu-icons;
#include menu-icon-position;
What is wrong here ? Thank you!
I'm not sure it to be the best and the right solution. Anyway, it works fine. So if there is a better way, it is always welcome. The described steps were made for a F6 project created with Foundation CLI.
Download Foundation Icon Fonts 3
Unzip the downloaded archive and copy its entire content into [your-project]/css folder.
Delete preview.html file (useless as is used just to display available icons).
Reference the icons CSS file in your HTML page as follows <link rel="stylesheet" href="css/foundation-icons/foundation-icons.css" />. You can put just underneath the generated during project creation <link rel="stylesheet" href="css/app.css"> line.
Use one of the icons font, for example:
<li><span>Three</span> <i class="fi-list"></i></li>
Enjoy :)
I am learning on how to make a canvas menu with Foundation & I made this example but it does not work at all!
Here's the code:
<!DOCTYPE html>
<!--[if IE 9]>
<html class="lt-ie10" lang="en">
<![endif]-->
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>thenewboston</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="main.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- Toggle button -->
<a class="left-off-canvas-toggle" href="#">Toggle Menu</a>
<!-- Offcanvas menu -->
<aside class="left-off-canvas-menu">
<ul class="no-bullet">
<li>Home</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</aside>
<!-- Main content -->
<div class="row">
<div class="medium-6 columns bg-2">Hey now dude</div>
<div class="medium-6 columns bg-3">This is some sample content</div>
</div>
<!-- Exit overlay -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Everything looks perfect and my css & js folders are correctly placed at the same directory. I also test if foundation works or not with another simple example and it worked fine. I really don't know why it's not working. Please if you know how to solve it ,please let me know.. Thanks!
I am trying to write my first ASP.NET website and I really want to use the Twitter Bootstrap but I'm failing at the first hurdle.
I downloaded the Zip file from here, unzipped it and added the files to my solution and the following lines to my _LAyout.cshtml file:
<link href="#Url.Content("~/Context/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap-min.js")" type="text/javascript"></script>
Here is a screenshot showing the above files in my solution:
I am trying to create a menu bar across the top with this code which was taken from this turorial
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Context/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap-min.js")" type="text/javascript"></script>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<h3>Present Ideas</h3>
<ul>
<li>Blog</li>
<li>About</li>
<li>Help</li>
</ul>
<ul class="nav secondary-nav">
<li class="menu">
Account Settings
<ul class="menu-dropdown">
<li>Login</li>
<li>Register</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
#RenderBody()
</div>
<footer>
</footer>
</div>
</body>
</html>
What I get, instead of the horizontal bar is this:
I would appreciate any help to get me started with what promises to be, an excellent framework.
You're using Twitter Bootstrap 2.0, but the tutorial was written for Twitter Bootstrap 1.0, there has been quite a few changes to the markup you need to use to get the desired look.
It explains some of the changes to the navbar component in the changelog, there are also some basic examples of how it is done now:
http://getbootstrap.com/2.3.2/getting-started.html#examples
http://getbootstrap.com/2.3.2/components.html#navbar
Also (unrelated to the question), you're including both the minified version and the standard version of the css/js, you only need to include one of each.