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
Related
As you can see on my code, on the left panel, i have an UL and 2 LI.
I want all LI as white color.
I've set style but is not professional, perhaps setting my own style:
lblBiancoMenu does not affect
what can i do?
.lblBiancoMenu {
color: white;
}
;
.subCat .li {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pushy - Off-Canvas Navigation Menu</title>
<meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div data-role="page" id="pageone">
<div style=" background-color: #101010; color: #ffffff;">
<h2 id="listCateg">Categories</h2>
<div id="SubCat3" class='subCat'>
<ul>
<li><a style="color:white" href="#">3</a></li>
<li><a class="lblBiancoMenu" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</body>
</HTML>
The theme you're importing has its own CSS styles. The color rule being imported has a higher specificity than your rule, so your rule is being overridden.
To override the theme styles, either use inline CSS (as you have done). Embedding the CSS in the HTML tag gives it higher specificity.
Or use the !important annotation, which overrides all other CSS declarations.
Use this in your code:
.lblBiancoMenu {
color: white !important;
}
.lblBiancoMenu {
color: white !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pushy - Off-Canvas Navigation Menu</title>
<meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div data-role="page" id="pageone">
<div style=" background-color: #101010; color: #ffffff;">
<h2 id="listCateg">Categories</h2>
<div id="SubCat3" class='subCat'>
<ul>
<li><a style="color:white" href="#">3</a></li>
<li><a class="lblBiancoMenu" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
as you can see when I hover over the dropdown box the link becomes blue, what could be the cause of this??
I am using Django with this maybe that could be causing problems
I tried it in a document with only the materialize header and it works just fine:
Here is the code:
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified 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"/>
</head>
<body>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li>Dropdown<i class="material-icons right">arrow_drop_down</i></li>
</ul>
</div>
</nav>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
M.AutoInit()
$(".dropdown-trigger").dropdown();
</script>
</body>
When I combine it with my Django main page it messes up, what should I remove/add?
Main page header:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Stock Trading Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{%static "/css/main.css"%}">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
Please let me know if you need anything else :)
I use bellow code to add a right button, which is "订阅按钮":
<!doctypoe html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
www.<strong>google</strong>.com
<ul class="nav navbar-nav">
<li class="active">课程</li>
<li>博客</li>
<li>手册</li>
</ul>
订阅课程
</div>
</nav>
<div class="container" style="height:5000px;">
<div>
<h1>title123</h1>
<p>按时打算是多少对阿斯达方的方式斯蒂芬斯蒂芬按时打算</p>
</div>
</div>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
But however the button is not vertical align center, you can see my snapshot bellow:
Tested your code and it's not vertically centered in bootstrap versions 3.0.0-3.0.2 but centered in 3.0.3-3.3.7
I suspect you are using an old version of bootstrap. Upgrade?
I have the newest Foundation complete version and I am following this tutorial. https://www.youtube.com/watch?v=RK_k__4Y4TU
I am trying to get a menu but there is nothing on my website at all. It is just blank.
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<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>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<ul class="menu vertical">
<li>Links</li>
<li>Links</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content></div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I tried your code and only mistake is you have written off-canvas insted of off-canvas-wrap.
No class exist with name off-canvas.
<div class="off-canvas-wrap position-left" id="offCanvas" data-off-canvas>
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!