MaterializeCSS Icons not working - html

I'm having an issue with getting the icons to display while using MaterializeCSS. I'm using the bare bones "Getting Started" from the documentation but for whatever reason icons refuse to show up. Below is the code I'm using
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<ul class="hide-on-med-and-down">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">First Sidebar Link</li>
<li class="bold">Second Sidebar Link</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<i class="mdi-navigation-menu"></i>
</nav>
<!--Import jQuery before materialize.js-->
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script>
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 240
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
$('.collapsible').collapsible();
</script>
</body>
</html>
All this code is trying to do is display a navbar, it was pulled directly from the documentation.
The hamburger menu doesn't appear when the browser is resized
The dropdown arrow doesn't appear beside the dropdown menu item.
I feel like it's something stupid that I'm missing but I've been looking at it for 2 hours and my brain is melted. Any help would be appreciated.

EDIT: Here's the updated code for the dropdown arrow too:
<i class="material-icons right">arrow_drop_down</i>
I ran into this issue too and wondered where my hamburger icon went!
Unfortunately, a lot of their documentation hasn't been refreshed, so the code you are using is a bit outdated.
Change this:
<i class="mdi-navigation-menu"></i>
to this:
<i class="material-icons">menu</i>
and you should see the icon. If you check their source code, you'll see that even their site uses the updated code that's different from their docs:

CHANGE HTTP TO HTTPS in linking font library. It worked for me.

Related

Dropdown menu using bootstrap

I have a dropdown in my menu for a site I'm creating with bootstrap and the dropdown doesn't seem to work. I am using Bootstrap 2.3.2 Below is the code for my dropdown:
<li class="dropdown">
Art
<ul class="dropdown-menu" role="menu">
<li>Upload Art</li>
<li>Search For Art</li>
</ul>
</li>
And after doing a little bit of research, I've read that the order of the .js, .css, and jQuery links might have an affect. This is the current order I have them in, perhaps this order is what is causing the problem:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="Styles/css/bootstrap.min.css" rel="stylesheet">
<link href="Styles/css/NewStrap.css" rel="Stylesheet" />
<script src="Styles/js/bootstrap.min.js"></script>
1st, load css first, put your css in <head></head> tag
2nd, load js before the </body>
example:
<!-- load all css first -->
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<li class="dropdown">
Art
<ul class="dropdown-menu" role="menu">
<li>Upload Art</li>
<li>Search For Art</li>
</ul>
</li>
<!-- put all js before </body> tag -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Okay I found out what was wrong. Bootstrap 2.3.2 is not compatible with JQuery 3.0 and higher. Using JQuery 1.9 fixed the issues.

Hyperlinks change the content of the object tag

I have created a navigation menu that I have been inserting into my pages using the "object" tag. Whenever I click a link on the navigation menu, it takes me to the correct page but it is inside the object tag. The rest of the page remains the same including the original address in the address bar. I cannot seem to find anyone else having the same issue as I am.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<link rel="stylesheet" href="/css/body.css" />
<body>
<object id="navigation" type="text/html" data="/includes/inc.nav.php"></object>
<div id='page'>
<div id='pageTitle'>Knowledge Base</div>
<p>Here is the body</p>
</div>
</body>
</html>
inc.nav.php
<link rel="stylesheet" href="/css/navbar.css" />
<ul id="menu">
<li>Tickets
<ul>
<li>BLAH</li>
<li>Haha</li>
<li>Woohoo</li>
</ul>
</li>
<li>Equipment
<ul>
<li>Trucks</li>
</ul>
</li>
<li>Reports
<ul>
<li>Reports</li>
<li>User List</li>
</ul>
</li>
<li>Knowledge Base</li>
<li>Logout</li>
</ul>
I'm sure I am missing something simple. Any help would be appreciated.
Found information on the answer here
Links should look like this:
<li><a target="_parent" href="/vision/tickets.php">BLAH</a></li>

Bootstrap material design dropdown button is not drawn correctly

I am trying to use button from bootstrap material design from below link:
http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html
I downloaded the dropdown button and all needed CSS and JavaScript from the above link. When I am trying to test a sample dropdown button it is not drawn properly. Below is the sample html code and output.
I am not able to find out what I am missing. I tried to find the answers from net but didn't find any! So I am posting it here.
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="css/roboto.min.css" rel="stylesheet">
<link href="css/material.min.css" rel="stylesheet">
<link href="css/ripples.min.css" rel="stylesheet">
</head>
<body>
<h3>Why this dropdown icon height is half of button????</h3>
<div class="btn-group">
Primary
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="js/ripples.min.js"></script>
<script src="js/material.min.js"></script>
<script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
});
</script>
</body>
</html>
Setting the doctype to HTML5 did the trick for me -- add <!doctype html> to the top of your document.
I don't know why, but it's the FIRST thing I thought of.

weird positioning top bar zurb foundation 5

Hi guys so a site I've been working on is acting up and has randomly re-positioined itself wierdly on the top bar and I have no idea why. I thought everything was fine before, however recently I saw the site and it just so happened that theres a wierd space at the top of the page between the nav bar and the window url. Can someone inspect it and help me figure out whats causing this and if there would be a quick or easy fix. The site is www.omegadesignla.com
and any help would be appreciated, thanks.
<!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>Omega Design | LA</title>
<meta name="description" content="Web development and printing services serving the greater los angeles area">
   <meta name="keywords" content="web development, printing, graphics design, los angeles, santa clarita">
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/foundation-icons.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/logofinal.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>
There's a line " " right after the body tag. Remove it and this should reposition the navigation bar correctly.
I just realized that you can only see this if you 'inspect element' in development tools.
If you can edit the page's source, make sure that the <nav class="top-bar" data-topbar> comes right after <body>. Right now, there is a blank line (line 16).
Solve this problem try this
body{
font-size: 0;
}

Twitter bootstrap nav class. Data-toggle stop menus working

I have a problem with Twitter Bootstrap's class="nav."
When I include "data-toggle='tab'", none of my menu items function.
(BTW: If I remove data-toggle, the first option does not work, but the rest will i.e. if data-toggle is removed, Google does NOT work, but Bing and Bing2 will, and Yahoo won't work, but CNN and Weather do)
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
</head>
<body>
<ul id="myTab" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Google</li>
<li>Bing</li>
<li>Bing2</li>
<li class="dropdown">
More choices <b class="caret"></b>
<ul class="dropdown-menu">
<li>Yahoo</li>
<li>CNN</li>
<li>Weather</li> <!-- NOTE data-toggle removed -->
</ul>
</li>
</ul>
</body>
</html>
Here is a working example: http://jsbin.com/ujujub/1/edit
Three things:
Remember to include bootstrap-tab.js
Write a script responsible for handling navigation from tab to tab
The links should not point directly to the content of your sites, but rather to the the ID of divs that wrap the content of your sites.